vue2使用mapbox

volodyan

已于 2024-01-26 13:48:09 修改

阅读量933

点赞数 6

分类专栏： Mapbox 文章标签： javascript vue.js

于 2024-01-18 15:33:18 首次发布

本文链接：https://blog.csdn.net/qq_37312180/article/details/135674868

版权

Mapbox 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.安装mapbox

这里安装的是"mapbox-gl": "^3.0.1",

npm install --save mapbox-gl

安装mapbox

2.安装worker-loader

npm install worker-loader --save-dev

安装worker-loader

配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)            // 文件名必须要xxx.worker.js
      .use('worker')
      .loader('worker-loader')
  }
})

3.引入mapbox和worker-loader

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import MapboxWorker from "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"; // Load worker code separately with worker-loader
mapboxgl.workerClass = MapboxWorker; // Wire up loaded worker to be used instead of the default

4.测试完整代码

<template>
  <div class="HomeViewPage">
    <div ref="MyMapContainer" id="MyMapContainer"></div>
    <div class="Selectbox">
      <el-select
        v-model="SelectValue"
        placeholder="请选择"
        @change="ChangeMapType"
      >
        <el-option
          v-for="item in MapList"
          :key="item.layerId"
          :label="item.name"
          :value="item.layerId"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import MapboxWorker from "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"; // Load worker code separately with worker-loader
