企业官网建设流程全解析

简介：面向Web GIS开发者的mapbox-gl.js扩展实例，基于v2.13.0实现4326、3857、4490三种坐标系切片地图服务加载，并集成绘图控件，覆盖点、线、面、矩形、圆、编辑、删除等交互操作，同时关闭token请求，降低本地调试与内网部署门槛。资源共11个文件，以JavaScript核心逻辑为主（6个js），辅以2个HTML演示页、2个CSS样式表和1个JSON数据文件，压缩包仅601KB，结构紧凑，便于直接阅读和二次开发。实例针对矢量切片从原始数据分层、样式设计、切片缓存到前端可视化的复杂流程，给出了完整可运行的前端实现参考，适合需要处理国内坐标系、扩展Mapbox绘图能力或研究切片加载机制的开发者。目前已有2254人学习下载，验证了其实用性与参考价值。 我们直接说正事。年初接了个项目，要求在一个已有的Web地图系统里把WGS84（4326）、Web墨卡托（3857）、CGCS2000（4490）三种坐标系的地图切片服务全部跑通，另外还要加一套可交互的绘图控件，用于在地图上做地块标绘和范围圈选。后端切片服务用的是自建的GeoServer，前端地图框架选的是mapbox-gl.js v2.13.0。整个折腾过程踩了不少坑，尤其是4490坐标系切片在mapbox-gl里默认根本没法直接用，需要自己做一套坐标转换适配。这篇就把这套方案完整记录下来，从坐标系原理、切片服务发布、mapbox-gl.js的地图初始化，到自定义绘图控件的实现，一次性讲清楚。

1. 坐标系与切片机制：先搞清楚地图服务的底层逻辑

1.1 三种坐标系到底有什么区别

这三个坐标系在实际GIS项目里几乎天天碰见，但很多人对它们的区别其实是一知半解的。我先用最直白的方式解释一下。

4326就是WGS84经纬度坐标系，GPS直接输出的就是它，单位是度。它的本质是一个地心地固的三维坐标系统，但我们在Web地图里通常只用到它的经纬度投影结果。全球定位、车载导航、手机地图，底层源头基本都是这个坐标系。

3857是Web墨卡托投影坐标系，也叫"球形墨卡托"，单位是米。Google Maps、OpenStreetMap、高德、百度（百度有自己的偏移系，但底子也是它）这些Web地图默认用的都是它。它的核心思路是把地球当作一个球体，然后将球面经纬度映射到一个正方形象限里，坐标范围从-20037508.34到20037508.34。好处是切片计算规则统一，全球地图拼接非常简单；坏处是面积变形很严重，纬度越高变形越夸张，所以它只适合做小比例尺的Web展示，不能用于精确量算。

4490是CGCS2000地理坐标系，这是我国现行法定的大地基准坐标系，单位也是度。它和WGS84在实际使用中差异很小（同一点在两种坐标系下的经纬度差值通常小于0.1米），但在国家测绘、国土规划、不动产登记这些官方业务系统里，成果数据要求必须用CGCS2000。切片服务要满足监管验收，就必须支持4490坐标系的数据发布和前端加载。

1.2 切片服务的网格规则与坐标系绑定

理解切片服务的关键在于：一张瓦片是对应到某个空间范围（TileMatrix）的，而TileMatrix的定义跟坐标系直接绑定。

拿GeoServer来说，发布一个3857切片服务时，内置的EPSG:900913或EPSG:3857瓦片矩阵集在全球范围内是标准化的：第0级只有1张瓦片，覆盖全球，大小为256×256像素；第1级分成2×2；第n级就是2^n×2^n张。坐标范围刚好对应Web墨卡托的全球边界。

4326的切片就不同了，它采用经纬度网格切分。ESRI和OGC定义了EPSG:4326的瓦片矩阵集，第0级是2×1的瓦片（经度-180到180，纬度-90到90），因为经纬度范围的比例是2:1。这套规则在MapServer、GeoServer里都是一致的。

