网站打不开别人能打开网站霸屏怎么做

网站打不开别人能打开,网站霸屏怎么做,响应式 网站建设,淄博想建网站在实际项目中#xff0c;我们经常需要加载各种标准地图服务#xff0c;比如 WMS、WMTS#xff0c;或者自定义的 XYZ 格式瓦片。今天就来学习一下如何在 mapvthree 中使用这些服务#xff0c;以及理解不同的瓦片切图规则。了解标准地图服务 在 GIS 领域#xff0c;有几种常…在实际项目中我们经常需要加载各种标准地图服务比如 WMS、WMTS或者自定义的 XYZ 格式瓦片。今天就来学习一下如何在 mapvthree 中使用这些服务以及理解不同的瓦片切图规则。了解标准地图服务在 GIS 领域有几种常见的地图服务标准WMSWeb Map ServiceWeb 地图服务通过 HTTP 请求获取地图图片WMTSWeb Map Tile ServiceWeb 地图瓦片服务提供预切好的瓦片XYZ通用的瓦片格式通过 URL 模板直接访问瓦片我的理解WMS 是动态生成地图图片WMTS 和 XYZ 是使用预切好的瓦片性能更好。第一步加载 WMS 服务WMS 是 OGC 标准的 Web 地图服务通过参数化的 HTTP 请求获取地图图片。基本使用/* by yours.tools - online tools website : yours.tools/zh/generatematicwallets.html */ import * as mapvthree from baidumap/mapv-three; const container document.getElementById(container); const engine new mapvthree.Engine(container, { map: { center: [120.628, 27.786], range: 500000, provider: null, projection: EPSG:3857, }, }); // 添加 WMS 服务 const mapView engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.WMSImageryTileProvider({ url: https://ows.mundialis.de/services/service, params: { LAYERS: TOPO-WMS,OSM-Overlay-WMS, SRS: EPSG:3857, VERSION: 1.1.1, WIDTH: 256, HEIGHT: 256, }, }), }));我的发现WMS 需要配置服务 URL 和请求参数包括图层名称、坐标系、版本等。参数说明urlWMS 服务地址params.LAYERS要加载的图层名称多个图层用逗号分隔params.SRS空间参考系统常用EPSG:3857Web 墨卡托或EPSG:4326WGS84params.VERSIONWMS 版本常用1.1.1或1.3.0params.WIDTH和params.HEIGHT请求图片的尺寸通常为 256第二步加载 WMTS 服务WMTS 是 OGC 标准的 Web 地图瓦片服务提供预切好的瓦片性能比 WMS 更好。基本使用/* by yours.tools - online tools website : yours.tools/zh/generatematicwallets.html */ const mapView engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.WMTSImageryTileProvider({ url: https://mrdata.usgs.gov/mapcache/wmts?LAYERsgmc2TILEMATRIX{z}, params: { STYLE: default, TILEMATRIXSET: GoogleMapsCompatible, VERSION: 1.0.0, FORMAT: image/png, }, }), }));我的发现WMTS 的 URL 中可以使用{z}占位符引擎会自动替换为对应的缩放级别。参数说明urlWMTS 服务地址可以使用{z}、{x}、{y}占位符params.STYLE图层样式params.TILEMATRIXSET瓦片矩阵集常用GoogleMapsCompatibleparams.VERSIONWMTS 版本通常为1.0.0params.FORMAT图片格式如image/png、image/jpeg我的理解WMTS 使用预切好的瓦片加载速度更快URL 中的占位符会在请求时被替换为实际的瓦片坐标不同的 WMTS 服务可能有不同的参数要求第三步加载 XYZ 格式瓦片XYZ 是最通用的瓦片格式通过 URL 模板直接访问瓦片支持各种自定义瓦片服务。基本使用const mapView engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.XYZImageryTileProvider({ url: https://server.arcgisonline.com/ArcGIS/rest/services/ World_Topo_Map/MapServer/tile/{z}/{y}/{x}, }), }));我的发现XYZ 格式使用{z}/{y}/{x}占位符分别代表缩放级别、行号、列号。切图规则y 和 reverseY不同的瓦片服务可能使用不同的切图规则主要体现在 Y 轴的起始位置y默认Y 轴从左上角开始向下递增如谷歌地图reverseYY 轴从左下角开始向上递增如 TMS 标准// 使用 y 规则左上角为原点 const mapView1 engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.XYZImageryTileProvider({ url: https://example.com/tiles/{z}/{x}/{y}.png, // 默认使用 y 规则 }), })); // 使用 reverseY 规则左下角为原点TMS 标准 const mapView2 engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.XYZImageryTileProvider({ url: https://example.com/tms/{z}/{x}/{reverseY}.png, // 使用 reverseY 占位符 }), }));我的理解如果瓦片服务使用左上角为原点Y 向下递增使用{y}如果瓦片服务使用左下角为原点Y 向上递增TMS 标准使用{reverseY}使用错误的规则会导致瓦片位置错乱TMS 示例const mapView engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.XYZImageryTileProvider({ url: https://mapopen-pub-jsapigl.bj.bcebos.com/tms-bj/{z}/{x}/{reverseY}.png, startLevel: 7, maxLevel: 12, }), }));我的发现可以设置startLevel和maxLevel来限制瓦片的缩放级别范围。第四步理解切图规则作为一个初学者理解切图规则很重要这决定了瓦片能否正确显示。坐标系和原点地图瓦片通常使用两种坐标系屏幕坐标系左上角原点X 轴从左到右递增Y 轴从上到下递增原点在左上角如谷歌地图、OpenStreetMap地理坐标系左下角原点X 轴从左到右递增Y 轴从下到上递增原点在左下角如TMSTile Map Service标准如何判断使用哪种规则我的经验查看服务文档通常会说明使用的切图规则如果文档没有说明可以尝试两种规则看哪种显示正确常见的服务谷歌地图、OpenStreetMap使用yTMS 标准服务使用reverseY瓦片坐标计算我的理解z缩放级别数值越大地图越详细x瓦片的列号从 0 开始y瓦片的行号从 0 开始在缩放级别 z 下总共有2^z × 2^z个瓦片第五步完整示例我想写一个完整的示例展示三种服务的使用import * as mapvthree from baidumap/mapv-three; const container document.getElementById(container); const engine new mapvthree.Engine(container, { map: { center: [120.628, 27.786], range: 500000, provider: null, projection: EPSG:3857, }, }); // 示例 1WMS 服务 const wmsMapView engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.WMSImageryTileProvider({ url: https://ows.mundialis.de/services/service, params: { LAYERS: TOPO-WMS, SRS: EPSG:3857, VERSION: 1.1.1, WIDTH: 256, HEIGHT: 256, }, }), })); // 示例 2WMTS 服务 const wmtsMapView engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.WMTSImageryTileProvider({ url: https://mrdata.usgs.gov/mapcache/wmts?LAYERsgmc2TILEMATRIX{z}, params: { STYLE: default, TILEMATRIXSET: GoogleMapsCompatible, VERSION: 1.0.0, FORMAT: image/png, }, }), })); // 示例 3XYZ 格式y 规则 const xyzMapView engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.XYZImageryTileProvider({ url: https://server.arcgisonline.com/ArcGIS/rest/services/ World_Topo_Map/MapServer/tile/{z}/{y}/{x}, }), })); // 示例 4XYZ 格式reverseY 规则TMS const tmsMapView engine.add(new mapvthree.MapView({ imageryProvider: new mapvthree.XYZImageryTileProvider({ url: https://mapopen-pub-jsapigl.bj.bcebos.com/tms-bj/{z}/{x}/{reverseY}.png, startLevel: 7, maxLevel: 12, }), }));我的感受掌握了这三种服务的使用方法就可以加载各种标准地图服务了第六步踩过的坑作为一个初学者我踩了不少坑记录下来避免再犯坑 1WMS 地图不显示原因参数配置错误比如图层名称不对、坐标系不匹配。解决检查 WMS 服务的 GetCapabilities 文档确认正确的参数确保SRS参数与引擎的投影设置一致确认LAYERS参数中的图层名称正确坑 2WMTS 瓦片位置错乱原因URL 占位符使用错误或者TILEMATRIXSET不匹配。解决确认 URL 中的占位符格式正确{z}、{x}、{y}检查TILEMATRIXSET是否与服务提供的一致查看服务的 GetCapabilities 文档坑 3XYZ 瓦片上下颠倒原因切图规则选择错误应该用y却用了reverseY或者相反。解决查看服务文档确认使用的切图规则如果文档没有说明尝试两种规则看哪种显示正确记住左上角原点用y左下角原点用reverseY坑 4瓦片加载很慢原因服务地址访问慢或者网络问题。解决检查服务地址是否可访问考虑使用 CDN 加速对于自定义服务确保服务器性能足够坑 5某些缩放级别没有瓦片原因服务只提供了特定缩放级别的瓦片。解决使用startLevel和maxLevel限制缩放级别范围。我的学习总结经过这一天的学习我掌握了WMS 服务动态生成地图图片需要配置服务 URL 和请求参数WMTS 服务使用预切好的瓦片性能更好支持 URL 占位符XYZ 格式最通用的瓦片格式支持自定义服务切图规则理解y和reverseY的区别正确选择切图规则参数配置了解各种服务的参数含义和配置方法我的感受标准地图服务虽然配置有点复杂但是用起来其实不难。关键是要理解不同服务的特点然后正确配置参数和切图规则下一步计划学习更多地图服务的配置选项尝试创建自定义的瓦片服务做一个完整的地图展示项目学习笔记就到这里啦作为一个初学者我觉得标准地图服务虽然配置有点复杂但是用起来其实不难。关键是要理解不同服务的特点然后正确配置参数和切图规则希望我的笔记能帮到其他初学者大家一起加油