vue2使用mapbox

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.测试完整代码

 5.安装npm install @turf/turf

npm install @turf/turf

 引入

import * as turf from '@turf/turf'

https://turfjs.fenxianglu.cn/

6.综合示例完整代码

index.vue

 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