企业官网建设流程全解析

矢量切片（Vector Tile）

详细参考

常用坐标系

1. EPSG:4326，等同于WGS84坐标系（约同于CGCS2000），单位：度（°）；
2. EPSG:3857，等同于900913，由Mercator投影而来，经常用于web地图，也称WebMercator，单位：米（m）。

Openlayer库引用

import{Map,View,Feature,Overlay}from"ol";importTileLayerfrom"ol/layer/Tile";importOSMfrom"ol/source/OSM";importXYZfrom"ol/source/XYZ";import{ZoomSlider,MousePosition}from"ol/control";import{VectorTileasVectorTileLayer}from"ol/layer";import{VectorasVectorSource,VectorTileasVectorTileSource,TileDebug}from"ol/source";import{CircleasCircleStyle,Fill,Stroke,Style}from"ol/style";import{GeoJSON,MVT}from"ol/format";importProjectionfrom"ol/proj/Projection";import*asolProjfrom"ol/proj";import{createStringXY}from"ol/coordinate";import{createXYZ}from"ol/tilegrid";

EPSG:4326坐标系

letcountry=newStyle({stroke:newStroke({color:"rgba(164, 162, 174)",width:2}),fill:newFill({color:"rgba(233, 229, 216)"})});letvector4326=newVectorTileLayer({// 矢量切片的数据源source:newVectorTileSource({projection:"EPSG:4326",format:newMVT({idProperty:"iso_a3"}),tileGrid:createXYZ({extent:olProj.get("EPSG:4326").getExtent(),maxZoom:22}),// 矢量切片服务地址tileUrlFunction:function(tileCoord){consturl="https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/"+"ne:ne_10m_admin_0_countries@EPSG%3A4326@pbf/"+(tileCoord[0]-1)+"/"+tileCoord[1]+"/"+(Math.pow(2,tileCoord[0]-1)-1-tileCoord[2])+".pbf";returnurl;}}),style:country});letmap=newMap({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坐标系

letcountry=newStyle({stroke:newStroke({color:"rgba(164, 162, 174)",width:2}),fill:newFill({color:"rgba(233, 229, 216)"})});letvector3857=newVectorTileLayer({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_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf"}),style:country});letmap=newMap({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,})});

效果图如下：