maptalks-根据后端返回的坐标(WKT格式)在地图上绘制图斑

1.示图

2.相关代码

在地图框架已经搭好的前提下(即this.map已存在)，加入如下代码即可：

import * as maptalks from "@/utils/maptalks-gl.js"
import { toGeoJson } from '@/utils/WTK.js'drawMap(){// 'SuspectInfoLayer'名称可自定义let suspectedData = this.map.getLayer('SuspectInfoLayer')// 清除之前的if (suspectedData) {suspectedData.clear()}// result是后端返回的数据，渲染到地图let result =["MULTIPOLYGON(((118.65628670754822 39.16144473894723,118.6562598262921 39.16020820116729,118.65717378899902 39.160235082423405,118.65712002648682 39.161471620203265,118.65628670754822 39.16139097643503,118.65628670754822 39.16144473894723)))"]if (result && result.length) {if (!suspectedData) {suspectedData = new maptalks.VectorLayer('SuspectInfoLayer').addTo(this.map)}// 绘制geometrylet geometryList = result.map(item => {let geo = toGeoJson(item)let geometry = maptalks.GeoJSON.toGeometry(geo)// 图斑样式geometry.setSymbol({'lineColor': '#ef4816','lineWidth': 2,'polygonFill': '#ef4816','polygonOpacity': 0.3})return geometry})geometryList.forEach(item => {item.addTo(suspectedData)})}
}

utils/WTK.js

import {geojsonToWKT,wktToGeoJSON }from '@terraformer/wkt'export function toWKT(geometry){let geojson = geometry.toGeoJSONGeometry()let wtk=geojsonToWKT(geojson)return wtk
}export function toGeoJson(WtK){let geojson = wktToGeoJSON(WtK)return geojson
}

3.地图相关实例参考文档

https://maptalks.org/examples/cn/map/load/#map_loadhttps://maptalks.org/examples/cn/map/load/#map_loadhttp://examples.maptalks.com/examples/cn/basichttp://examples.maptalks.com/examples/cn/basic