当前位置： 首页 > news >正文

使用npm包的工程如何引入mapboxgl-enhance/maplibre-gl-enhance扩展包

news 2025/9/19 8:28:03

作者：刘大

前言

在使用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.mapmap.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'}
}

相关文章：

使用npm包的工程如何引入mapboxgl-enhance/maplibre-gl-enhance扩展包

作者&#xff1a;刘大 前言 在使用iClient for MapboxGL/MapLibreGL项目开发中&#xff0c;往往会对接非EPSG:3857坐标系的地图&#xff0c;由于默认不支持&#xff0c;因此需引入mapboxgl-enhance/maplibre-gl-enhance扩展包。 在使用Vue等其他框架&#xff0c;通过npm包下载…...

编程日记 2024/12/28 22:58:09

【NIFI】实现ORACLE-＞ORACLE数据同步

【NIFI】实现ORACLE->ORACLE数据同步 需求 使用nifi实现 oracle->oracle 不同数据库之间的数据同步&#xff0c; 如果想实现 oracle->oracle技术有很多&#xff0c;例如使用oracle golden gate或者是kettle等&#xff0c;或者是使用oralce的dblink技术也能实现。当让…...

编程日记 2024/12/28 22:57:05

单例模式的写法

单例模式&#xff08;Singleton Pattern&#xff09;是一种设计模式&#xff0c;确保一个类只有一个实例&#xff0c;并提供一个全局访问点。常用于管理共享资源&#xff08;如数据库连接、配置文件、线程池等&#xff09;。在实际编码中&#xff0c;有多种实现单例模式的方法&…...

编程日记 2024/12/28 22:53:56

Selenium实践总结

1.使用显示等待而不是隐式等待 隐式等待可能会导致不可预测的测试行为&#xff0c;尤其是在动态 Web 应用程序中。显式等待&#xff0c;它允许您 等待特定条件发生后再继续测试&#xff0c;这种方法提供了更多的控制和可靠性。 WebDriverWait wait new WebDriverWait(drive…...

编程日记 2024/12/28 22:52:54

Python数据可视化小项目

英雄联盟S14世界赛选手数据可视化 由于本学期有一门数据可视化课程&#xff0c;课程结课作业要求完成一个数据可视化的小Demo&#xff0c;于是便有了这个小项目&#xff0c;课程老师要求比较简单&#xff0c;只要求熟练运用可视化工具展示数据&#xff0c;并不要求数据来源&am…...

编程日记 2024/12/28 22:49:50

Python毕业设计选题：基于python的白酒数据推荐系统_django+hive

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 白酒管理 系统管理 看板展示 系统首页 白酒详情…...

编程日记 2024/12/28 22:47:48

SQL-leetcode-180. 连续出现的数字

180. 连续出现的数字 表&#xff1a;Logs -------------------- | Column Name | Type | -------------------- | id | int | | num | varchar | -------------------- 在 SQL 中&#xff0c;id 是该表的主键。 id 是一个自增列。 找出所有至少连续出现三次的数字。 返回的…...

编程日记 2024/12/28 22:45:45

Unity中如何修改Sprite的渲染网格

首先打开SpriteEditor 选择Custom OutLine,点击Genrate 则在图片边缘会出现边缘线&#xff0c;调整白色小方块可以调整边缘 调整后&#xff0c;Sprite就会按照调整后的网格渲染了。 如何在UI中使用&#xff1f; 只要在UI的Image组件中选择Use Sprite Mesh 即可 结果&#xff1…...

编程日记 2024/12/28 22:38:37

跟着 8.6k Star 的开源数据库，搞 RAG！

过去 9 年里&#xff0c;HelloGitHub 月刊累计收录了 3000 多个开源项目。然而&#xff0c;随着项目数量的增加&#xff0c;不少用户反馈&#xff1a;“搜索功能不好用&#xff0c;找不到想要的项目&#xff01;” 这让我意识到&#xff0c;仅仅收录项目是不够的&#xff0c;还…...

编程日记 2024/12/28 22:28:24

每日一题 345. 反转字符串中的元音字母

