摘要

在实际的 GIS 开发时，经常会遇到一些需要可视化的情况。但是又没有一个特别轻量、支持随意迁移、兼容老版浏览器的工具。在 2022 年时，我简单写了一款工具，挂在互联网上，主要用于自己使用。结合我现在的实际经验，我又对该工具进行了二次迭代，添加了很多功能。

正文

一、WKT/GeoJSON在线绘制展示工具

在实际的 GIS 开发时，经常会遇到一些需要可视化的情况。但是又没有一个特别轻量、支持随意迁移、兼容老版浏览器的工具。在 2022 年时，我简单写了一款工具wkt在线绘制展示_EPSG4326，挂在互联网上，主要用于自己使用。

分析近几年的流量时，发现还不少，甚至像美团、华科大、同济大学这样频出大佬的单位也在用。

我这个专职后端的业余前端内心暗喜，之前写得真是一坨屎，没想到还不少人用，可能这就是工具自身的魅力吧

综上，结合我现在的实际经验，我又对该工具进行了二次迭代，添加了很多功能。在线预览WKT/GeoJSON 在线绘制、转换与预览工具 | EPSG:4326

功能不多，但主打一个开箱即用，随意迁移。目前支持的功能清单如下

  • 支持响应式布局，对小屏友好 ✅
  • 支持 Chrome 83 版本及以上 ✅
  • 支持 OpenLayers 基础的地图交互(平滑缩放、拖动平移等) ✅
  • 支持绘制(点/线/面) ✅
  • 支持编辑(选中图层，进行局部调整、局部删除、整体删除) ✅
  • 支持绘制时撤销(Ctrl+Z) ✅
  • 支持编辑时撤销(Ctrl+Z) ✅
  • 支持空间几何校验以及跟踪错误点视角，方便人为修复错误几何 ✅
  • 支持 WKT/GeoJSON 互相转换 ✅
  • 支持全量渲染 WKT/GeoJSON ✅
  • 支持增量渲染 WKT/GeoJSON ✅
  • 支持控制台实时同步图层的 WKT/GeoJSON ✅
  • 支持增量随机样式渲染 ✅
  • 支持样式的单例与多例模式渲染。单例模式是指相同样式共用同一个样式实例，提高地图渲染性能。✅
  • 支持选中图层修改样式，在多例样式下，可以精确调整某个图层样式 ✅
  • 支持选中图层进行测量（测量距离或面积）✅
  • 支持用户自定义栅格地图地址 ✅
  • 用户初次访问，提示阅读文档 ✅

1.1 介绍

1.1.1 整体布局说明

布局说明如下

image-20250915011256708.jpg

瓦片边界，主要用于学习瓦片的定义规范。后面的章节会单独说明一下。

image-20250915012700769.jpg

geojson.io，这个应该都用过。

image-20250915012835713.jpg

1.1.2 自定义配置

目前支持如下配置项

json 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
    "tileUrl": "https://meethigher.top/wkt/tile/{z}/{x}/{y}",
    "zoom": 9,
    "center": [121.47196532797757, 31.226770265161008],
    "minZoom": 0,
    "maxZoom": 42,
    "errorPointZoom": 22,
    "constrainResolution": true,
    "smoothResolutionConstraint": true,
    "fillColor": "#6AC495",
    "strokeColor": "#6AC495",
    "mapInfinity": true,
    "enableZoom": true,
    "enableVerify": true,
    "enableMeasure": true,
    "defaultShape": "Polygon",
    "defaultFormat": "WKT"
}

可直接在浏览器 F12 - Application - Local Storage - config 进行修改。

image-20250915004233411.jpg

参数说明

  • tileUrl：栅格地图地址。要求 XYZ 格式 url
  • zoom：初始化定位的层级
  • center：初始化定位的中心点
  • minZoom：地图最小支持层级
  • maxZoom：地图最大支持层级
  • errorPointZoom：错误点定位层级
  • constrainResolution：true 表示滑动时，只会停留在整数层级
  • smoothResolutionConstraint：true 表示拖动时，补充中间分辨率，显示会更丝滑
  • fillColor：样式初始的填充色
  • strokeColor：样式初始的边框色
  • mapInfinity：true 表示地图可以无限滑动，比如左右滑动可以无穷无尽
  • enableZoom：true 表示开启层级展示
  • enableVerify：true 表示开启空间几何校验
  • enableMeasure：true 表示开启测距（距离/面积）
  • defaultShape：初始化时绘制的图形，Point、LineString、Polygon 三种可选
  • defaultFormat：初始化时数据呈现的样式，WKT、GeoJSON 两种可选

