vue3+mapbox

下载 

npm i mapbox-gl

直接上代码

<script lang="tsx">
import { defineComponent, onMounted, ref, inject } from "vue";
import type { Map, Style } from "mapbox-gl";
import mapbox from "mapbox-gl";

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// import MapboxLanguage from '@mapbox/mapbox-gl-language'; 
mapbox.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN"
const gaode: Style = {
    version: 8,
    sources: {
        "raster-annotation": {
            type: "raster",
            tiles: ["http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"],
            tileSize: 256
        },
        // "source": {
        //     type: "geojson",
        //     data: "https://geo.datav.aliyun.com/areas_v3/bound/210000_full.json"
        // },
        // "image-source": {
        //     type: "image",
        //     url: 'https://img2.baidu.com/it/u=3880877693,3055552033&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1721322000&t=db28eb3e08018cc0a9092e9b7b3c2a1b',
        //     coordinates: [[121.38, 42.31], [121.38, 42.31], [121.38, 42.31], [121.38, 42.31],] // 图片在地图上的位置，使用经纬度
        // }
        // "mapsource": {
        //     type: "raster",
        //     tiles: ["http://webst04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}"],
        //     tileSize: 256
        // },

    },
    layers: [
        // {
        //     id: "source",
        //     type: "fill",
        //     source: "source",
        //     minzoom: 0,
        //     maxzoom: 17,
        //     filter: ['==', 'name', '沈阳市'],
        //     paint: {
        //         //填充颜色
        //         'fill-color': 'rgb(255, 0, 55)',
        //         //透明度设置
        //         'fill-opacity': 1,
        //         'fill-outline-color': 'rgb(0, 153, 255)',
        //         'fill-antialias': true
        //     }
        // },
        // {
        //     id: 'image-layer',
        //     type: 'raster',
        //     source: 'image-source',
        //     paint: {
        //         'raster-opacity': 0.5 // 设置图片的透明度
        //     }
        // },
        // {
        //     id: "mapsource",
        //     type: "raster",
        //     source: "mapsource",
        //     minzoom: 0,
        //     maxzoom: 22
        // },
        {
            id: "simple-annotation",
            type: "raster",
            source: "raster-annotation",
            minzoom: 0,
            maxzoom: 22
        }
    ]
};

export default defineComponent(() => {
    const mapRef = ref<HTMLElement | null>(null);
    onMounted(() => {
        const container = mapRef.value as HTMLElement;

        if (!container) {
            throw new Error("mapRef cant found.");
        }
        const map = new mapbox.Map({
            container,
            style: gaode,
            center: [121.38, 42.31],
            zoom: 5, //缩放等级
            pitch: 0, // 相对于地面3D视角的角度
            bearing: 3, // 东西南北 方向，正北方为 0
            projection: 'globe', // 为 3D 地球
            antialias: false, //抗锯齿，通过false关闭提升性能
            renderWorldCopies: false, //可理解为loop，在projection: 'globe'时无效
        });
        // ### 标签汉化
        // map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
        // ### 添加导航控制条
        map.addControl(new mapboxgl.NavigationControl(), 'top-left');
        map.on('style.load', () => {
            console.log('hfhfhfhfhfh')
            map._logoControl && map.removeControl(map._logoControl); //去除mapbox logo
            map.addSource('source', {
                type: 'geojson',
                data: "https://geo.datav.aliyun.com/areas_v3/bound/210000_full.json"
            })
            map.addLayer(
                {
                    id: "source",
                    type: "fill",
                    source: "source",
                    minzoom: 0,
                    maxzoom: 17,
                    filter: ['!=', 'name', '沈阳市'],
                    paint: {
                        //填充颜色
                        'fill-color': 'rgb(255, 0, 55)',
                        //透明度设置
                        'fill-opacity': 1,
                        'fill-outline-color': 'rgb(0, 153, 255)',
                        'fill-antialias': true
                    }

                })
        })
        console.log(map)

    });

    return () => <div ref={mapRef} class="map" />
});
</script>

<style lang="scss" scoped>
.map {
    width: 1000px;
    height: 700px;
}
</style>