mapBox 绘制多边形无法设置边框宽度解决方法

最新推荐文章于 2024-06-17 23:49:16 发布

琹箐

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量964

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_45327886/article/details/131703622

版权

一、问题

二、解决方法

三、总结

tips:如嫌繁琐，直接看有颜色的文字即可！

一、问题

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 提供的api
            that.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-width
    addMark_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不支持(会影响渲染速度）