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

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

news 2025/6/17 22:24:46

作者：刘大

前言

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/6/16 16:25:53

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/6/15 12:23:01

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/6/15 18:21:19

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/6/15 12:41:08

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/6/15 15:43:54

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/6/15 11:45:56

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

编程新知 2025/6/13 6:30:48

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2025/6/16 7:04:17

【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

编程新知 2025/6/17 5:18:17

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/6/16 17:24:59