vue2 + mapbox 加载高德矢量地图. 并进行区域反遮照 CV可用

需求：加载高德矢量地图，根据区域编码查询区域边界,进行反遮照 并 自动定位至可视窗口的中间.

效果：

版本：vue2.x、mapbox-gl 3.4.0、@mapbox/mapbox-gl-language 1.0.1、turf 3.0.14

---

实现过程

// 老规矩 先装依赖
yarn add mapbox-gl@3.4.0
yarn add @mapbox/mapbox-gl-language
yarn add turf

<template>
    <div class="map_box">
        <div ref="map" class="map" id="map"></div>
    </div>
</template>

<script>
import maxboxMap from '@/utils/futureMap/futureMap.js'

export default {
    components: {},
    data() {
        return {
            map: null,
        }
    },
    methods: {
        handleInitMap() {
            let map = new maxboxMap({
                element: 'map',
                areaCode: 110000, // 北京的areaCode 区域反遮照要用. 可以根据需求进行替换
            })
        },
    },
    watch: {},

    mounted() {
        this.handleInitMap()
    },
}
</script>

// mapboxgl地图
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import turf from 'turf'
// mapboxgl汉化
import MapboxLanguage from '@mapbox/mapbox-gl-language'

// 坐标系转化

const accessToken = '这个得自己申请一个'
// 地图操作 
class MapOperation {
    constructor(option) {
        this.line = null
        this.edit = null
        this.map = null
        this.element = option.element
        this.areaCode = option.areaCode
        this.initialize()
    }
    //初始化
    initialize() {
        mapboxgl.accessToken = accessToken
        this.map = new mapboxgl.Map({
            container: 'map',
            style: {
              version: 8,
              sources: {
                  'raster-tiles': {
                      type: 'raster',
                      tiles: [
                          // wprd0{1-4}
                          // scl=1&style=7 为矢量图（含路网和注记）
                          // scl=2&style=7 为矢量图（含路网但不含注记）
                          // scl=1&style=6 为影像底图（不含路网，不含注记）
                          // scl=2&style=6 为影像底图（不含路网、不含注记）
                          // scl=1&style=8 为影像路图（含路网，含注记）
                          // scl=2&style=8 为影像路网（含路网，不含注记）
                          'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7',
                      ],
                      tileSize: 256,
                  },
              },
              layers: [
                  {
                      id: 'simple-tiles',
                      type: 'raster',
                      source: 'raster-tiles',
                      minzoom: 0,
                      // "maxzoom": 18
                  },
              ],
            },
            // ...start,
            pitch: 0,
            bearing: 0,
            center: [116.405285, 39.904989],
            projection: 'globe', // 为 3D 地球
            antialias: false, //抗锯齿，通过false关闭提升性能
            maxZoom: 17,
            minZoom: 3,
        })
        //设置中文
        this.map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }))
        //添加导航控制条
        this.map.addControl(new mapboxgl.NavigationControl(), 'top-left')
        this.map.on('style.load', () => {
            // 飞往地点
            // this.flyTo(end, 12000)
        })
        this.map.on('load', () => {
            // 添加areaCode以外的遮照层
            this.handleAddMask()
        })
        this.map.on('click', e => {
         
        });

    }
    // 添加areaCode以外的遮照层 
    handleAddMask() {
        if (!this.areaCode) {
            return false
        }

        $.ajax({
            type: 'get',
            url: `https://geo.datav.aliyun.com/areas_v3/bound/${this.areaCode}.json`,
            success: res => {
                const bounds = res.features[0]
                const map = this.map
                // Zoom to the zoom level 8 with an animated transition
                console.log()
                const bbox = turf.bbox(res)
                // 调整地图视图到指定边界
                map.fitBounds(bbox, {
                    padding: 20, // 地图边界的内边距，单位为像素
                    // maxZoom: 12, // 地图视图的最大缩放级别
                    duration: 5000, // 动画持续时间，单位为毫秒
                })
                map.addLayer({
                    //蒙版边界
                    id: 'mb-line',
                    type: 'line',
                    source: {
                        type: 'geojson',
                        data: bounds, //区划的面数据
                    },
                    paint: {
                        'line-color': 'rgba(100, 149, 237, 0.6)',
                        'line-width': 1,
                    },
                    layout: {
                        visibility: 'visible',
                    },
                })

                map.addLayer({
                    //蒙版图层   //通过边界数据反选 达到挖洞效果
                    id: 'mb-tag',
                    type: 'fill',
                    source: {
                        type: 'geojson',
                        data: {
                            type: 'Feature',
                            geometry: {
                                type: 'Polygon',
                                coordinates: [
                                    [
                                        // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                                        [-180, 90],
                                        [180, 90],
                                        [180, -90],
                                        [-180, -90],
                                    ],
                                    bounds.geometry.coordinates[0][0],
                                ],
                            },
                        },
                    },
                    paint: {
                        'fill-color': 'rgba(40,59,92, 0.52)',
                        // 'fill-opacity': 1 /* 透明度 */,
                    },
                    layout: {
                        visibility: 'visible',
                    },
                })
            },
        })
    }
}
class Programmer extends MapOperation {
    constructor(option) {
        super(option); // 调用父类的构造函数
        this.sdMap ={
            map:this.map,
            createMarker:this.createMarker
        }
        this.meatureTool = null

    }
}
class maxboxMap extends Programmer {
    constructor(option) {
        super(option); // 调用父类的构造函数
    }
}


export default maxboxMap