mapbox有特殊图案样式的线要素

有玉微凉，是为樱琅

已于 2024-01-15 17:48:31 修改

阅读量383

点赞数

分类专栏： mapbox+leaflet 文章标签： mapbox javascript vue

于 2023-06-02 09:55:24 首次发布

本文链接：https://blog.csdn.net/Sakura1998gis/article/details/131000860

版权

mapbox+leaflet 专栏收录该内容

62 篇文章 7 订阅

订阅专栏

贴个群号

WebGIS学习交流群461555818，欢迎大家。

成果图

在这里插入图片描述

实现

这种带图案的线要素，比如铁路，公路这种，都可以使用这种办法来实现
原理是利用mapbox的这个属性
在这里插入图片描述
中文翻译过来是这样

他要求图像要位于sprite雪碧图中，但是实际其实并不需要，也像symbol那样loadImage把图片提前引进去就可以了。如上面成果图展示的一样，其实就是利用这种图片请添加图片描述
放进线要素里面，然后无缝衔接就行了，拐角mapbox会自动给你处理好。
具体代码如下

let layer = {
            id: "dike",
            name:'堤防',
            source: "dike",
            'source-layer': "dike", 
            type:'line',
            icon:'./static/assets/dike.png',
            popup:true,
            messageBox:true,
            paint: {
                'line-opacity': 1,
                // 'line-color': 'rgba(255, 0, 0, 1)',
                'line-width':8,
                'line-pattern':'dike'
            },
            layout: {
                visibility: 'visible',
            },
        }

然后

    //处理一般的传统的OGC矢量切片服务   以图片拼接的线段
    handleOgcType(layer){
      const that =this
        if (!this.map.getSource(data.id)) {
          this.map.addSource(data.id, {
              type: 'vector', // 此处vector即为矢量瓦片的类型
              // scheme: "tms",
              'tiles': [
                  geoserverUrl+geoserverVectorTileHeaderMvt+data.id+geoserverVectorTileEndMvt
              ],
              tileSize: 512,
          })
          
        this.map.loadImage(data.icon,function(error,image) {
          if(error) throw error;
          if(!that.map.hasImage(data.id)){
            that.map.addImage(data.id,image);
          }
          if(!that.map.getLayer(data.id)){
            that.map.addLayer(data)
          }
        })
        }
    },