tileUrl 目前互联网有很多可用的，网上也可以搜到。整理如下

名称url
openstreetmaphttps://tile.openstreetmap.org/{z}/{x}/{y}.png
ArcGIS影像https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
ArcGIS街道https://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png
高德地图https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}
高德地图高亮https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
高德地图影像https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
高德地图路网https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}

1.1.3 基础地图操作

鼠标左键拖动：平移地图

鼠标左键双击：以点击位置为中心升一级

滚轮向前：放大

滚轮向后：缩小

Shift + 鼠标左键：放大到框选矩形的范围

Shift + 鼠标左键（绘制模式下）：自由绘制几何图形

Alt + Shift + 鼠标左键拖动：旋转地图

1.2 绘制

1.2.1 绘制点线面

进入绘制模式，选择 Point/LineString/Polygon 三者之一。鼠标左键选点，鼠标左键双击结束。

1.2.2 绘制时撤销

在绘制状态时，按 ctrl+z 可撤销上一个点，内部栈最大支持 50 个操作记录。

1.3 编辑

1.3.1 选中/未选中

进入编辑模式，在存在图层的地方，鼠标左键单击，即可选中图层；在不存在图层的地方，鼠标左键单击，即可退出图层。

1.3.2 局部调整/撤销

进入编辑模式，选中图层，选择边缘线或者点，鼠标长按拖拽、松开结束。按 ctrl+z 可撤销上一个点，内部栈最大支持 50 个操作记录。

1.3.3 局部删除/撤销

进入编辑模式，选中图层，选择点，alt+鼠标左键，可删除点。按 ctrl+z 可撤销上一个点，内部栈最大支持 50 个操作记录。

1.3.4 整体删除

进入编辑模式，选中图层，按 delete 键，可整体删除。

1.4 样式

1.4.1 单例/多例

样式的单例模式，是指所有相同的样式，均为同一个实例，该实例一旦修改，共用同一个实例的图层样式都会发生改变。样式的单例模式可提高地图性能。

样式的多例模式，是指所有样式，均为单一实例。该模式在数据量大时，严重影响地图性能。

将数据上图时，需要将不同区域使用不同的颜色标注起来，这时候就需要切换到样式的多例模式。

1.4.2 更换样式

进入编辑模式，选中图层，点击颜色按钮，退出选中，图层样式即可发生变化。

1.5 测距

进入编辑模式，选中图层，左小角即可展示距离或者面积。

image-20250915014715712.png

1.6 空间几何校验

示例 geojson

json 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              121.94227600353808,
              30.909098106210322
            ],
            [
              121.933058795194,
              30.907162765860804
            ],
            [
              121.92727351966461,
              30.89984178367014
            ],
            [
              121.92938171553085,
              30.8892379878813
            ],
            [
              121.93944312181141,
              30.885253381469028
            ],
            [
              121.93944312055953,
              30.885253381542896
            ],
            [
              121.95115002305191,
              30.8878913907529
            ],
            [
              121.95531737808331,
              30.89677016934631
            ],
            [
              121.95070877129291,
              30.90648959570555
            ],
            [
              121.94227600353808,
              30.909098106210322
            ]
          ]
        ]
      },
      "properties": null
    }
  ]
}

进入编辑模式，选中图层，选择左上角校验按钮。会将错误点打印到控制台，并将视角飞往错误点处。

视角飞往错误点时，其实还要考虑层级的问题，如果太大就看不到图层轮廓，太小又定位不到问题点，因此单独加了一个 errorPointZoom 的配置项。

并将错误日志打印到控制台，作为排错的兜底机制。

2025-09-15_020435.jpg

二、可视化地图瓦片边界

之前在地图开发时，有一些原理不明白。就比如地图是如何加载的，这其中的原理在我之前的博客中记录过，可参考瓦片边界可视化工具 - 言成言成啊

为了进一步加深对其的理解，我当时特意写了初版 demo 用于学习该内容。本次结合自己中使用到的场景，对该工具也进行了迭代，在线预览可视化地图瓦片边界 | 经纬度转瓦片XYZ·XYZ定位Polygon

整体布局如下

image-20250921022237115.jpg