言成言成啊 | Kit Chen's Blog

WKT/GeoJSON在线绘制展示工具 | 可视化地图瓦片边界

发布于2025-09-14 01:34:06,更新于2025-09-21 02:27:44,标签:js gis map  文章会持续修订,转载请注明来源地址:https://meethigher.top/blog

一、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 整体布局说明

布局说明如下

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

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

1.1.2 自定义配置

目前支持如下配置项

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 进行修改。

参数说明

  • 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 测距

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

1.6 空间几何校验

示例 geojson

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 的配置项。

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

二、可视化地图瓦片边界

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

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

整体布局如下

发布:2025-09-14 01:34:06
修改:2025-09-21 02:27:44
链接:https://meethigher.top/blog/2025/wkt-shower/
标签:js gis map 
付款码 打赏 分享
Shift+Ctrl+1 可控制工具栏