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

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

news 2026/4/1 15:23:05

作者：刘大

前言

在使用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

PasteMD免配置环境：Docker镜像封装，3条命令完成私有化AI格式化服务部署

PasteMD免配置环境&#xff1a;Docker镜像封装&#xff0c;3条命令完成私有化AI格式化服务部署 1. 项目简介&#xff1a;剪贴板智能美化工具 PasteMD是一个完全私有化的AI文本格式化工具&#xff0c;它基于Ollama本地大模型运行框架和强大的llama3:8b模型构建。这个工具的核心…...

编程新知 2026/4/1 13:53:31

2024电子数据取证实战：从手机取证到恶意APP逆向分析

1. 手机取证实战入门&#xff1a;从ADB到蓝牙MAC地址追踪 手机取证是电子数据取证中最常见的场景之一。去年我参与处理的一起案件中&#xff0c;嫌疑人通过恶意APP窃取了受害者通讯录&#xff0c;当时就是通过ADB连接记录锁定了关键证据。先说说ADB这个基础但极其重要的工具。 …...

编程新知 2026/4/1 13:37:10

告别重复劳动：用快马AI智能生成OpenCode风格的高效工具函数

最近在开发一个需要大量表单验证的项目时&#xff0c;我发现每次都要重复写类似的验证逻辑&#xff0c;既浪费时间又容易出错。于是我开始寻找更高效的解决方案&#xff0c;最终在InsCode(快马)平台上找到了理想的工具。 需求分析 表单验证是每个Web项目都绕不开的基础功能。常…...

编程新知 2026/4/1 13:28:58

用STM32F103C8T6做个宠物喂食器：从电路图到代码的保姆级DIY教程

用STM32F103C8T6打造智能宠物喂食器&#xff1a;从硬件搭建到软件调优全流程解析 养宠物的朋友都知道&#xff0c;定时定量喂食对宠物健康至关重要。今天我们就来手把手教你如何用STM32F103C8T6单片机打造一个智能宠物喂食器&#xff0c;不仅能定时投喂&#xff0c;还能识别不…...

编程新知 2026/4/1 13:06:36

C语言实战：构建嵌入式eMMC RPMB安全读写组件

1. eMMC RPMB分区基础解析 我第一次接触RPMB分区是在开发智能门锁项目时&#xff0c;需要存储指纹特征码等敏感数据。传统存储方式容易被篡改&#xff0c;而RPMB完美解决了这个问题。RPMB&#xff08;Replay Protected Memory Block&#xff09;是eMMC芯片中的特殊安全存储区域…...

编程新知 2026/4/1 12:26:15

GreenLuma 2025管理器：Steam游戏库高效管理与解锁解决方案

GreenLuma 2025管理器&#xff1a;Steam游戏库高效管理与解锁解决方案 【免费下载链接】GreenLuma-2025-Manager An app made in python to manage GreenLuma 2025 AppList 项目地址: https://gitcode.com/gh_mirrors/gr/GreenLuma-2025-Manager 在数字娱乐日益丰富的今…...

编程新知 2026/4/1 11:01:22

3步解锁跨设备游戏自由：Sunshine串流技术重构娱乐体验

3步解锁跨设备游戏自由&#xff1a;Sunshine串流技术重构娱乐体验 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 在这个设备爆炸的时代&#xff0c;我们却被硬件束缚得越来越紧。…...

编程新知 2026/4/1 10:51:11

传统文化与现代AI结合：Guohua Diffusion国风绘画商业应用案例

传统文化与现代AI结合&#xff1a;Guohua Diffusion国风绘画商业应用案例 1. 国风绘画生成工具概述 Guohua Diffusion是一款专为国风绘画设计的本地生成工具&#xff0c;基于原生Guohua-Diffusion模型开发。这款工具完美融合了中国传统绘画艺术与现代AI技术&#xff0c;为艺术…...

编程新知 2026/4/1 10:33:00

Qwen3.5-9B-AWQ-4bit实战教程：用‘概括最重要信息’提示词压缩冗余输出

Qwen3.5-9B-AWQ-4bit实战教程&#xff1a;用"概括最重要信息"提示词压缩冗余输出 1. 认识Qwen3.5-9B-AWQ-4bit模型 Qwen3.5-9B-AWQ-4bit是一个强大的多模态AI模型&#xff0c;它能同时理解图片和文字。想象一下&#xff0c;你给这个AI看一张照片&#xff0c;然后问…...

编程新知 2026/4/1 10:02:29

解决tiktoken离线使用难题：手动下载cl100k_base.tiktoken并配置本地缓存的保姆级教程

突破网络限制&#xff1a;tiktoken离线部署全流程实战指南 在自然语言处理领域&#xff0c;token切分是模型处理文本的第一步关键操作。对于依赖GPT系列模型的开发者而言&#xff0c;tiktoken作为OpenAI官方推出的高效tokenizer&#xff0c;其重要性不言而喻。然而&#xff0c;…...

编程新知 2026/4/1 9:19:42