vue3 ts 集成 supermap

news2024/9/18 14:55:52

文章目录

  • 1. 依赖安装
  • 2. 模块声明
  • 3. css 全局引入
  • 4. 地图加载

1. 依赖安装

	npm install @supermapgis/iclient-leaflet
	npm install leaflet

2. 模块声明

env.d.ts

declare module 'leaflet' {
	const L: any;
	export default L;
}

declare module '@supermapgis/iclient-leaflet'

在这里插入图片描述

3. css 全局引入

import 'leaflet/dist/leaflet.css'
import '@supermapgis/iclient-leaflet/dist/iclient-leaflet.min.css'

在这里插入图片描述

4. 地图加载

<template>
	<div id="map" class="map-container1"></div>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import L from 'leaflet'
	import {  TiledMapLayer  } from '@supermapgis/iclient-leaflet'

	let url = 'http://192.168.1.51:8090/iserver/services/map-China10_test1/rest/maps/Xingkaihu_R%40mapFeatureTest1'

	var map: any = {}
	onMounted(() => {
    console.log("load map")
        map = L.map('map', {
            crs: L.CRS.EPSG4326,
            center: { lon: 132.42, lat: 44.94 },
            maxZoom: 18,
            zoom: 9,
        });
        new TiledMapLayer(url).addTo(map);
})
<script>

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

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

相关文章

高数3.5 极值与最值

1. 极值 1.1. 定义 1.2. 推论 1.3. 求极值的步骤 1.3.1 方法1 1.3.1.1 例题

BCLinux8.*构建部署nmap 7.95

定义SPEC文件 首先从nmap的github上下载SPEC定义文件&#xff0c;然后进行修改&#xff0c;如下&#xff1a; # To build a static RPM, add # --define "static 1" # to the rpmbuild command line. To build without Ncat, add # --define "buildnc…

FastHTML:使用 Python 彻底改变 Web 开发

什么是 FastHTML&#xff1f;&#x1f310; FastHTML 是一个现代 Python Web 应用程序框架&#xff0c;其真正目的是让 Python 开发人员轻松进行 Web 开发。它大大减少了对 JavaScript 和 CSS 构建交互式和可扩展 Web 应用程序的依赖。FastHTML 通过使用 Python 对象来表示 HTM…

centos虚拟机IP地址频繁变化的原因及解决策略

文章目录 centos虚拟机IP地址频繁变化的原因及解决策略虚拟机IP地址变化的原因解决虚拟机IP地址变化的策略1. 使用静态IP地址Windows系统&#xff1a;Linux系统&#xff1a; 2. 配置DHCP保留3. 使用虚拟化平台的网络功能4. 检查和更新网络驱动程序5. 优化网络配置脚本6. 监控和…

BIO,NIO,AIO编程实战

写在前面 关于IO分类以及IO模型等理论知识&#xff0c;可以参考io之io分类和io模型这篇文章。本文主要来实现Java中相关IO模型实现程序。 1&#xff1a;BIO blocking io&#xff0c;是Java io中对阻塞IO模型的具体实现。 因为不管是server端还是client端&#xff0c;都需要…

JavaSE的【反射】和【动态代理】

作为JavaSE的两个个基础知识&#xff0c;【反射】和【动态代理】被广泛运用到spring、spring boot、mybatis......等等各种地方&#xff0c;等到后面的学习中反复提到这个知识点就会开始懵逼&#xff0c;而且这两个知识点其实也是紧密相连的&#xff0c;很多文章和课程里也并没…

零基础STM32单片机编程入门(三十七) MPU6050陀螺仪传感器详解及实战源码

文章目录 一.概要二.MPU6050芯片介绍1.MEMS传感器原理2.MPU6050芯片简介3.芯片引脚定义4.XYZ轴方向5.芯片内部框图6.芯片常用寄存器 三.MPU6050模块原理图及与模块接口定义使用四.STM32单片机驱动MPU6050读取加速度角速度值实验五.CubeMX工程源代码下载六.小结 一.概要 MPU605…

嵌入式面经篇六——寄存器与存储器

文章目录 前言一、寄存器与存储器1、ARM 的 31 个通用寄存器 R0~R15 中&#xff0c;程序计数器 PC 为 R15、程序链接寄存器 LR 为 R14、堆栈指针寄存器 SP 为 R13。2、寄存器掉电会丢失数据吗&#xff1f;3、NOR Flash 与 NAND Flash 的区别&#xff1f;4、SRAM、DRAM、SDRAM的…