但4490就尴尬了。OGC的标准里并没有针对CGCS2000定义一套全球统一的Web切片瓦片矩阵集。GeoServer在发布4490切片时需要手动指定瓦片矩阵集，而且如果后端生成的是4490坐标系的瓦片，前端mapbox-gl.js默认是拿3857的坐标系来算瓦片网格的，直接加载就会出现瓦片位置错乱、甚至完全加载不出来的情况。

所以这套方案的核心工作，就是在mapbox-gl.js里实现一套自定义的坐标系变换逻辑，让前端能够正确请求并展示4490瓦片。

我整理了一张对比表，方便直观理解：

2. 地图初始化与多源加载：mapbox-gl.js v2.13.0的配置实战

2.1 引入依赖与基础地图初始化

v2.13.0是Mapbox GL JS在2022年发布的一个比较稳定的版本，虽然现在已经有v3.x了，但对于非Mapbox官方token的第三方切片服务加载来说，v2.13.0的机制反而更干净，它允许我们更灵活地自定义transform。我在这套方案里就用它来做底座。

在项目里我用的是npm方式管理依赖，你直接这样安装：

npm install mapbox-gl@2.13.0

页面入口文件里引入样式和脚本：

import mapboxgl from 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css';

这里一定要记得引入css文件。我见过很多人在vue项目里只引入js包，结果地图渲染出来只有灰底没有瓦片、控件位置全部错乱，排查半天最后发现是样式没引。

基础初始化代码，加载一个3857的底图：

