==============================vue component demo===================

<script> import {getCurrentInstance, ref, toRefs, onMounted} from 'vue'; export default { name: "OpcrossBox", setup() { const zoom = ref(15); const center = ref([121.5273285, 31.21515044]); const visible = ref(true); const switchVisible = () => { visible.value = !visible.value; } const initLayer = (layer) => { console.log('init: ', layer) } const data = ref([{ geometry: { type: 'Point', coordinates: [121.5273285, 31.21515044], }, height: 100 }, { geometry: { type: 'Point', coordinates: [121.5473285, 31.21515044], }, height: 300 }]); return { zoom, center, switchVisible, initLayer, visible, ...toRefs(data), } } } </script> <style scoped> </style>

================package.json================
"dependencies": {
"@ant-design/icons-vue": "^6.0.1",
"@element-plus/icons-vue": "^0.2.7",
"@types/node": "^17.0.18",
"@vitejs/plugin-vue-jsx": "^1.3.7",
"ant-design-vue": "3.0.0-beta.8",
"axios": "^0.21.1",
"dayjs": "^1.10.7",
"echarts": "^5.3.0",
"esbuild": "^0.14.20",
"js-md5": "^0.7.3",
"less": "^4.1.2",
"pushstate-server": "^3.1.0",
"qs": "^6.9.6",
"sass": "^1.49.7",
"sass-loader": "^12.6.0",
"vue": "^3.2.30",
"vue-bmap-gl": "^1.0.0",
"vue-i18n": "^9.2.0-beta.30",
"vue-mapvgl": "^1.0.0",
"vue-router": "^4.0.4",
"vuex": "^4.0.2",
"wangeditor": "^4.6.10",
"yarn": "^1.22.17"
},
"devDependencies": {
"@babel/core": "^7.17.0",
"@babel/runtime": "^7.17.0",
"@intlify/vite-plugin-vue-i18n": "^3.3.0",
"@rollup/plugin-babel": "^5.3.0",
"@vitejs/plugin-vue": "^1.1.4",
"@vue/compiler-sfc": "^3.2.30",
"@vuemap/unplugin-resolver": "^1.0.2",
"babel": "^6.23.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-import": "^1.13.3",
"element-theme-chalk": "^2.15.1",
"less-loader": "7.3.0",
"unplugin-auto-import": "^0.6.0",
"unplugin-vue-components": "^0.17.18",
"vite": "^2.8.3",
"vite-babel-plugin": "^0.0.2",
"vite-plugin-babel-import": "^2.0.2",
"vite-plugin-imp": "^2.0.4",
"vite-plugin-style-import": "^1.4.1"
}
========================main.js======================
import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css';
import VueMapvgl from 'vue-mapvgl';
initBMapApiLoader({
ak: '省略'
})

const app = createApp(App)
// 可添加全局过滤器
// app.config.globalProperties.$filters = {}
app.use(router)
app.use(store)
app.use(VueBMap)
.use(VueMapvgl);
setupI18n(app);
setupAntd(app);
app.mount('#app');