使用Python创建省份城市地图选择器

在这篇博客中&#xff0c;我们将探讨如何使用Python创建一个简单而实用的省份城市地图选择器。这个项目不仅能帮助我们学习Python的基础知识&#xff0c;还能让我们了解如何处理JSON数据和集成网页浏览器到桌面应用程序中。 C:\pythoncode\new\geographicgooglemap.py 全部代码…

Camtasia 2024破解版安装教程+汉化补丁激活2024 破解版激活码

最近&#xff0c;我在网上冲浪的时候&#xff0c;发现了一款录屏软件——Camtasia 2024。它不仅功能丰富&#xff0c;而且操作简单&#xff0c;简直是我的录屏利器&#xff01;今天&#xff0c;我就来给大家分享一下这款软件的最新功能&#xff0c;让你们也感受一下它的魔力&am…

【LeetCode:3137. K 周期字符串需要的最少操作次数 | 哈希表 + 子串计数】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

政务网站(.gov)专用SSL/HTTPS证书

政府网站在选择SSL证书时不仅需要遵循网络安全法规以及密评整改&#xff0c;更要提升公众信任度。国产服务商提供的专业版SSL证书&#xff0c;全方位符合政务部门对SSL证书的要求 1 算法要求 政务服务网站需要落实等保制度、密评制度&#xff0c;在密码应用上可选择国密算法S…

从0到1教你搭建Android自动化python+appium环境(超详细~)

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、需要软件 1. JDK:JAVA安装后配置JDK环境 2. SDK:SDK下载后配置adb环境 3. Python:pyhton语言 4. Pycharm:python脚本编译工具 5. Appium-python-clien…

如何巧妙构建“LDAPS”服务器利用JNDI注入

前段时间看到群友问了这样一个问题&#xff1a; ldap:和rmi:关键字被拦截了&#xff0c;是否还可以进行JNDI注入。方法很简单&#xff0c;就是使用ldaps&#xff0c;但后来发现很多人并不知道怎么搭建LDAPS服务器&#xff0c;正好CoNote里有这个功能&#xff0c;写篇简单的文章…

【大模型】LLM工作原理简述

LLM&#xff0c;即large-language-model&#xff0c;大语言模型。 我们可以观察LLM大模型比如豆包在回复的时候&#xff0c;是不是一个一个字&#xff0c;行业里称之为流式输出的方式给你呈现内容的。为什么会这样呢&#xff1f;这是因为&#xff0c;大模型确实是在一个字一个…

Libero编译怪事(1)计数达不到目标值

最近在开发Libero工程&#xff0c;芯片是AGLN250V2。 其中一段计数的程序&#xff0c;声明了一个integer参数。当该参数大于某一值时&#xff0c;执行状态跳转。 编译烧写后&#xff0c;程序一直无法实现跳转。 以为是由于integer是有符号的&#xff0c;可能出现负值&#x…

IDEA中查看接口的所有实现类和具体实现类

1.IDEA中接口的所有实现类查看 1.CTRLH(hierarchy 结构) 我们选中要查看的接口 按住快捷键ctrlh 在界面右侧可以看到该接口的所有可能实现类 2.右击diagrams->show diagram 选中要查看的接口 右击选择diagrams->show diagram 即可以以图表的方式查看接口和所有实现类…

英智金融行业AI Agent,在金融领域全场景下的业务创新与应用实践

随着全球经济的数字化转型&#xff0c;金融行业也在迅速演变。传统的金融服务已经无法完全满足现代客户对快速、个性化和高效服务的需求。与此同时&#xff0c;市场竞争的加剧、监管环境的变化以及客户期望的提升&#xff0c;促使金融机构不断寻求新的技术来优化运营效率、提升…

设计模式---简单工厂模式

简单工厂模式&#xff08;Simple Factory Pattern&#xff09; 是一种创建型设计模式&#xff0c;它定义了一个工厂类&#xff0c;通过这个工厂类可以创建不同类型的对象。简单工厂模式的主要目的是将对象的创建逻辑集中在一个地方&#xff0c;简化客户端的代码&#xff0c;使得…

代码复现改进

代码复现&#xff0c;文献复现&#xff0c;文章复现&#xff0c; 算法复现&#xff0c;科研复现 Matlab,Python中英文均可 保证质量&#xff0c;加快你的研究速度 代码改进跑通&#xff0c;模型优化改进