使用npm包的工程如何引入mapboxgl-enhance/maplibre-gl-enhance扩展包
作者：刘大
前言
在使用iClient for MapboxGL/MapLibreGL项目开发中，往往会对接非EPSG:3857坐标系的地图，由于默认不支持，因此需引入mapboxgl-enhance/maplibre-gl-enhance扩展包。
在使用Vue等其他框架，通过npm包下载iClient包时，mapboxgl-enhance/maplibre-gl-enhance 没有npm包，应该如何引入使用呢？
本篇文章以iClient for MapboxGL为例，给大家讲解下。
使用指南
一、Vite打包环境
1.构建Vite+Vue3+iClient for MapboxGL的工程
由于之前有文章已经介绍过了，这里就直接贴出主要步骤，不详细阐述了
第一步：根据模板创建
npm create vite supermap-mapboxgl-app --template vue
第二步：下载iClient for MapboxGL
npm install @supermapgis/iclient-mapboxgl
第三步：加载EPSG:4326坐标系的地图和数据
<script setup>
import { ref, onMounted } from 'vue'
import mapboxgl from 'mapbox-gl'
onMounted(() => {
mapboxgl.supermap
.initMap(
'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World'
)
.then(function (result) {
var map = result.map
map.addControl(new mapboxgl.NavigationControl(), 'top-left')
})
})
</script>
此时，我们直接npm run dev运行，会有以下报错，无法显示
2.设置externals外部扩展
第一步：Vite设置externals，需要下载vite-plugin-externals
npm i vite-plugin-externals -D
第二步：单独下载mapboxgl-enhance.js并在index.html里面引入
可通过http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=2842下载iClient完整包获取
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script type="text/javascript" src="/public/mapboxgl/mapbox-gl-enhance.js"></script>
</body>
第三步：在vite.config.js里面设置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteExternalsPlugin } from 'vite-plugin-externals'
export default defineConfig({
plugins: [vue(),
viteExternalsPlugin({
'mapbox-gl': 'mapboxgl'
})
],
})
二、webpack打包环境
以上是Vite环境下得设置，若你使用得webpack打包,由于webpack已内置externals，在配置里面直接设置externals即可
方式一：index.html引入enhance.js 并添加externals
若使用VUE CLI构建的工程，需要在vue.config.js添加如下配置
module.exports={
configureWebpack:{
externals: {
'mapbox-gl': 'mapboxgl'
}
}
}
反之，非Vue工程或自行构建的Vue工程，则在webpack.config.js里面设置
module.exports={
externals: {
'mapbox-gl': 'mapboxgl'
}
}
方式二：externals直接设置为enhance.js的相对路径，无需在index.html引入
module.exports={
configureWebpack:{
externals: {
'mapbox-gl': {
root: 'mapboxgl',
commonjs: '../../mapboxgl-enhance.js', //相对路径
commonjs2: '../../mapboxgl-enhance.js',
amd: '../../mapboxgl-enhance.js'
}
}
}
}
至此 就成功引入mapboxgl-enhance扩展包了。
如果你使用的是iClient for MapLibreGL，那么和上面一样配置，下载 maplibre-gl-enhance.js引入，externals配置只需对应修改为’maplibre-gl‘，以webapck为例
module.exports={
externals: {
'maplibre-gl':'maplibregl'
}
}