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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

应急指挥系统总体架构方案

引言 应急指挥系统总体架构方案旨在构建一个高效、智能的应急管理体系&#xff0c;以应对自然灾害、事故灾难等突发事件&#xff0c;保障人民生命财产安全。 背景与挑战 近年来&#xff0c;安全生产形势严峻&#xff0c;自然灾害事故频发&#xff0c;对应急指挥系统的要求越…

如何用CSS3创建圆角矩形并居中显示?

在网页设计中&#xff0c;圆角矩形因其美观和现代感而被广泛使用&#xff0c;居中显示元素也是一个常见的需求。今天&#xff0c;我们将学习如何使用CSS3的border-radius属性来创建圆角矩形&#xff0c;并将其居中显示在页面上。 如果你正在学习CSS&#xff0c;那么这个实例将非…

spring boot 异步线程池的使用

创建Spring Boot项目 首先&#xff0c;你需要创建一个Spring Boot项目。你可以使用Spring Initializr&#xff08;https://start.spring.io/&#xff09;来快速生成项目结构。 添加异步支持依赖 在你的pom.xml文件中&#xff0c;确保你已经添加了Spring Boot的starter依赖&…

UE5通过蓝图节点控制材质参数

通过蓝图节点控制材质的参数 蓝图节点 在材质上设置标量值 和 在材质上设置向量参数值 Set Scalar Parameter Value on Materials Set Vector Parameter Value on Materials 这两个蓝图节点都可以在蓝图中&#xff0c;控制材质的参数值和向量值

canvas+fabric实现时间刻度尺(二)

前言 我们前面实现了时间刻度尺&#xff0c;鼠标移动显示时间&#xff0c;接下来我们实现鼠标点击某个时间进行弹框。 效果 实现 1.监听鼠标按下事件 2.编写弹框页面 3.时间转换 <template><div><canvas id"rulerCanvas" width"1200"…

手机实时提取SIM卡打电话的信令声音-双卡手机来电如何获取哪一个卡的来电

手机实时提取SIM卡打电话的信令声音 --双卡手机来电如何获取哪一个卡的来电 一、前言 前面的篇章《手机实时提取SIM卡打电话的信令声音-智能拨号器的双SIM卡切换方案》中&#xff0c;我们论述了局域网SIP坐席通过手机外呼出去时&#xff0c;手机中主副卡的呼叫调度策略。 但…

离线语音识别+青云客语音机器人(幼儿园级别教程)

1、使用步骤 确保已安装以下库&#xff1a; pip install vosk sounddevice requests pyttsx3 2、下载 Vosk 模型&#xff1a; 下载适合的中文模型&#xff0c;如 vosk-model-small-cn-0.22。 下载地址&#xff1a; https://alphacephei.com/vosk/models 将模型解压后放置在…

Streaming Dense Video Captioning

原文出处 CVPR 原文链接 [2404.01297] Streaming Dense Video Captioninghttps://arxiv.org/abs/2404.01297 原文笔记 What 1、提出了一种基于聚类传入token的新记忆模块&#xff0c;该模块可以处理任意长的视频&#xff0c;并且可以在不访问视频所有帧的情况下处理视频(…

TCP 连接:三次握手与四次挥手

TCP 协议&#xff0c;全称为“传输控制协议”。 1. TCP 协议段格式 给出几个定义 &#xff1a; 16位源端口号 &#xff1a;用于标识发送端的应用程序。 16位目的端口号 &#xff1a;用于标识接收端的目标应用程序。 32位序号 &#xff1a;用于标识发送的每一个字节流中的第一…

IDEA+Docker一键部署项目SpringBoot项目

文章目录 1. 部署项目的传统方式2. 前置工作3. SSH配置4. 连接Docker守护进程5. 创建简单的SpringBoot应用程序6. 编写Dockerfile文件7. 配置远程部署 7.1 创建配置7.2 绑定端口7.3 添加执行前要运行的任务 8. 部署项目9. 开放防火墙的 11020 端口10. 访问项目11. 可能遇到的问…

【机器学习】回归

文章目录 1. 如何训练回归问题2. 泛化能力3. 误差来源4. 正则化5. 交叉验证 1. 如何训练回归问题 第一步&#xff1a;定义模型 线性模型&#xff1a; y ^ b ∑ j w j x j \hat{y} b \sum_{j} w_j x_j y^​b∑j​wj​xj​ 其中&#xff0c;( w ) 是权重&#xff0c;( b )…

C++ 设计模式:状态模式(State Pattern)

链接&#xff1a;C 设计模式 链接&#xff1a;C 设计模式 - 备忘录 状态模式&#xff08;State Pattern&#xff09;是一种行为设计模式&#xff0c;它允许对象在内部状态改变时改变其行为。状态模式将状态的行为封装在独立的状态类中&#xff0c;并将状态的切换逻辑委托给这些…

redis开发与运维-redis0401-补充-redis流水线与Jedis执行流水线

文章目录 【README】【1】redis流水线Pipeline【1.1】redis流水线概念【1.2】redis流水线性能测试【1.2.1】使用流水线与未使用流水线的性能对比【1.2.2】使用流水线与redis原生批量命令的性能对比【1.2.3】流水线缺点 【1.3】Jedis客户端执行流水线【1.3.1】Jedis客户端执行流…

leetcode hot 100 杨辉三角

118. 杨辉三角 已解答 简单 相关标签 相关企业 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 class Solution(object):def generate(self, numRows):""":ty…

Uncaught ReferenceError: __VUE_HMR_RUNTIME__ is not defined

Syntax Error: Error: vitejs/plugin-vue requires vue (>3.2.13) or vue/compiler-sfc to be present in the dependency tree. 第一步 npm install vue/compiler-sfc npm run dev 运行成功&#xff0c;本地打开页面是空白&#xff0c;控制台报错 重新下载了vue-loa…

【微服务】【Sentinel】认识Sentinel

文章目录 1. 雪崩问题2. 解决方案3. 服务保护技术对比4. 安装 Sentinel4.1 启动控制台4.2 客户端接入控制台 参考资料: 1. 雪崩问题 微服务调用链路中的某个服务故障&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是雪崩。动图演示&#xff1a; 在微服务系统…

【Python运维】构建基于Python的自动化运维平台:用Flask和Celery

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在现代IT运维中,自动化运维平台扮演着至关重要的角色,它能够显著提高运维效率,减少人为错误,并且增强系统的可维护性。本文将引导读者如…

STM32完全学习——使用定时器1精确延时

一、定时器的相关配置 首先一定要是递减定时器&#xff0c;递增的不太行&#xff0c;控制的不够准确&#xff0c;其次在大于10微秒的延时是非常准确的&#xff0c;小于的话&#xff0c;就没有那没准&#xff0c;但是凑合能用。误差都在一个微秒以内。使用高级定时器也就是时钟…

connect to host github.com port 22: Connection timed out 的解决方法

原因是 Github 被 GFW 屏蔽了。 Windows 系统&#xff0c;打开 C:\Windows\System32\drivers\etc&#xff0c;复制其中的 hosts 文件至桌面&#xff0c;用文本编辑器或者其他工具打开。 复制以下内容进去&#xff1a; 140.82.114.4 github.com 151.101.1.6 github.global.ss…

PyTorch中的autocast:混合精度训练的实现原理

PyTorch中的autocast&#xff1a;混合精度训练的实现原理 在深度学习中&#xff0c;尤其是在训练大型模型时&#xff0c;计算资源和显存消耗往往是非常关键的因素。为了优化这些问题&#xff0c;混合精度训练&#xff08;Mixed Precision Training&#xff09;应运而生。autoc…