在实际的 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 整体布局说明

布局说明如下

瓦片边界，主要用于学习瓦片的定义规范。

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

1.2 自定义配置

目前支持如下配置项

{
    "tileUrl": "https://meethigher.top/wkt/tile/{z}/{x}/{y}",
    "zoom": 9,
    "center": [121.47196532797757, 31.226770265161008],
    "minZoom": 0,
    "maxZoom": 42,
    "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：地图最大支持层级
constrainResolution：true 表示滑动时，只会停留在整数层级
smoothResolutionConstraint：true 表示拖动时，补充中间分辨率，显示会更丝滑
fillColor：样式初始的填充色
strokeColor：样式初始的边框色
mapInfinity：true 表示地图可以无限滑动，比如左右滑动可以无穷无尽
enableZoom：true 表示开启层级展示
enableVerify：true 表示开启空间几何校验
enableMeasure：true 表示开启测距（距离/面积）
defaultShape：初始化时绘制的图形，Point、LineString、Polygon 三种可选
defaultFormat：初始化时数据呈现的样式，WKT、GeoJSON 两种可选

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

名称	url
openstreetmap	https://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}

二、绘制

2.1 绘制点线面

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

2.2 绘制时撤销

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

三、编辑

2.1 选中/未选中

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

2.2 局部调整/撤销

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

2.3 局部删除/撤销

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

2.4 整体删除

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

四、样式

4.1 单例/多例

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

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

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

4.2 更换样式

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

五、测距

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

六、空间几何校验

示例 geojson

{
	"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
	}]
}

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

视角飞往错误点的逻辑，校验算法针对一些特殊情况会存在问题，只能做附近点的参考。
因此就有了错误点打印到控制台的兜底机制。

WKT/GeoJSON在线绘制展示工具