const map = new mapboxgl.Map({ container: 'map', style: { version: 8, sources: { osm: { type: 'raster', tiles: ['https://your-geoserver-host/gwc/service/wmts?layer=your_layer&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}'], tileSize: 256, attribution: 'GeoServer' } }, layers: [ { id: 'osm-layer', type: 'raster', source: 'osm', minzoom: 0, maxzoom: 18 } ] }, center: [120.15, 30.28], // 杭州 zoom: 10 });

这套配置的核心是style对象里手动声明sources和layers。mapbox-gl.js的style规范是公开的（Mapbox Style Specification），v8版本已经非常稳定，第三方服务完全可以用这种方式加载。

2.2 4326坐标系切片的加载配置

4326的瓦片集跟3857的瓦片集切分规则不一样。GeoServer里如果用EPSG:4326的TileMatrixSet来切，会在GWC里生成以经纬度网格为边界的瓦片。此时前端不能直接用默认的瓦片坐标来请求，因为mapbox-gl.js内部默认使用3857椭球体来做缩放和裁剪变换。

加载4326切片时，需要加上map.setMaxBounds或者设置合适的中心点和缩放级别约束，因为4326的TileMatrixSet第0级是2×1，不像3857那样是1×1。如果你不做任何处理，前端的瓦片坐标和4326切片集的TileMatrix会对不上，结果就会错位。

我在实践中发现一个相对干净的解决方案：让GeoServer同时发布3857和4326两套瓦片，前端把4326的切片作为一个独立的source类型加载，并且配合tileSize: 512（因为4326切片的TileMatrix分辨率策略不同，用512可以匹配更多比例尺级别）。

具体的GeoServer发布细节后面讲到实际操作时再展开，这里先给mapbox-gl.js端的配置写法：

sources: { cgcs2000_wmts: { type: 'raster', tiles: [ 'https://your-geoserver-host/geoserver/gwc/service/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=your_workspace:cgcs2000_layer&STYLE=&TILEMATRIXSET=EPSG:4326&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}' ], tileSize: 256, minzoom: 2, maxzoom: 18 } }

这里有个关键点：TILEMATRIX={z}这种方式是基于GeoServer的KVP格式请求。如果你的服务是RESTful风格，也可以让GeoServer自动生成完整的WMTS链接。

2.3 4490坐标系切片的深层适配方案

这是整套方案里最麻烦也最核心的部分。

先说结论：要让mapbox-gl.js正确加载4490坐标系切片，必须在前端实现一套坐标系转换，把4490的经纬度坐标实时转换到3857的投影坐标，然后再让mapbox-gl.js按照自身的Web墨卡托网格去请求瓦片。

什么意思？假设你的GeoServer发布了一个CGCS2000地理坐标系（4490）的影像数据，并生成了一套基于4490经纬度网格的瓦片。mapbox-gl.js在请求瓦片时，内部会计算当前视角对应的3857坐标范围（extent），然后以3857的瓦片编号请求瓦片。由于4490切片集的TileMatrix不是与3857全球网格一一对应的，所以同样的{ z, x, y }请求到后端根本找不到对应的瓦片。

解决办法是重写mapbox-gl.js的transform。具体来说，在Map初始化时，传入自定义的transformRequest或者更底层的map.setTransform（v2.x支持）。我在项目中采用的方式是重写map.transform中的坐标投影函数，把WGS84经纬度坐标实时映射为CGCS2000的经纬度坐标（实际上两者差值可以忽略，在大多数应用场景下不需要做七参数转换），然后拦截瓦片URL，重新计算瓦片行列号。

但如果你不想修改源码，还有一个更实用的方案：把Web墨卡托全球网格当作"容器"，后端在发布4490切片时，同时发布一份Web墨卡托全球网格的叠加层，然后在mapbox-gl.js里通过样式层的paint属性做偏移校正。不过这个方案视觉上会有偏差，我不推荐用于精确业务。

最终我在这个项目里的方案是：GeoServer发布4490切片时使用EPSG:4490的TileMatrixSet，同时前端在mapbox-gl.js里通过MaplibreGL兼容层（或者直接改源码）重写瓦片请求计算逻辑。目前我们用的是mapbox-gl.js v2.13.0的官方API，没有魔改源码，所以实际上走了另一条路——用4490的切片集配合动态坐标转换库proj4，在每个zoom级别下把WGS84坐标转成4490经纬度坐标，再调用map.jumpTo时实时更新中心点和scale，这样瓦片就能对齐。

这个方案说起来简单，但落地的时候有几个细节需要注意，我在下面的实操章节里详细写。

3. 实操流程：从GeoServer发布切片到mapbox-gl.js多源加载

3.1 第一步：检查数据源坐标系并做统一

任何时候开始做切片服务，第一步永远是检查原始数据的坐标系。用gdalinfo命令可以快速查看：

gdalinfo your_raster.tif

看输出里的Coordinate System is:字段。如果是EPSG:4490但数据边界是经纬度范围，那说明数据是地理坐标系；如果输出的是PROJCS["WGS 84 / Pseudo-Mercator"]，那说明是3857投影。

如果你手头的数据明明是CGCS2000成果，但坐标系是GCS_WGS_1984（也就是标注成4326了），需要特别留意实际数值。因为CGCS2000和WGS84在现阶段差值很小，很多数据生产单位在导出的时候就直接写成WGS84了。但你如果做正式的国土项目，验收单位会要求原始数据必须是CGCS2000定义的，必须用gdalwarp重投影：

gdalwarp -s_srs EPSG:4490 -t_srs EPSG:4490 -r cubic -of GTiff input.tif output_4490.tif

这里-s_srs和-t_srs都写4490，看起来像是无用功。实际意义在于，如果原数据的坐标系标注混乱，这一条命令可以强制统一坐标系定义，并同时修正内部的GeoTransform参数。数据量大时建议加上-co COMPRESS=LZW参数压缩存储，能节省差不多一半的磁盘空间。

3.2 第二步：GeoServer中发布4490切片瓦片集

在GeoServer里发布数据源后，需要进入Tile Caching（GWC）页面配置切片。

如果你的GeoServer部署的是独立版（比如通过installer安装到tomcat的），GWC一般是自带集成的。发布图层后，在Tile Caching的Tile Layers列表里找到你的图层，进入Seeds/Truncate标签页，选择EPSG:4490作为GridSet，设置缩放级别区间，然后执行Seed this layer。

这里有个关键点：GeoServer里默认没有EPSG:4490这个GridSet。你需要先在Gridsets菜单里新建一个。参数按下面这样设置：

• 坐标系：EPSG:4490（如果下拉列表里没有，可以手动输入）
• 瓦片宽度/高度：256或512，建议256，兼容性好
• 瓦片矩阵标识符：EPSG:4490或者自己命名，如CGCS2000
• 分辨率列表：你可以在生成瓦片矩阵后手动填，也可以让GeoServer基于经纬度范围自动计算

GeoServer的GridSet配置界面里有一个Resolutions表格，你添加经纬度范围后，点Generate，系统会自动生成一套基于度数的分辨率矩阵。它的第0级一般是0.703125（这是全球经度360度除以2再除以256的结果）。你也可以用下面的规律手动验证一下：第1级分辨率 = 第0级 / 2，每一级减半。

数据量大的时候不要直接整个发布，建议先用一个小范围的测试数据跑通GWC切片的完整流程，确认瓦片生成了再上全量。我第一次在这个环节就吃了亏，直接对一个全省的影像数据执行seed，整整跑了十几个小时还没跑完，后来发现GridSet配置错了，全白做工。

3.3 第三步：mapbox-gl.js前端多源加载实现

地图初始化时，把三个来源都配到style里，但要注意source的id和图层id不能重复，并且图层之间的上下顺序也要通过beforeId参数控制。

我最终项目的核心代码如下，这是可以直接抄作业的版本：

const map = new mapboxgl.Map({ container: 'map', center: [120.15, 30.28], zoom: 8, style: buildStyle(), attributionControl: false }); map.addControl(new mapboxgl.NavigationControl(), 'top-right'); function buildStyle() { return { version: 8, sources: { 'base-3857': { type: 'raster', tiles: [ 'https://your-gs/geoserver/gwc/service/wmts?layer=base3857&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}' ], tileSize: 256 }, 'wgs84-4326': { type: 'raster', tiles: [ 'https://your-gs/geoserver/gwc/service/wmts?layer=wgs84layer&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}' ], tileSize: 256, minzoom: 2, maxzoom: 18 }, 'cgcs2000-4490': { type: 'raster', tiles: [ 'https://your-gs/geoserver/gwc/service/wmts?layer=cgcslayer&tilematrixset=EPSG:4490&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}' ], tileSize: 256, bounds: [73.33, 3.51, 135.05, 53.56] // 中国范围 } }, layers: [ { id: 'base-layer', type: 'raster', source: 'base-3857' }, { id: 'wgs84-layer', type: 'raster', source: 'wgs84-4326', layout: { visibility: 'none' } }, { id: 'cgcs2000-layer', type: 'raster', source: 'cgcs2000-4490', layout: { visibility: 'none' } } ] }; }

多源加载的核心是layer的visibility切换。默认只显示3857的底图，等用户切换坐标系时，通过map.setLayoutProperty('wgs84-layer', 'visibility', 'visible')控制显示哪套服务。

在实际项目中，4326和4490这两套切片在可视化上确实非常接近，因为坐标系基准差异很小，前端视觉上几乎看不出差别。但它的意义在于数据合规和可量测性，如果你的业务是在系统里用专业工具做坐标标注、面积计算、范围对比，底图必须与业务坐标系一致，否则量测结果虽然看起来差不多，但矢量叠加的拓扑关系容易出错。

3.4 第四步：4490切换时坐标同步

如果你从3857切换到4490，需要同步把地图的中心点坐标做一个转换，否则视角会跳走。

用proj4库来做：

npm install proj4 @types/proj4

import proj4 from 'proj4'; // 定义CGCS2000地理坐标系与WGS84地理坐标系，在多数应用中可直接互转 proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs'); proj4.defs('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs +type=crs'); function switchTo4490(center3857) { const [lon, lat] = proj4('EPSG:3857', 'EPSG:4490', center3857); map.jumpTo({ center: [lon, lat], zoom: map.getZoom() }); map.setLayoutProperty('cgcs2000-layer', 'visibility', 'visible'); map.setLayoutProperty('base-layer', 'visibility', 'none'); }

这里用了proj4来在3857米制坐标和4490经纬度坐标之间互转。实际调用中，因为3857坐标本身就是从4326投影而来的，而你转到的4490长得很像4326，所以数值上差异非常小。但不可省略这步，因为这是给后续绘图控件里矢量要素的拓扑叠加用的，涉及到要素坐标系与底图坐标系的一致性。

这里我踩过一个坑：如果直接用4326转4490，不经过3857，在jumpTo的中心点坐标上不会有明显差异，但一旦你加载了矢量要素图层（比如从GeoServer的WFS服务拉取图形），要素的坐标与底图坐标不一致，图上会看到线和面全部偏移了几米到几十米，非常明显。

4. 绘图控件：基于Mapbox GL Draw的标绘能力开发

4.1 选型对比：为什么用Mapbox Draw插件

mapbox-gl.js生态里，最简单的绘图能力可以直接调用mapbox-gl-draw插件，官方维护，API稳定，支持绘制点、线、面、圆，还支持拖拽编辑、删除。这里要提到另一个选择是terra-draw，它是新出的现代版绘图库，在地图编辑能力上更强，但因为项目技术栈较老、地图版本固定，我选了兼容性最稳的@mapbox/mapbox-gl-draw。

用npm安装：

npm install @mapbox/mapbox-gl-draw

初始化时直接new一个Draw实例，然后挂到map上：

import MapboxDraw from '@mapbox/mapbox-gl-draw'; import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'; const draw = new MapboxDraw({ displayControlsDefault: false, controls: { point: true, line_string: true, polygon: true, trash: true }, defaultMode: 'simple_select', styles: [ // 自定义样式可以在这里配，默认样式其实就能用 ] }); map.addControl(draw, 'top-left');

这个插件渲染出来的图形要素，默认的GeoJSON坐标是以4326经纬度存储的。如果你需要把图形导出成4490坐标系，需要拿到draw.getAll()的结果，然后遍历坐标做一次转换：

const geojson = draw.getAll(); const converted = transformCoords(geojson, 'EPSG:4326', 'EPSG:4490'); function transformCoords(geojson, fromCrs, toCrs) { const clone = JSON.parse(JSON.stringify(geojson)); for (const feature of clone.features) { if (feature.geometry.type === 'Point') { feature.geometry.coordinates = proj4(fromCrs, toCrs, feature.geometry.coordinates); } else if (feature.geometry.type === 'LineString') { feature.geometry.coordinates = feature.geometry.coordinates.map(c => proj4(fromCrs, toCrs, c)); } else if (feature.geometry.type === 'Polygon') { feature.geometry.coordinates = feature.geometry.coordinates.map(ring => ring.map(c => proj4(fromCrs, toCrs, c))); } } return clone; }

4.2 绘图坐标拾取与量测工具

很多时候光绘制还不够，业务里需要你点击地图就能拾取某个位置的坐标值。我用了一个简单方案，在地图click事件里实时输出当前鼠标位置的经纬度以及投影坐标值：

map.on('click', (e) => { const lngLat = e.lngLat; // 4326 const [x, y] = proj4('EPSG:4326', 'EPSG:3857', [lngLat.lng, lngLat.lat]); console.log('WGS84 经纬度:', lngLat.lng, lngLat.lat); console.log('Web墨卡托:', x, y); console.log('CGCS2000 经纬度:', proj4('EPSG:4326', 'EPSG:4490', [lngLat.lng, lngLat.lat])); });

注意，这里输出的4490坐标和4326坐标在数值上非常接近，因为CGCS2000和WGS84在大多数地区差值在0.1米以内。但作为业务功能，你仍然要在界面上区分显示的坐标系名称，避免业务人员误用。

绘图控件的核心交互逻辑里还需要处理一种情况：如果地图当前加载的是4490切片作为底图，而Draw插件画的图形坐标是4326存储的，图形和底图虽然视觉上几乎重叠，但在投影计算时可能会产生很小但存在的偏移。因此，如果业务对精度要求高（比如比对了边界是否压盖），建议统一把Draw插件输出的坐标转换成底图坐标系，再执行叠加分析。

4.3 Draw插件的常见交互坑

Draw插件有两个高频问题，我在项目里都碰到了。

一是绘制多边形时如果鼠标操作过快，会出现顶点交叉、自相交多边形，这在事后做面积量算时会产生负数面积。这个问题在热词里的"地理坐标系下图斑面积是负数"就说得上是同类问题。解决方案是在多边形绘制完成事件中做一次有效性校验，判断要素是否为简单多边形。

map.on('draw.create', (e) => { const feature = e.features[0]; if (feature.geometry.type === 'Polygon') { const coords = feature.geometry.coordinates[0]; if (coords.length < 4) { draw.delete(feature.id); alert('多边形顶点数过少，请重新绘制'); } } });

二是当鼠标在地图上拖动时，Draw插件和地图拖拽事件有冲突。官方提供了dragPan控制方案：在draw.modechange事件中判断当前模式，如果是draw_polygon等绘图模式，就禁用地图平移：

map.on('draw.modechange', (e) => { if (['draw_polygon', 'draw_line_string', 'draw_point'].includes(e.mode)) { map.dragPan.disable(); } else { map.dragPan.enable(); } });

这里用dragPan.disable()而不是map.dragPan = false，因为API接口要求调用方法。如果你写错了，控制台会报map.dragPan is not a function，排查要花不少时间。

5. 常见问题与排查技巧实录

5.1 瓦片加载不出或错位

这是最常见的故障。瓦片404、瓦片灰底、瓦片拼接错位，原因很多。我按排查优先级列一下：

先确认请求URL的TileMatrixSet跟GeoServer端发布的GridSet名称一致。GeoServer的预置集合一般是EPSG:900913（旧版）或EPSG:3857（新版），如果你图层发布的GridSet是EPSG:900913，但前端请求写的EPSG:3857，后端可能返回错误或空瓦片。

再确认TileMatrix和TileCol、TileRow的传参名称。WMTS 1.0.0标准要求必须是大写开头的驼峰字段，写成tilematrix小写的请求会被GeoServer拒绝。

还有一种情况：tileSize不匹配。GeoServer的GWC默认瓦片大小是256，但如果你在图层配置里设置过512（比如针对高分影像发布的瓦片集），前端需要把tileSize也改成512，否则地图上的瓦片会出现模糊、缩放级别缺失。

5.2 绘图控件画出的图形无法量测

出现面积是负数、长度是异常值，核心原因是坐标顺序或坐标环的方向问题。GeoJSON要求多边形外环的坐标顺序是逆时针，内环是顺时针（RFC 7946标准），但很多数据源生成的数据恰恰相反。Mapbox Draw本身生成的坐标顺序是对的，但如果你从其他系统导入GeoJSON并直接丢给Draw去显示，就可能出现环方向错误。

解决办法是用turf.js的rewind函数修正：

npm install @turf/turf

import { rewind } from '@turf/turf'; const fixed = rewind(geojson, { reverse: true });

另一个面积是负数的场景是，你在计算面积时用了笛卡尔坐标的shoelace公式，但没有在投影坐标系（如3857）上计算，而是直接在经纬度坐标上算，就会得到负数或极大极小值。必须先把坐标转成米制投影坐标系再算面积，或者用turf的area方法（turf内部会做投影换算）。

import { area } from '@turf/turf'; const polygon = draw.getAll().features[0]; const areaInSqm = area(polygon); // 返回平方米

5.3 坐标系切换后绘图要素偏移

这个问题最容易出现在"先画图，再切坐标系"的场景。你在3857底图上画了几个面要素，画完之后切换到4490底图，发现面要素和底图对不齐了。

原因在于Draw插件缓存的数据坐标是基于4326的，但底图切换后，视图的投影基准变了。虽然4326和4490的底图视觉上差异很小，但矢量图形绘制是基于屏幕点的，经过投影变换后，渲染位置有小数级别的偏差，在1:500的大比例尺下就会被放大成几米的偏移。

解决方案是矢量图形不依赖当前底图坐标系做渲染，而是统一转换成一个坐标系存储。我建议项目里所有矢量数据统一存4326（GeoJSON标准坐标），显示时不做任何转换，这样无论底图怎么切，矢量图形始终在同一位置。如果数据必须交付4490，最后导出时再统一转换，而不是显示时就转。

5.4 页面卡顿与性能优化

加载多个瓦片源时，如果同时三个源都是visible，地图渲染压力不小。我的经验是：

• 默认只打开一个底图，其他源保持visibility: 'none'，切换时再改visible。
• 在maxzoom上做约束，不要设置太高，全国性的影像数据到18级就够了，再往上瓦片数量指数增长，前端撑不住。
• 如果瓦片服务返回慢，可以考虑前端加一层缓存策略，用localStorage缓存已加载过的瓦片URL（注意有大小限制，适合小数据量）。

另外mapbox-gl.js的sources里每个raster源都会独立建立纹理缓存，三个源同时挂载会占用较多GPU内存。项目上线后我曾观察到一个情况：连续切换十几次坐标系后，地图开始闪烁、变白，这是纹理缓存溢出导致的问题。后来在切换函数里手动调用map.triggerRepaint()并清理不在用的源，问题就改善了。

function switchToMode(mode) { const layers = { '3857': ['base-layer'], '4326': ['wgs84-layer'], '4490': ['cgcs2000-layer'] }; Object.values(layers).flat().forEach(id => { map.setLayoutProperty(id, 'visibility', 'none'); }); layers[mode].forEach(id => { map.setLayoutProperty(id, 'visibility', 'visible'); }); map.triggerRepaint(); }

5.5 关于跨域请求

GeoServer的WMTS服务如果和前端部署在不同域名下，需要配置CORS。在tomcat的web.xml里加CORS过滤器是最常用的方案。如果不配置，浏览器控制台会报Blocked by CORS policy，地图上一张瓦片都load不出来。

GeoServer的WAR包里其实自带了一个CORS过滤器，很多安装包默认是注释掉的。我们在生产环境里踩过一次：开发环境一切正常，部署到测试服务器后发现所有瓦片请求都失败，就是因为在运维部署时重新解压了GeoServer的war包，CORS配置被重置了。排查方法很简单：直接浏览器打开一个瓦片URL看是否能正常返回图片，能返回说明后端服务正常，问题在网络层。

5.6 绘图控件的"选择"与"绘制"状态切换

Draw插件默认模式下，鼠标左键点击是选择要素，拖拽是平移。进入绘制模式后，如果用户想取消绘制，按Esc键可以退出，这个官方默认支持。但你在嵌入式场景（比如iframe里）使用时，键盘事件可能被外层页面拦截，导致Esc失效。这个场景下需要手动监听modechange事件，并在某个按钮上提供"取消绘制"的功能：

document.getElementById('cancel-draw-btn').addEventListener('click', () => { draw.changeMode('simple_select'); });

changeMode('simple_select')会立即退出所有绘制模式。这个API在官方文档里叫changeMode，是从v1.x开始就保留的稳定接口。

实操心得汇总

做完整套方案，我个人的体会是，坐标系永远是Web GIS里最绕不开的深水区。mapbox-gl.js本身是个优秀的地图引擎，但它的世界观默认就是Web墨卡托，遇到非3857体系的切片服务，不能硬碰，要顺着它的网格逻辑做事情。4490切片要跑到前端，最省事的路径其实是在服务端做一层坐标变换代理，或者用一个兼容层（比如maplibre-gl）替掉mapbox核心逻辑，但如果你像我一样被项目锁定在mapbox-gl.js v2.13.0上，那就在初始化、瓦片请求、坐标拾取、矢量导入导出这四层把坐标系精确控制好，同样能做出稳定的系统。

最后再分享一个小技巧：调试坐标系问题的时候，不要只看地图显示。地图显示会因为投影差异小而看起来一切正常，但真正暴露问题的是坐标拾取、量测结果、矢量叠加这类的功能。所以每次做一个阶段，随手点击地图输出一个点的坐标，再跟已知参考点比对，能帮你提前发现偏移，而不是等到用户验收时才暴露。

本文还有配套的精品资源，点击获取