使用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的工程

由于之前有文章已经介绍过了，这里就直接贴出主要步骤，不详细阐述了

第一步：根据模板创建

javascript 复制代码

npm create vite supermap-mapboxgl-app --template vue

第二步：下载iClient for MapboxGL

javascript 复制代码

npm install @supermapgis/iclient-mapboxgl

第三步：加载EPSG:4326坐标系的地图和数据

javascript 复制代码

<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

javascript 复制代码

npm i vite-plugin-externals -D

第二步：单独下载mapboxgl-enhance.js并在index.html里面引入

可通过http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?id=2842下载iClient完整包获取

html 复制代码

<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里面设置

javascript 复制代码

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添加如下配置

javascript 复制代码

module.exports={
    configureWebpack:{
        externals: {
             'mapbox-gl': 'mapboxgl'
        }
    }
}

反之，非Vue工程或自行构建的Vue工程，则在webpack.config.js里面设置

javascript 复制代码

module.exports={
        externals: {
             'mapbox-gl': 'mapboxgl'
    }
}

方式二：externals直接设置为enhance.js的相对路径，无需在index.html引入

javascript 复制代码

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为例

javascript 复制代码

module.exports={
        externals: {
             'maplibre-gl':'maplibregl'
    }
}