mapbox 地图开发遇见问题 图层未清理

        comentAddLayer(item, map = 'map') {
            this[map].addSource(item.raster_id, {
                type: 'raster',
                tileSize: 256,
                bounds: item.extent_raster,
                tiles: [`${item.raster_id_url}/{z}/{x}/{y}.png`]
            })
            this[map].addLayer({
                id: `${item.raster_id}_raster`, //每个图层的id 是唯一
                type: 'raster',
                source: item.raster_id, //保持与addSource中参一一致
                paint: {}
            })

            this[map].addSource(item.vector_id1, {
                type: 'vector',
                tiles: [`${item.vector_id1_url}/{z}/{x}/{y}.mvt`]
            })
            this[map].addLayer({
                id: `${item.vector_id1}_fill`, //每个图层的id 是唯一
                type: 'fill', //面
                source: item.vector_id1, //保持与addSource中参一一致
                'source-layer': 'layer0',
                paint: {
                    'fill-color': '#0080ff',
                    'fill-opacity': 0.4
                }
            })
            this[map].addLayer({
                id: `${item.vector_id1}_line`,
                type: 'line', //线
                source: item.vector_id1,
                'source-layer': 'layer0',
                paint: {
                    'line-color': '#0080ff',
                    'line-width': 2
                }
            })
            const [x1, y1, x2, y2] = item.extent_vector
            const bounds = [
                [x1, y1],
                [x2, y2]
            ]
            this[map].fitBounds(bounds, { linear: true })
        },

解决办法：

在加载图层之前，清除全部图层源及图层ID

 clearAllLayer(para = 'map') {
            if (!this[para]) return
            const { layers, sources } = this[para].getStyle()
            layers.forEach(layer => {
                if (this[para].getLayer(layer.id)) this[para].removeLayer(layer.id)
            })
            for (const key in sources) {
                if (Object.prototype.hasOwnProperty.call(sources, key)) this[para].removeSource(key)
            }
        },

注：添加时先添加源（addSource），再添加图层(addLayer)，清除时，先清理图层(removeLayer)，在清理源(removeSource)