一、问题

1.使用mapBox在地图上绘制点、线、面。绘制多边形的时候发现直接用 zh(一家提供地图引擎的公司),提供的绘制多边形的方法无法设置边框颜色和边框宽度。很是离谱，按道理这种简单css就能实现的东西，为什么他们不能实现呢？况且fengMap是可以实现的。

二、解决方法

1.mapbox-gl-draw:下载链接https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js

2.方法一：绘制完多边形后，再在多边形外面绘制一条闭合的线段。于是写了如下的代码：

1）代码如下：


//线覆盖物基础参数
export const LineCoverConfig = {id: 'line',type: 'line',source: 'lineSource',paint: {'line-color': '#28e990','line-width': 9,}
}//多边形覆盖物样式
export const PolygonStyle = {color: '#ff5c2e',opacity: 0.5,height: 1,}
//2)外边线样式(无法优化)
export const PolygonLineStyle = {id: 'polygonLine',type: 'line',source: 'polygonLineSource',paint: {'line-color': '#ff5c2e','line-width': 2}
}      //根据坐标点添加线覆盖物 config:线覆盖物配置项addMark_line(pointArr, config, dataInfo) {const that = Locpard.instance;if (that && that.map) {let linePoint = []let option = Object.assign({}, LineCoverConfig, config);console.log("addMark_line", option, option.source, config)if (Array.isArray(pointArr)) {pointArr.forEach((element) => {linePoint.push([element.y, element.x])})option.floor = pointArr[0]?.floor;}// that.map.drawLine( dataInfo.id, linePoint, option);this.drawLine(linePoint, option, dataInfo)const lineMarker = {id: option.id,source: option.source,type: 'layerLine'}return lineMarker;}}// 根据点集绘制 线段drawLine(pointArr, option, dataInfo) {const that = Locpard.instance;if (that) {that.map.map.addSource(option.source, {type: 'geojson',data: {type: 'Feature',properties: {data: dataInfo},geometry: {type: 'LineString',coordinates: pointArr,}}})that.map.map.addLayer(option)}}// 添加多边形addMark_polygon(option, dataInfo) {const that = Locpard.instance;if (that && that.map) {let pointArr = option.points.map((element) => {return [element.y, element.x]})let config = Object.assign({}, PolygonStyle, { ...option, floor: option.level })console.log("points", pointArr)let markerId = dataInfo.id.toString()//使用 zh 提供的apithat.map.drawPolygon(markerId, pointArr, config)//手动 添加外边框that.addMark_line(option.points, { ...PolygonLineStyle, id: markerId, source: markerId }, dataInfo)return {id: markerId,source: markerId,type: "polygon"}}}

2）效果如下：

3.方法二：总感觉方法一有问题，一次性渲染难道不是更好吗？为什么要去渲染两个图层，于是去mapBox找到绘制多边形的api，自己封装了一个绘制多边形的方法。

1）代码如下：

//多边形覆盖物样式
export const PolygonStyle_2={id:'polygon',type:'fill',source:'polygonSource',layout:{},paint:{'fill-color':'#ff5c2e','fill-opacity':0.5,'fill-outline-color':'#ff5c2e',}
}// can't set border-widthaddMark_polygon(option, dataInfo) {const that = Locpard.instance;if (that && that.map) {let pointArr = option.points.map((element) => {return [element.y, element.x]})option=Object.assign({},PolygonStyle_2,option)//that.map是 zh 封装的地图对象; that.map.map是 mapBox封装的地图对象that.map.map.addSource(option.source,{type:'geojson',data:{type:'Feature',geometry:{type:'Polygon',coordinates:[pointArr]}}})that.map.map.addLayer(option)return {id:dataInfo.id.toString(),soureId:option.source,type: "polygon"}}}

2）效果如下：虽然可以用fill-outline-color加边框了，仔细看一下可以看到边框的，但是不能设置边框的宽度。

尝试了 fill-outline-width，报错了，没有这个属性。去搜了一下gitHub上说：没有提供设置边框宽度的属性，因为WebGL不支持(会影响渲染速度）