Openlayer加载4326、3857坐标系的矢量切片服务

矢量切片Vector Tile详细参考常用坐标系EPSG:4326等同于WGS84坐标系约同于CGCS2000单位度°EPSG:3857等同于900913由Mercator投影而来经常用于web地图也称WebMercator单位米m。Openlayer库引用import{Map,View,Feature,Overlay}fromol;importTileLayerfromol/layer/Tile;importOSMfromol/source/OSM;importXYZfromol/source/XYZ;import{ZoomSlider,MousePosition}fromol/control;import{VectorTileasVectorTileLayer}fromol/layer;import{VectorasVectorSource,VectorTileasVectorTileSource,TileDebug}fromol/source;import{CircleasCircleStyle,Fill,Stroke,Style}fromol/style;import{GeoJSON,MVT}fromol/format;importProjectionfromol/proj/Projection;import*asolProjfromol/proj;import{createStringXY}fromol/coordinate;import{createXYZ}fromol/tilegrid;EPSG:4326坐标系letcountrynewStyle({stroke:newStroke({color:rgba(164, 162, 174),width:2}),fill:newFill({color:rgba(233, 229, 216)})});letvector4326newVectorTileLayer({// 矢量切片的数据源source:newVectorTileSource({projection:EPSG:4326,format:newMVT({idProperty:iso_a3}),tileGrid:createXYZ({extent:olProj.get(EPSG:4326).getExtent(),maxZoom:22}),// 矢量切片服务地址tileUrlFunction:function(tileCoord){consturlhttps://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countriesEPSG%3A4326pbf/(tileCoord[0]-1)/tileCoord[1]/(Math.pow(2,tileCoord[0]-1)-1-tileCoord[2]).pbf;returnurl;}}),style:country});letmapnewMap({target:map,layers:[vector4326,// 加载瓦片网格图层// new TileLayer({// //瓦片网格数据源// source: new TileDebug({// //获取瓦片网格信息// // tileGrid: vector4326.getSource().getTileGrid()// })// })],controls:[newMousePosition({coordinateFormat:createStringXY(6)// 鼠标位置})],view:newView({projection:EPSG:4326,// pbf4326格式需要使用4326坐标系center:[114.1564839,24.61548857],zoom:2})});效果图如下EPSG:3857坐标系letcountrynewStyle({stroke:newStroke({color:rgba(164, 162, 174),width:2}),fill:newFill({color:rgba(233, 229, 216)})});letvector3857newVectorTileLayer({declutter:true,source:newVectorTileSource({maxZoom:22,format:newMVT({idProperty:iso_a3}),url:https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/ne:ne_10m_admin_0_countriesEPSG%3A900913pbf/{z}/{x}/{-y}.pbf}),style:country});letmapnewMap({target:map,layers:[vector4326,// 加载瓦片网格图层// new TileLayer({// //瓦片网格数据源// source: new TileDebug({// //获取瓦片网格信息// tileGrid: vector3857.getSource().getTileGrid()// })// })],controls:[newMousePosition({coordinateFormat:createStringXY(6)// 鼠标位置})],view:newView({center:[0,0],zoom:2,})});效果图如下