mapboxgl.workerClass = MapboxWorker; // Wire up loaded worker to be used instead of the default
export default {
  name: "HomeViewPage",
  components: {},
  data() {
    return {
      MapList: [
        { name: "高德地图 卫星影像", layerId: "gd-satellite" },
        { name: "高德地图 矢量地图", layerId: "gd-vector" },
        { name: "天地图 矢量注记", layerId: "tian-cvaw" },
        { name: "天地图 影像注记", layerId: "tian-ciaw" },
        { name: "天地图 卫星影像", layerId: "tian-satellite" },
        { name: "天地图 矢量地图", layerId: "tian-vector" },
        ///
        { name: "天地图 地形晕渲", layerId: "tian-terw" },
        { name: "天地图 地形注记", layerId: "tian-ctaw" },
        { name: "天地图 全球境界", layerId: "tian-ibow" },
        // { name: "天地图 矢量英文注记", layerId: "tian-evaw" },
        // { name: "天地图 影像英文注记", layerId: "tian-eiaw" },
        ///
        { name: "bingmap 卫星影像", layerId: "bing-satellite" },
        { name: "bingmap 矢量地图", layerId: "bing-vector" },
        { name: "mapbox 卫星影像", layerId: "mapbox-satellite" },
      ],
      SelectValue: "gd-satellite",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.InitMap();
    });
  },
  methods: {
    InitMap() {
      const map = new mapboxgl.Map({
        container: this.$refs.MyMapContainer,
        style: {
          version: 8,
          sources: {
            "gd-satellite": {
              type: "raster",
              tiles: [
                // 高德地图 卫星影像
                "http://wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6",
              ],
              tileSize: 256,
            },
            "gd-vector": {
              type: "raster",
              tiles: [
                // 高德地图 矢量地图
                "http://wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7",
              ],
              tileSize: 256,
            },
            "tian-cvaw": {
              type: "raster",
              tiles: [
                // 天地图 矢量注记
                "http://t0.tianditu.gov.cn/cva_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-ciaw": {
              type: "raster",
              tiles: [
                // 天地图 影像注记
                "http://t0.tianditu.gov.cn/cia_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-satellite": {
              type: "raster",
              tiles: [
                // 天地图 卫星影像
                "http://t0.tianditu.gov.cn/img_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-vector": {
              type: "raster",
              tiles: [
                // 天地图 矢量地图
                "http://t0.tianditu.gov.cn/vec_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            
            "tian-terw": {
              type: "raster",
              tiles: [
                // 天地图 地形晕渲
                "http://t0.tianditu.gov.cn/ter_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-ctaw": {
              type: "raster",
              tiles: [
                // 天地图 地形注记
                "http://t0.tianditu.gov.cn/cta_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-ibow": {
              type: "raster",
              tiles: [
                // 天地图 全球境界
                "http://t0.tianditu.gov.cn/ibo_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            // "tian-evaw": {
            //   type: "raster",
            //   tiles: [
            //     // 天地图 矢量英文注记
            //     "http://t0.tianditu.gov.cn/eva_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
            //   ],
            //   tileSize: 256,
            // },
            // "tian-eiaw": {
            //   type: "raster",
            //   tiles: [
            //     // 天地图 影像英文注记
            //     "http://t0.tianditu.gov.cn/eia_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=eia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
            //   ],
            //   tileSize: 256,
            // },
            
            "bing-satellite": {
              type: "raster",
              tiles: [
                // bingmap 卫星影像
                "http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&it=A,G,L&og=819&n=z",
              ],
              tileSize: 256,
            },
            "bing-vector": {
              type: "raster",
              tiles: [
                // bingmap 矢量地图
                "http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&it=G,L&shading=hill&og=819&n=z",
              ],
              tileSize: 256,
            },
            "mapbox-satellite": {
              type: "raster",
              tiles: [
                // mapbox 卫星影像
                "https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?sku=101wZp4uNMRnl&access_token=pk.eyJ1Ijoidm9sb2R5YW4iLCJhIjoiY2xwYnc4enk0MGdhaTJpcW9odWppNXcwOSJ9.g598xmjqTXnpvZ1FztOsGg",
              ],
              tileSize: 256,
            },
          },
          layers: [
            {
              id: "gd-satellite",
              type: "raster",
              source: "gd-satellite",
              layout: {
                visibility: "visible",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "gd-vector",
              type: "raster",
              source: "gd-vector",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-cvaw",
              type: "raster",
              source: "tian-cvaw",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-ciaw",
              type: "raster",
              source: "tian-ciaw",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-satellite",
              type: "raster",
              source: "tian-satellite",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-vector",
              type: "raster",
              source: "tian-vector",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            /
            {
              id: "tian-terw",
              type: "raster",
              source: "tian-terw",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-ctaw",
              type: "raster",
              source: "tian-ctaw",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-ibow",
              type: "raster",
              source: "tian-ibow",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            // {
            //   id: "tian-evaw",
            //   type: "raster",
            //   source: "tian-evaw",
            //   layout: {
            //     visibility: "none",
            //   },
            //   minzoom: 0,
            //   maxzoom: 22,
            // },
            // {
            //   id: "tian-eiaw",
            //   type: "raster",
            //   source: "tian-eiaw",
            //   layout: {
            //     visibility: "none",
            //   },
            //   minzoom: 0,
            //   maxzoom: 22,
            // },
            /
            {
              id: "bing-satellite",
              type: "raster",
              source: "bing-satellite",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "bing-vector",
              type: "raster",
              source: "bing-vector",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "mapbox-satellite",
              type: "raster",
              source: "mapbox-satellite",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
          ],
        }, // mapbox底图
        center: [108, 35], // 初始化中心点
        zoom: 2, // 初始化层级
        // projection: "globe",
        language: "zh-Hans",
        // pitch: 65,
        // bearing: -180,
        //interactive: false,
      });
      this.map = map;

      map.on("webglcontextrestored", () => {
        console.log("A webglcontextrestored event occurred.");
      });
      map.on("webglcontextlost", () => {
        console.log("A webglcontextlost event occurred.");
      });
    },
    ChangeMapType(layerId) {
      this.MapList.forEach((item, index) => {
        const showStatus = item.layerId === layerId ? "visible" : "none";
        this.map.setLayoutProperty(item.layerId, "visibility", showStatus);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.HomeViewPage {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  #MyMapContainer {
    width: 100%;
    height: 100%;

    ::v-deep .mapboxgl-ctrl {
      display: none !important;
    }
  }
  .Selectbox {
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
</style>

5.安装npm install @turf/turf

npm install @turf/turf

引入

import * as turf from '@turf/turf'

https://turfjs.fenxianglu.cn/

6.综合示例完整代码

index.vue

<template>
  <div class="TestViewPage">
    <div ref="BasicMapboxRef" class="BasicMapbox"></div>
  </div>
</template>
  <script>
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import MapboxWorker from "worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker"; // Load worker code separately with worker-loader
mapboxgl.workerClass = MapboxWorker; // Wire up loaded worker to be used instead of the default
import * as turf from "@turf/turf";
import { VmInstanceClass, VmInstance } from "./Cpt/index";
export default {
  name: "TestViewPage",
  data() {
    return {};
  },
  mounted() {
    this.Init();
  },
  methods: {
    // 初始化
    Init() {
      const CenterPoint = [108.97274577932018, 19.15470548802415];
      const monument = [108.97274577932018, 19.15470548802415];
      const map = new mapboxgl.Map({
        container: this.$refs.BasicMapboxRef,
        //style: 'mapbox://styles/mapbox/light-v11',
        style: {
          version: 8,
          sources: {
            "gd-satellite": {
              type: "raster",
              tiles: [
                // 高德地图 卫星影像
                "http://wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6",
              ],
              tileSize: 256,
            },
            "gd-vector": {
              type: "raster",
              tiles: [
                // 高德地图 矢量地图
                "http://wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7",
              ],
              tileSize: 256,
            },
            "tian-cvaw": {
              type: "raster",
              tiles: [
                // 天地图 矢量注记
                "http://t0.tianditu.gov.cn/cva_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-ciaw": {
              type: "raster",
              tiles: [
                // 天地图 影像注记
                "http://t0.tianditu.gov.cn/cia_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-satellite": {
              type: "raster",
              tiles: [
                // 天地图 卫星影像
                "http://t0.tianditu.gov.cn/img_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-vector": {
              type: "raster",
              tiles: [
                // 天地图 矢量地图
                "http://t0.tianditu.gov.cn/vec_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            
            "tian-terw": {
              type: "raster",
              tiles: [
                // 天地图 地形晕渲
                "http://t0.tianditu.gov.cn/ter_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-ctaw": {
              type: "raster",
              tiles: [
                // 天地图 地形注记
                "http://t0.tianditu.gov.cn/cta_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "tian-ibow": {
              type: "raster",
              tiles: [
                // 天地图 全球境界
                "http://t0.tianditu.gov.cn/ibo_w/wmts?tk=1883a2da124fe27b3c281f9d65356e82&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles",
              ],
              tileSize: 256,
            },
            "bing-satellite": {
              type: "raster",
              tiles: [
                // bingmap 卫星影像
                "http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&it=A,G,L&og=819&n=z",
              ],
              tileSize: 256,
            },
            "bing-vector": {
              type: "raster",
              tiles: [
                // bingmap 矢量地图
                "http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&it=G,L&shading=hill&og=819&n=z",
              ],
              tileSize: 256,
            },
            "mapbox-satellite": {
              type: "raster",
              tiles: [
                // mapbox 卫星影像
                "https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?sku=101wZp4uNMRnl&access_token=pk.eyJ1Ijoidm9sb2R5YW4iLCJhIjoiY2xwYnc4enk0MGdhaTJpcW9odWppNXcwOSJ9.g598xmjqTXnpvZ1FztOsGg",
                //'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoidm9sb2R5YW4iLCJhIjoiY2xwYnc4enk0MGdhaTJpcW9odWppNXcwOSJ9.g598xmjqTXnpvZ1FztOsGg'
              ],
              tileSize: 256,
            },
          },
          layers: [
            {
              id: "gd-satellite",
              type: "raster",
              source: "gd-satellite",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "gd-vector",
              type: "raster",
              source: "gd-vector",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-cvaw",
              type: "raster",
              source: "tian-cvaw",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-ciaw",
              type: "raster",
              source: "tian-ciaw",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-satellite",
              type: "raster",
              source: "tian-satellite",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-vector",
              type: "raster",
              source: "tian-vector",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            /
            {
              id: "tian-terw",
              type: "raster",
              source: "tian-terw",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-ctaw",
              type: "raster",
              source: "tian-ctaw",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "tian-ibow",
              type: "raster",
              source: "tian-ibow",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "bing-satellite",
              type: "raster",
              source: "bing-satellite",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "bing-vector",
              type: "raster",
              source: "bing-vector",
              layout: {
                visibility: "none",
              },
              minzoom: 0,
              maxzoom: 22,
            },
            {
              id: "mapbox-satellite",
              type: "raster",
              source: "mapbox-satellite",
              layout: {
                visibility: "visible",
              },
              minzoom: 0,
              maxzoom: 22,
            },
          ],
          glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", //"glyphs":"https://fonts.openmaptiles.org/{fontstack}/{range}.pbf"//
        },
        language: "zh-Hans",
        center: CenterPoint,
        zoom: 11, ///15,
      });
      window.map = map;
      // 地图回调事件
      map.on("load", (e) => {
        console.log("地图加载完成", e);
        let VW = VmInstance({ a: 1, b: 2 }); //new VmInstanceClass({a:1,b:2}).InitVmInstanceClassFun()
        const MyCustomMapboxPopup = new mapboxgl.Popup({
          offset: 25,
          closeButton: false,
          closeOnClick: true,
        });
        window.MyCustomMapboxPopup = MyCustomMapboxPopup;
        MyCustomMapboxPopup.on("close", (e) => {
          console.log("监听弹窗关闭");
        });
        MyCustomMapboxPopup.on("open", (e) => {
          console.log("监听弹窗打开");
        });
        const el = document.createElement("div");
        el.id = "marker";
        el.className = "MarkerDivClass";
        new mapboxgl.Marker(el)
          .setLngLat(monument)
          .setPopup(MyCustomMapboxPopup.setDOMContent(VW))
          .addTo(map);
        
        this.LineFn(); //动态线
        this.AggregationEffectFun(); //聚合效果
        this.DrawShadowAreaFun(); //绘制阴影面积
        this.CustomBuilingFun(); //自定义建筑体
        this.ColorGradientLineFun(); //绘制line且颜色渐变
        this.DrawImgFun(); //绘制图片
        this.DrawLinesFun(); //绘制多条曲线
        this.DrawAnimationLinesFun(); ///绘制动态线
        this.DrawAnimationPointsFun(); //动画扩散点
        
        let PositionList = [];
        
        var hoveredStateId = null;
        //鼠标放上去
        map.on("mousemove", "maine", (e) => {
          if (hoveredStateId) {
            map.setFeatureState(
              { source: "maine", id: hoveredStateId },
              { hover: false }
            );
          }
          hoveredStateId = e.features[0].id;
          map.setFeatureState(
            { source: "maine", id: hoveredStateId },
            { hover: true }
          );
        });
        //    鼠标移开
        map.on("mouseleave", "maine", (e) => {
          if (hoveredStateId) {
            map.setFeatureState(
              { source: "maine", id: hoveredStateId },
              { hover: false }
            );
          }
          hoveredStateId = null;
        });

        

        var popup2 = new mapboxgl.Popup({
          closeButton: false,
          closeOnClick: false,
        });
        map.on("mouseenter", "clusters", (e) => {
          const features = map.queryRenderedFeatures(e.point);
          if (features.length) {
            map.getCanvas().style.cursor = "pointer";
            var coordinates = e.features[0].geometry.coordinates.slice();
            var popupName = e.features[0].properties.name;
            var popupvalue = e.features[0].properties.value;
            const contain = `
              <div class="popupClass">
                <div class="popupClass-title">
                  <span>名称：</span>
                  <span>${popupName}</span>
                </div>
                <div class="popupClass-title">
                  <span>值：</span>
                  <span>${popupvalue}</span></div>
              </div>
            `;
            popup2.setLngLat(coordinates).setHTML(contain).addTo(map);
          }
        });
        map.on("mouseleave", "clusters", (e) => {
          map.getCanvas().style.cursor = "";
          popup2.remove();
        });
        map.on("mouseenter", "pointsImg", (e) => {
          const features = map.queryRenderedFeatures(e.point);
          if (features.length) {
            map.getCanvas().style.cursor = "pointer";
            var coordinates = e.features[0].geometry.coordinates.slice();
            var popupName = e.features[0].properties.name;
            var popupvalue = e.features[0].properties.value;
            const contain = `
              <div class="popupClass">
                <div class="popupClass-title">
                  <span>名称：</span>
                  <span>${popupName}</span>
                </div>
                <div class="popupClass-title">
                  <span>值：</span>
                  <span>${popupvalue}</span></div>
              </div>
            `;
            popup2.setLngLat(coordinates).setHTML(contain).addTo(map);
          }
        });
        map.on("mouseleave", "pointsImg", (e) => {
          map.getCanvas().style.cursor = "";
          popup2.remove();
        });
        
        //点击定位点弹出内容框
        map.on("click", "points", (e) => {
          // map.setCenter()
          new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(e.features[0].properties.name)
            .addTo(map);
        });
        map.on("click", (e) => {
          console.log(`click---e`, e);
          PositionList.push([e.lngLat.lng, e.lngLat.lat]);
          console.log(`PositionList`, PositionList);
          console.log(`map.getCenter()`, map.getCenter());
          // map.setCenter()
          return;
          var el = document.createElement("div");
          el.className = "clickmarker";
          el.style.height = "20px";
          el.style.width = "20px";
          el.style.backgroundColor = "black";

          el.addEventListener("click", (e) => {
            // Prevent the `map.on('click')` to also be triggered
            e.stopPropagation();
            console.log("hello");
          });

          let marker = new mapboxgl.Marker(el).setLngLat(e.lngLat).addTo(map);
        });
        map.on("styledata", (e) => {
          // 发现切换底图之后， 原有点位就会丢失，重新添加回来
          //console.log('更换底图后，样式加载成功' )
        });
        map.on("error", (data) => {
          // console.log("地图error回调触发:", data);
        });
        map.on("zoomend", () => {
          let currentZoom = map.getZoom();
          // console.log("缩放层级 ", currentZoom);
        });

        //
      });
    },
    
    // 一条线绘制 线颜色渐变
    LineFn() {
      if (map.getSource("lineOne")) {
        map.removeLayer("lineOne");
        map.removeSource("lineOne");
      }
      var routeGeoJson = {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [108.839734, 19.045513],
            [108.9096, 19.087778],
            [109.033196, 19.139681],
            [109.11913, 19.255433],
          ],
        },
        properties: {},
      };
      // 添加数据源
      map.addSource("lineOne", {
        type: "geojson",
        lineMetrics: true, // 线渐变必须条件
        data: {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: [
              [108.839734, 19.045513],
              [108.9096, 19.087778],
              [109.033196, 19.139681],
              [109.11913, 19.255433],
            ],
          },
          properties: {},
        },
      });
      // 添加一条线
      map.addLayer({
        id: "lineOne",
        source: "lineOne",
        type: "line",
        layout: {
          visibility: "visible",
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": "#fff",
          "line-width": 15,
          // 'line-gradient': ['interpolate',['linear'],['line-progress'],0,'blue',0.1,'royalblue',0.3,'cyan',0.5,'lime',0.7,'yellow',1,'red']
        },
      });
      // 线滚动显示效果
      var totalTime1 = 0;
      var totalTime2 = 5;
      // 创建一条线
      var lineCount = turf.lineString([
        [108.839734, 19.045513],
        [108.9096, 19.087778],
        [109.033196, 19.139681],
        [109.11913, 19.255433],
      ]);
      // 分割线段
      var chunk = turf.lineChunk(lineCount, 1, { units: "miles" });
      console.log("一条线分割成多段：", chunk);
      var colorNum = 0;
      var colorList = [
        "red",
        "rgba(255,255,255,0)",
        "blue",
        "rgba(255,255,255,0)",
        "green",
        "rgba(255,255,255,0)",
      ];
      for (let i = 0; i < chunk.features.length; i++) {
        var oneMarker = chunk.features[i].geometry.coordinates;
        console.log("分割的线段" + oneMarker);
        var pageNum = i % 6;
        var lineName = "lineAllCount_" + i;
        // 绘制渐变的线
        this.AddAllLineFn(lineName, chunk.features[i], colorList[pageNum]);
      }
      //定时器动态修改线的颜色
      setInterval(() => {
        colorNum++;
        for (let i = 0; i < chunk.features.length; i++) {
          var oneMarker = chunk.features[i].geometry.coordinates;
          var countNumShow = colorNum % 6;
          var pageNum = i % 6;
          var lineName = "lineAllCount_" + i;
          var totalNum = pageNum - countNumShow;
          if (totalNum <= 0) {
            map.setPaintProperty(
              lineName,
              "line-color",
              colorList[5 - Math.abs(totalNum)]
            );
          }
          if (totalNum > 0) {
            map.setPaintProperty(
              lineName,
              "line-color",
              colorList[totalNum - 1]
            );
          }
        }
        // 触发一个显示框的渲染。使用自定义图层时，当图层发生改变，使用此方法去重渲染。
        // 在下一个显示框渲染前多次调用此方法也只会渲染一次
        map.triggerRepaint();
      }, 300);
    },
    AddAllLineFn(name, source, color) {
      // 添加数据源
      map.addSource(name, {
        type: "geojson",
        lineMetrics: true, // 线渐变必须条件
        data: source,
      });
      // 添加一条线
      map.addLayer({
        id: name,
        source: name,
        type: "line",
        layout: {
          visibility: "visible",
          "line-join": "round",
          "line-cap": "round",
        },
        paint: {
          "line-color": color,
          "line-width": 6,
        },
      });
    },
    /聚合效果
    AggregationEffectFun() {
      map.addSource("earthquakes", {
        type: "geojson",
        data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
        cluster: true, //开启聚合效果
      });

      map.addLayer({
        id: "clusters",
        type: "circle",
        source: "earthquakes",
        paint: {
          "circle-color": "#51bbd6",
          "circle-radius": 20,
        },
      });
      // 文字图层
      map.addLayer({
        id: "cluster-count",
        type: "symbol",
        source: "earthquakes",
        layout: {
          "text-field": "文字图层",
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], //字体
          "text-offset": [0, 1.25], //设置图标与图标注相对之间的距离
          "text-anchor": "top", //标记文本相对于定位点的位置
          "text-size": 22, //字号
        },
        paint: {
          // 绘制类属性
          // 文本类属性（需要设置 text-field）
          "text-opacity": 1, // 文本的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
          "text-color": "#ff00ff", // 文本的颜色（可选，默认值为 #000000）
          "text-halo-color": "rgba(0,0,0,0)", // 文本的光晕颜色（可选，默认值为 rgba(0,0,0,0)）
          "text-halo-width": 0, // 文本的光晕宽度（可选，值 >= 0，默认值为 0，单位：像素）
          "text-halo-blur": 0, // 文本的光晕模糊宽度（可选，值 >= 0，默认值为 0，单位：像素）
          "text-translate": [0, 0], // 文本的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
          "text-translate-anchor": "map", // 文本的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
        },
      });
    },
    绘制阴影面积
    DrawShadowAreaFun() {
      map.addLayer({
        id: "maine",
        type: "fill",
        source: {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: [
                [
                  [108.88608239135675, 19.1398434553587],
                  [108.92625115356498, 19.142276019403027],
                  [108.92693779907222, 19.119570694754827],
                  [108.89912865600621, 19.117462184843347],
                  [108.8799025817865, 19.118435346606162],
                  [108.87818596801759, 19.142113849582543],
                  [108.88608239135675, 19.1398434553587],
                ],
              ],
            },
            id: "3",
          },
        },
        layout: {},
        paint: {
          "fill-color": "#088",
          "fill-opacity": [
            "case",
            ["boolean", ["feature-state", "hover"], false], //判断鼠标移上去显示颜色
            1,
            0.5,
          ],
        },
      });
      //   map.flyTo({
      //     center: [108.9011180746175, 19.127966153101667],
      //     //zoom: 9,
      //     speed: 0.3,
      //     easing(t) {
      //       return t;
      //     },
      //   });
    },
    /自定义建筑体
    CustomBuilingFun() {
      map.addLayer({
        id: "room-extrusion",
        type: "fill-extrusion",
        source: {
          type: "geojson",
          data: {
            features: [
              {
                type: "Feature",
                properties: {
                  level: 1,
                  name: "Bird Exhibit",
                  height: 160,
                  base_height: 0,
                  color: "red",
                },
                geometry: {
                  coordinates: [
                    [
                      [108.91156272021732, 19.207917124633312],
                      [108.93399650855417, 19.20719490986758],
                      [108.96076409691301, 19.207676386730014],
                      [108.95592043806687, 19.187693912702684],
                      [108.92813313205727, 19.18360081747511],
                      [108.90289512017728, 19.18817544662795],
                      [108.89779653191789, 19.203583788468677],
                    ],
                  ],
                  type: "Polygon",
                },
                id: "08a10ab2bf15c4d14669b588062f7f08",
              },

              {
                type: "Feature",
                properties: {
                  level: 1,
                  name: "Ancient Egypt",
                  height: 190,
                  base_height: 0,
                  color: "blue",
                },
                geometry: {
                  coordinates: [
                    [
                      [108.84571644647241, 19.207398225961285],
                      [108.89858815057386, 19.200913871858063],
                      [108.89755818231208, 19.187620147023196],
                      [108.86597248895202, 19.207074014326693],
                      [108.89652821405042, 19.203507644172262],
                      [108.89481160027975, 19.187620147023196],
                      [108.8663158117065, 19.185998887618993],
                      [108.8532695470571, 19.18729589641977],
                    ],
                  ],
                  type: "Polygon",
                },
              },
            ],
            type: "FeatureCollection",
          },
        },
        paint: {
          "fill-extrusion-color": ["get", "color"],
          "fill-extrusion-height": ["get", "height"],
          "fill-extrusion-base": ["get", "base_height"],
          "fill-extrusion-opacity": 0.5,
        },
      });
      // map.flyTo({
      // center: [108.97274577932018,19.15470548802415],
      // zoom: 15,
      // speed: 0.3,
      // easing(t) {
      //   return t;
      // },
      //});
    },
    //绘制line且颜色渐变
    ColorGradientLineFun() {
      // 添加数据源
      map.addSource("ColorGradientLine", {
        type: "geojson",
        lineMetrics: true, // 线渐变必须条件
        data: {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: [
              [108.96999919728881, 19.065657014245033],
              [108.98064220266036, 19.06987532721513],
              [108.99300182180076, 19.076040360742084],
              [109.01772106008167, 19.082205164878914],
              [109.02699077443702, 19.09226303690471],
              [109.0342005522707, 19.101022621102516],
              [109.04175365285539, 19.11075494853226],
              [109.05308330373407, 19.116269679847207],
              [109.07162273244649, 19.115945288979063],
              [109.1152686698606, 19.11646450055744],
              [109.13724132611088, 19.11646450055744],
              [109.14925762249686, 19.11386935885227],
              [109.16539379192955, 19.109003358361463],
              [109.18084331585692, 19.105110454878087],
              [109.19251628948837, 19.09180901012317],
              [109.1971026715268, 19.071343458858436],
            ],
          },
          properties: {},
        },
      });
      map.addLayer({
        type: "line",
        source: "ColorGradientLine",
        id: "ColorGradientLine",
        paint: {
          "line-color": "red",
          "line-width": 5,
          "line-gradient": [
            "interpolate",
            ["linear"],
            ["line-progress"],
            0,
            "blue",
            0.1,
            "royalblue",
            0.3,
            "cyan",
            0.5,
            "lime",
            0.7,
            "yellow",
            1,
            "red",
          ],
        },
        layout: {
          "line-cap": "round",
          "line-join": "round",
        },
      });
    },
    /绘制图片
    DrawImgFun() {
      map.loadImage(require("@/assets/img/爆管-1.png"), (error, image) => {
        if (error) throw error;
        map.addImage("cat", image);
        map.addLayer({
          id: "pointsImg",
          type: "symbol",
          source: {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  geometry: {
                    type: "Point",
                    coordinates: [108.87142729268334, 19.27490629947056],
                  },
                  properties: {
                    name: "坐标点1",
                  },
                },
                {
                  type: "Feature",
                  geometry: {
                    type: "Point",
                    coordinates: [108.78597820119654, 19.108808528859697],
                  },
                  properties: {
                    name: "坐标点2<p>asfdasfdas</p>",
                  },
                },
              ],
            },
          },
          layout: {
            "icon-image": "cat",
            "icon-size": 1,
            visibility: "visible", //
          },
        });
      });
    },
    绘制多条曲线
    DrawLinesFun() {
      map.addSource("MyCustomlines", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              properties: {
                color: "#F7455D", // red
              },
              geometry: {
                type: "LineString",
                coordinates: [
                  [108.72795665578485, 19.22133875411727],
                  [108.74374950246488, 19.221987120485267],
                  [108.77224532116793, 19.229118971730983],
                  [108.78769484509348, 19.228794802939134],
                  [108.79696455944878, 19.226525603482486],
                  [108.83414703121872, 19.229137281712354],
                  [108.85096984616052, 19.236268832473357],
                  [108.85199981442219, 19.244696629496772],
                ],
              },
            },
            {
              type: "Feature",
              properties: {
                color: "#33C9EB", // blue
              },
              geometry: {
                type: "LineString",
                coordinates: [
                  [108.68298137502444, 19.03872217883449],
                  [108.70529738810336, 19.06857740835045],
                  [108.71559708203768, 19.09193861422048],
                  [108.73830836723033, 19.125796468657413],
                  [108.75204127738516, 19.134878630789984],
                  [108.76838778126819, 19.168116204400178],
                  [108.7539682256043, 19.17687176607255],
                  [108.73920534718769, 19.186599622200788],
                  [108.71894930470631, 19.190166358801875],
                  [108.70967959035107, 19.2054051809326],
                  [108.74956456561256, 19.20389678341249],
                ],
              },
            },
          ],
        },
      });
      map.addLayer({
        id: "MyCustomlines",
        type: "line",
        source: "MyCustomlines",
        paint: {
          "line-width": 3,
          // Use a get expression (https://docs.mapbox.comhttps://docs.mapbox.com/style-spec/reference/expressions/#get)
          // to set the line-color to a feature property value.
          "line-color": ["get", "color"],
        },
      });
    },
    ///绘制动态线
    DrawAnimationLinesFun() {
      const geojson = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            properties: {},
            geometry: {
              coordinates: [
                [109.22989452199619, 19.240140339902368],
                [109.21753490285579, 19.22976731734059],
                [109.19968211965227, 19.213233958706027],
                [109.17580001089982, 19.184195539179612],
                [109.10001241983537, 19.133470215947554],
                [109.07288992227649, 19.133470215947554],
                [109.06739675821353, 19.13995722415669],
                [109.06739675821353, 19.147092638783647],
              ],
              type: "LineString",
            },
          },
          {
            type: "Feature",
            properties: {},
            geometry: {
              coordinates: [
                [109.16363323049268, 19.135731966665944],
                [109.17461955861694, 19.146759577886357],
                [109.21554064178974, 19.19107402328848],
                [109.21966051483645, 19.19820722531415],
                [109.22824358368462, 19.217984031509516],
                [109.23888658905611, 19.23192362918958],
                [109.24197649384132, 19.239379207488625],
              ],
              type: "LineString",
            },
          },
          {
            type: "Feature",
            properties: {},
            geometry: {
              coordinates: [
                [109.17496288137141, 19.233333117753645],
                [109.18697917775734, 19.22976731734059],
                [109.20277202443742, 19.22393220423919],
                [109.2192515166247, 19.214206555254933],
                [109.2254313261949, 19.20869509873897],
                [109.23161113576685, 19.19929277603012],
                [109.25564372853881, 19.178540921412505],
              ],
              type: "LineString",
            },
          },
          {
            type: "Feature",
            properties: {},
            geometry: {
              coordinates: [
                [109.22749126271833, 19.080582870243916],
                [109.23435771779748, 19.092911910892198],
                [109.20963843081171, 19.12048671260588],
                [109.20963843081171, 19.138975467609015],
                [109.12844112166454, 19.17856911476261],
                [109.14526394931647, 19.20580538828324],
                [109.15865353671865, 19.21099273774354],
                [109.16757992832129, 19.202563211787293],
                [109.18302945224684, 19.196402900408657],
                [109.2367810062604, 19.163677453410585],
              ],
              type: "LineString",
            },
          },
        ],
      };
      map.addSource("AnimateDashLine", {
        type: "geojson",
        data: geojson,
      });

      // add a line layer without line-dasharray defined to fill the gaps in the dashed line
      map.addLayer({
        type: "line",
        source: "AnimateDashLine",
        id: "AnimateDashLine-background",
        paint: {
          "line-color": "yellow",
          "line-width": 6,
          "line-opacity": 0.4,
        },
      });

      // add a line layer with line-dasharray set to the first value in dashArraySequence
      map.addLayer({
        type: "line",
        source: "AnimateDashLine",
        id: "AnimateDashLine-dashed",
        paint: {
          "line-color": "yellow",
          "line-width": 6,
          "line-dasharray": [0, 4, 3],
        },
      });

      // technique based on https://jsfiddle.net/2mws8y3q/
      // an array of valid line-dasharray values, specifying the lengths of the alternating dashes and gaps that form the dash pattern
      const dashArraySequence = [
        [0, 4, 3],
        [0.5, 4, 2.5],
        [1, 4, 2],
        [1.5, 4, 1.5],
        [2, 4, 1],
        [2.5, 4, 0.5],
        [3, 4, 0],
        [0, 0.5, 3, 3.5],
        [0, 1, 3, 3],
        [0, 1.5, 3, 2.5],
        [0, 2, 3, 2],
        [0, 2.5, 3, 1.5],
        [0, 3, 3, 1],
        [0, 3.5, 3, 0.5],
      ];

      let step = 0;

      function animateDashArray(timestamp) {
        // Update line-dasharray using the next value in dashArraySequence. The
        // divisor in the expression `timestamp / 50` controls the animation speed.
        const newStep = parseInt((timestamp / 50) % dashArraySequence.length);

        if (newStep !== step) {
          map.setPaintProperty(
            "AnimateDashLine-dashed",
            "line-dasharray",
            dashArraySequence[step]
          );
          step = newStep;
        }

        // Request the next frame of the animation.
        requestAnimationFrame(animateDashArray);
      }

      // start the animation
      animateDashArray(0);
    },
    动画扩散点
    DrawAnimationPointsFun() {
      const size = 200;

      // This implements `StyleImageInterface`
      // to draw a pulsing dot icon on the map.
      const pulsingDot = {
        width: size,
        height: size,
        data: new Uint8Array(size * size * 4),

        // When the layer is added to the map,
        // get the rendering context for the map canvas.
        onAdd: function () {
          const canvas = document.createElement("canvas");
          canvas.width = this.width;
          canvas.height = this.height;
          this.context = canvas.getContext("2d");
        },

        // Call once before every frame where the icon will be used.
        render: function () {
          const duration = 1000;
          const t = (performance.now() % duration) / duration;

          const radius = (size / 2) * 0.3;
          const outerRadius = (size / 2) * 0.7 * t + radius;
          const context = this.context;

          // Draw the outer circle.
          context.clearRect(0, 0, this.width, this.height);
          context.beginPath();
          context.arc(
            this.width / 2,
            this.height / 2,
            outerRadius,
            0,
            Math.PI * 2
          );
          context.fillStyle = `rgba(255, 200, 200, ${1 - t})`;
          context.fill();

          // Draw the inner circle.
          context.beginPath();
          context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
          context.fillStyle = "rgba(255, 100, 100, 1)";
          context.strokeStyle = "white";
          context.lineWidth = 2 + 4 * (1 - t);
          context.fill();
          context.stroke();

          // Update this image's data with data from the canvas.
          this.data = context.getImageData(0, 0, this.width, this.height).data;

          // Continuously repaint the map, resulting
          // in the smooth animation of the dot.
          map.triggerRepaint();

          // Return `true` to let the map know that the image was updated.
          return true;
        },
      };
      map.addImage("pulsing-dot", pulsingDot, { pixelRatio: 2 });

      map.addSource("dot-point", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [108.98201549367656, 19.26542183598174], // icon position [lng, lat]
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [108.98201549367656, 19.24046448629788], // icon position [lng, lat]
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [108.99471843557143, 19.224256382626862], // icon position [lng, lat]
              },
            },
            {
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [109.06784618557248, 19.276116685716573], // icon position [lng, lat]
              },
            },
          ],
        },
      });
      map.addLayer({
        id: "layer-with-pulsing-dot",
        type: "symbol",
        source: "dot-point",
        layout: {
          "icon-image": "pulsing-dot",
        },
      });
    },
    ///
  },
};
</script>
  <style lang="scss" scoped>
.TestViewPage {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
  .BasicMapbox {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    ::v-deep #marker {
      background-image: url("https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg");
      background-size: cover;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
    }

    ::v-deep .mapboxgl-popup {
      max-width: 300px !important;
      .mapboxgl-popup-content {
        padding: 0;
      }
    }

    ::v-deep .mapboxgl-ctrl {
      display: none !important;
    }
  }
}
</style>

Cpt/index.js

import Vue from "vue";
import myWindow from "./myWindow.vue";
/01
export let VmInstance = (Pararms) => {
    let WindowVm = Vue.extend(myWindow);
    let Vm = new WindowVm({}).$mount()
    Vm.data = Pararms
    Vm.propsData = Pararms
    console.log(`Vm`, Vm);
    return Vm.$el
}
/02
class VmInstanceClass {
    constructor(Pararms) {
        this.Pararms = { ...Pararms }
        this.WindowVm = Vue.extend(myWindow);
    }
    InitVmInstanceClassFun() {
        console.log(`this.Pararms`, this.Pararms);
        let Vm = new this.WindowVm({}).$mount()
        Vm.data = this.Pararms
        Vm.propsData = this.Pararms
        console.log(`Vm`, Vm);
        return Vm.$el
    }
}
export { VmInstanceClass }

Cpt/myWindow.vue

<template>
  <div class="MyCustomMapboxPopupCpt">
    <div class="MyCustomMapboxPopupCptOutbox" @click="ClosePopFun">
      <div class="NavOutbox">
        <div class="NavLeft">弹框</div>
        <div class="NavRight" @click="ClosePopFun">x</div>
      </div>
      <div class="ContentOutbox">这里是样式{{ propsData }}</div>
    </div>
  </div>
</template>
  <script>
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {},
    },
    detailId: {
      type: Number,
      required: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    ClosePopFun() {
      if (MyCustomMapboxPopup) {
        MyCustomMapboxPopup.remove();
      }
    },
  },
};
</script>
  <style lang="scss" scoped>
.MyCustomMapboxPopupCpt {
  width: 290px;
  .MyCustomMapboxPopupCptOutbox {
    width: calc(100% - 30px);
    margin: 15px;
    .NavOutbox {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 15px;
      .NavLeft {
        color: #222;
        font-size: 14px;
        font-weight: 500;
      }
      .NavRight {
        color: #222;
        font-size: 22px;
        font-weight: 500;
        cursor: pointer;
      }
    }
    .ContentOutbox {
      width: 100%;
      color: #222;
      font-size: 14px;
    }
  }
}
</style>