345. 反转字符串中的元音字母 简单 class Solution { public:string reverseVowels(string s) {int l 0;int r s.size() - 1;unordered_set<char> st {a,A,E,e,i,I,O,o,U,u};while(l < r){while(l<r && !st.count(s[l]) ){l;}while(l<r &&…...

编程日记 2024/12/28 22:26:21

Stream API 的设计融合了多个经典设计模式

Stream API 的设计融合了多个经典设计模式&#xff1a; 1. 策略模式&#xff08;Strategy Pattern&#xff09; 策略模式定义了一个算法的家族&#xff0c;将每个算法封装起来&#xff0c;并使它们可以互换。Stream API 中的每个操作&#xff08;如 filter(), map()&#xff…...

编程日记 2024/12/28 22:25:20

jmeter混合场景测试，设置多业务并发比例（吞吐量控制器）

jmeter混合场景测试&#xff0c;设置多业务并发比例&#xff08;吞吐量控制器&#xff09; 测试目的 为了验证需求提出的性能要求&#xff0c;结合实际可能的高压力场景&#xff0c;较全面的检测系统的性能表现。 测试方法 根据需求调研的业务模型和交易占比&#xff0c;设置不…...

编程日记 2024/12/28 22:24:18

直流有刷电机多环控制(PID闭环死区和积分分离)

直流有刷电机多环控制 提高部分-第8讲 直流有刷电机多环控制实现(1)_哔哩哔哩_bilibili PID模型 外环的输出作为内环的输入，外环是最主要控制的效果，主要控制电机的位置。改变位置可以改变速度，改变速度是受电流控制。 实验环境 【 ！】功能简介： 按下KEY1使能电机,按下…...

编程日记 2024/12/28 22:23:16

vue-axios+springboot实现文件流下载

前端vue代码&#xff1a; <template><div class"app-container documentation-container"><div><el-button type"primary" click"downloadFile(test.xlsx)">下载test.xlsx</el-button></div></div> …...

编程日记 2024/12/28 22:21:15

selenium执行js

JS知识 获取元素 document.getElement 移除属性&#xff1a;removeAttribute("xx") 窗口移动&#xff1a;window.scrollTo(0, document.body.scrollHeight)方法 drivier.execute_script(js)场景&#xff1a; 日期选择框&#xff0c;不能输入&#xff0c;只能设置…...

编程日记 2024/12/28 22:19:10

每日算法Day11【左叶子之和、找树左下角的值、路径总和】

404.左叶子之和 算法链接: 404. 左叶子之和 - 力扣&#xff08;LeetCode&#xff09; 类型: 二叉树 难度: 简单 思路&#xff1a;要判断一个节点是否为左叶子节点&#xff0c;只能通过其父节点进行判断。 题解: /*** Definition for a binary tree node.* public class Tr…...

编程日记 2024/12/28 22:18:08

分享一下使用 AI 开发个人工具的迭代过程

分享一下使用 AI 开发个人工具的迭代过程&#xff1a;1. 找 gpt/claude 要一个 super shady coder 的人设 prompt&#xff1b;2. 简单介绍项目背景和基础需求给 gemini&#xff0c;生成最初的细化需求&#xff1b;3. 根据细化需求再次分析&#xff0c;完善边界条件&#xff0c;…...

编程日记 2024/12/28 22:15:01

大型语言模型（LLMs）演化树 Large Language Models

大型语言模型&#xff08;LLMs&#xff09;演化树 Large Language Models flyfish 下面的图来自论文地址 Transformer 模型&#xff08;如 BERT 和 GPT-3&#xff09;已经给自然语言处理&#xff08;NLP&#xff09;领域带来了革命性的变化。这得益于它们具备并行化能力&…...

编程日记 2024/12/28 22:12:59

部分背包问题

本节学习解决部分背包问题,部分背包代表物品可以按照一定比例被分割,而后放入背包内.这是十分经典的用贪心算法解决的问题. 问题描述: 给定一些物品,用matrix表示各个物品的属性,第一项表示物品的质量,第二项表示物品的总价值.现有一背包最大承重为M,试求如何让背包中所装物品…...

编程日记 2024/12/28 22:11:57

教师管理系统

大概功能&#xff1a; 1.显示所有教师 2.按姓名查找教师 3.按工号查找教师 4.增加教师 5.删除教师 6.退出 数据会保存到 txt 文件里面 姓名&#xff1a;必须是中文 手机号码&#xff1a;必须是11位&#xff0c;必须是数字 效果展示&#xff1a; 代码展示&#xff1a; Teache…...

编程日记 2024/12/28 22:07:53

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/9/13 17:44:12

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/9/11 12:55:00

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/13 0:44:14

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/6/16 8:33:33

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/8/26 13:03:54

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/9/5 22:23:44

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2025/9/2 17:49:26

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2025/9/4 11:09:31