使用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运行，会有以下报错，无法显示
报错.png

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'
    }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/946268.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！