mapbox展示symbol点图层

symbol图层，一般会有一个图片来代替这个点，而这个图片不支持相对路径，只支持绝对路径，所以一般很多人会直接引用服务器上的绝对路径。
但是其实也是可以支持相对路径的，只不过图片只能放在static下面，只有这个路径下的图片，才可以直接调用。
源数据可以是我的这种矢量切片的，也可以是geojson的，只要是点的都可以
添加source之后，和一般的图层加载方式不一样的是，这个需要loadimage一下图标，再加载图层

    const data = {
            id: "school",
            name:'学校',
            source: "school",
            'source-layer': "school", 
            type:'symbol',
            icon:'./static/assets/school.png',
            paint: {
            },
            layout: {
                visibility: 'visible',
                'icon-image':'school',
                'icon-size':1,
            },
        },  

	//处理图标形式的矢量切片服务
      handleSymbolType(data){
        let that=this;
        if (!this.map.getSource(data.id)) {
          this.map.addSource(data.id, {
            type: 'vector', // 此处vector即为矢量瓦片的类型
            scheme: "tms",
            'tiles': [
                '你的地址'
            ],
          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);
          }
          that.map.addLayer(data)
        })
      },

加载图片的方式用下面的办法也是可以的

         const videoPNG = new Image(20, 20)
         videoPNG.crossOrigin = ''
         videoPNG.src = data.icon
         videoPNG.onload =  function() {
          if(!that.map.hasImage(data.id)){
            that.map.addImage(data.id,videoPNG);
           }
          that.map.addLayer(data)
        /

贴个群号

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