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

leaflet(一)初始化地图

Leaflet 与天地图结合使用,可以通过天地图提供的 API 获取地图瓦片,并在 Leaflet 地图上显示。

1. 安装依赖

首先,确保你已经安装了 Leaflet 和 Vue:

npm install leaflet
npm install vue-leaflet
npm install leaflet.tilelayer.colorfilter   //添加带有颜色过滤器的瓦片层

2. 引入 Leaflet 和样式

在你的 Vue 组件中引入 Leaflet 和其样式文件:

<template><divid="mapDiv"class="map"style="width: 100%; height: 100%; background-color: rgba(15, 44, 80, 0.9) !important;"></div>
</template><script>
import L from "leaflet";
import "leaflet.tilelayer.colorfilter";
import "leaflet/dist/leaflet.css";
let atopMap = null;
export default {mounted() {this.initMap();this.addTianDiTuLayer();},methods: {//初始化地图initMap() {atopMap = L.map("mapDiv", {//参考坐标系crs: L.CRS.EPSG3857,// 中心点(这里是北京)center: [39.89945, 116.40769],//最小显示等级minZoom: 0,//最大显示等级maxZoom: 18,//当前显示等级zoom: 13,zoomControl: false,contextmenu: true,//不添加属性说明控件attributionControl: false,});//定义一个比例尺控件const scaleControl = L.control.scale();//将比例尺控件加载到地图容器中atopMap.addControl(scaleControl);},//增加天地图底图图层addTianDiTuLayer() {// 矢量图+注记// let mapTypes = ['vec_c', 'cva_c'];let mapTypes = ["vec_w", "cva_w"];let layers = [];for (let i = 0, len = mapTypes.length; i < len; i++) {let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${YOUR_API_KEY}`;let layer = L.tileLayer.colorFilter(tdtUrl, {filter: ["grayscale:100%","invert:100%","brightness:60%","hue:220deg","saturate:54%","opacity: 50%",],zoomOffset: 0, // 注意如果是 web 墨卡托投影(EPSG:3857) 请改为 0noWrap: true,bounds: [[-90, -180],[90, 180],],});layers.push(layer);}// LayerGroup 对象L.layerGroup(layers).addTo(atopMap);},}
}
</script><style lang="scss" scoped>
.tdt-tile-pane {.tdt-layer:first-child + .tdt-layer {.tdt-tile-loaded {-webkit-filter: grayscale(100%) invert(100%);opacity: 0.5 !important;}}
}::v-deep .icon-label {color: #fff;width: 70px;text-align: center;font-size: 14px !important;
}::v-deep .tdt-control-container {display: none !important;
}.map {background-color: rgba(15, 44, 80, 0.9) !important;
}
</style>

相关文章:

leaflet(一)初始化地图

Leaflet 与天地图结合使用&#xff0c;可以通过天地图提供的 API 获取地图瓦片&#xff0c;并在 Leaflet 地图上显示。 1. 安装依赖 首先&#xff0c;确保你已经安装了 Leaflet 和 Vue&#xff1a; npm install leaflet npm install vue-leaflet npm install leaflet.tilela…...

Unity开发Hololens项目

Unity打包Hololens设备 目录Visual Studio2019 / Visual Studio2022 远端部署设置Visual Studio2019 / Visual Studio2022 USB部署设置Hololens设备如何查找自身IPHololens设备门户Unity工程内的打包设置 目录 记录下自己做MR相关&#xff1a;Unity和HoloLens设备的历程。 Vi…...

立志最细,FreeRtos的中断管理(Interrupt Management)函数,详解!!!

前言&#xff1a;本文参考&#xff0c;韦东山老师开发文档&#xff0c;连接放在最后。 为什么需要中断管理函数&#xff1f; 在FreeRtos操作系统中&#xff0c;需要实时响应性&#xff0c;也就是随时随地必须保证正常多任务的运行&#xff0c;如果有中断发生&#xff0c;因为中…...

作业2-线性回归的Matlab代码实现

一、前言 相关配置&#xff1a;Matlab 2020a&#xff08;版本的影响应该不大&#xff0c;.m代码基本都能运行&#xff0c;个人感觉就是Simulink对版本的要求高一些&#xff09; 二、任务描述 基于近两节课的理论推导&#xff0c;用代码实现线性回归&#xff0c;并对预测结果进…...

用jQuery在canvas上绘制绝对定位的元素

在Web开发中,我们经常需要在canvas上精确定位和绘制元素。虽然canvas本身不支持DOM元素的定位,但我们可以借助jQuery来实现这一功能。本文将介绍如何使用jQuery在canvas上实现元素的绝对定位。 1. 基本思路 我们的基本思路是: 创建一个包含canvas的容器div将需要定位的元素放…...

Android中 tools:text 和 android:text区别

首先引入命名空间 <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"/androidx.constraintlayout.widget.ConstraintLayout> tools:te…...

Wordpress GutenKit 插件 远程文件写入致RCE漏洞复现(CVE-2024-9234)

0x01 产品简介 GutenKit 是一个WordPress的页面构建器,在 Gutenberg 设计您的下一个 WordPress 网站。借助 Gutenberg 的原生拖放界面、50+ WordPress 块、14+ 多功能模块和 500+ 模板,您可以在几分钟内创建专业、响应迅速的 Web 内容。 0x02 漏洞概述 Wordpress GutenKit…...

Redis历史漏洞未授权RCE复现

Redis是一个开源的内存数据库&#xff0c;它用于存储数据&#xff0c;并提供高性能、可扩展性和丰富的数据结构支持。 Redis复现文章 Redisssrf漏洞利用探测内网 RedisInsight/RedisDesktopManager可视化连接工具 漏洞原理 &#xff08;1&#xff09;redis绑定在 0.0.0.0:…...

Greenhills学习总结

学习背景&#xff1a;近期参与xx项目过程中&#xff0c;遇到较多的关于代码集成编译的知识盲区&#xff0c;因此需要进行相关知识的学习和扫盲。 参考资料&#xff1a;GreenHills2017.7编译手册:本手册是GreenHills 2017.7.14版编译器的软件使用手册。该手册详细介绍了GreenHi…...

【深入学习Redis丨第八篇】详解Redis数据持久化机制

前言 Redis支持两种数据持久化方式&#xff1a;RDB方式和AOF方式。前者会根据配置的规则定时将内存中的数据持久化到硬盘上&#xff0c;后者则是在每次执行写命令之后将命令记录下来。两种持久化方式可以单独使用&#xff0c;但是通常会将两者结合使用。 一、持久化 1.1、什么…...

【27续】c++项目练习

定义一个或多个类&#xff0c;来描述以下需求&#xff1a; 汽车&#xff0c;有多个轮胎&#xff0c;一个发动机&#xff0c;品牌&#xff0c;型号, 价格&#xff0c; 行驶里程。 轮胎&#xff0c;有品牌&#xff0c;尺寸&#xff0c;气压。 发动机&#xff0c;有品牌&#x…...

Lazarus Query转EXCEL功能

Lazarus Query转EXCEL功能 需要用到控件XMLXSDExporter1 procedure SaveToExcel(AQuery:TSQLQuery); var SaveDialog: TSaveDialog; Ext:String; begin SaveDialog : TSaveDialog.Create(nil); SaveDialog.Filter:Excel 97-2003文件(*.xls)|*.XLS; if SaveDialog.Exec…...

AnaTraf | 深入探讨DNS流量分析:保障网络稳定性的关键

目录 什么是DNS流量分析&#xff1f; DNS流量的组成 为什么进行DNS流量分析&#xff1f; DNS流量分析在IT运维中的应用 1. 故障排查 2. 性能监控与优化 3. 安全检测 AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具 在当今数字化时代&#xff0c;互联…...

P1017 [NOIP2000 提高组] 进制转换

题目是意思就是转化 负进制 题干给定内容确实看不懂 我是看了别人的题解才会的 注意点&#xff1a;进制中不能出现负数&#xff08;解决方法 向前借一位 这是核心代码&#xff09;抓住 被除数除数*商余数 if(tp<0){//模是负数 就要转化为正数tp-y;xy;}//自己在纸上模拟一…...

计算机网络—vlan(虚拟局域网)

内容补充 冲突域 如果两台设备同时发送数据&#xff0c;他们的数据会互相干扰&#xff0c;那么他们就处于同一冲突域&#xff0c;例如集线器&#xff08;总线型&#xff0c;所有设备共享带宽&#xff09;的所有端口都处于冲突域。 广播域 如果一台设备发送数据&#xff0c;…...

C++头文件大全及解释

在C编程中&#xff0c;头文件起到了非常重要的作用。它们包含了函数声明、类定义和其他预处理指令&#xff0c;为程序提供了所需的各种功能和库。本文将介绍一些常见的C头文件&#xff0c;并提供具体实例来说明它们的用途和解释。 1. <iostream> 这是C标准库中最常用的头…...

基于 Django 的电商比价系统

想在毕业设计中展示自己的开发能力吗&#xff1f;今天给大家推荐一个绝对能让你脱颖而出的项目——基于 Django 框架的电商比价系统&#xff01;主打实用创新&#xff0c;你一定能用它拿下好成绩&#xff5e;&#x1f929; ✨项目核心功能亮点&#xff1a; 完善的用户系统&…...

Excel重新踩坑2:Excel数据类型;自定义格式(设置显示格式);分列操作;其他常用操作;一些重要操作

0、Excel数据类型&#xff1a;文本、数字、逻辑值、错误值 文本数据类型&#xff1a;输入什么显示什么&#xff1b;常见错误值 VALUE&#xff1a;文本与数字运算&#xff1b; DIV/0&#xff1a;分母为0&#xff1b; NAME&#xff1a;公式名称错误&#xff1b; N/A&#xff1a;…...

python从0快速上手(十四)数据库操作

Python学习&#xff1a;数据库操作篇 在这个信息爆炸的时代&#xff0c;数据库就像是一个个巨大的宝藏库&#xff0c;里面藏着无数珍贵的数据宝石。而Python&#xff0c;就是那把能够打开这些宝藏库的神奇钥匙。在这一章中&#xff0c;我们将一起学习如何使用Python来操作数据…...

【热门主题】000004 案例 Vue.js组件开发

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…...

Ingress-nginx中HTTPS的强制转发

文章目录 在使用aws 的NLB转发流量到ingress时&#xff0c;发现NLP上生成的转发配置不符合正常预期&#xff0c;如下图&#xff1a; ingress-nginx service 配置如下&#xff1a; apiVersion: v1 kind: Service metadata:annotations:service.beta.kubernetes.io/aws-load-b…...

C++深入探寻二叉搜索树:数据管理的智慧之选

✨✨小新课堂开课了&#xff0c;欢迎欢迎~✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C&#xff1a;由浅入深篇 小新的主页&#xff1a;编程版小新-CSDN博客 前言&#xff1a; 我们在前面已经学习过有关…...

Python 文件 I/O 入门指南

Python 文件 I/O 入门指南 文章目录 Python 文件 I/O 入门指南一、文件的打开与关闭二、文件的读取三、文件的写入四、文件的定位五、文件的属性六、处理不同类型的文件七、错误处理八、总结 在 Python 编程中&#xff0c;文件输入输出&#xff08;I/O&#xff09;是一项非常重…...

Atlas800昇腾服务器(型号:3000)—YOLO全系列NPU推理【检测】(五)

服务器配置如下&#xff1a; CPU/NPU&#xff1a;鲲鹏 CPU&#xff08;ARM64&#xff09;A300I pro推理卡 系统&#xff1a;Kylin V10 SP1【下载链接】【安装链接】 驱动与固件版本版本&#xff1a; Ascend-hdk-310p-npu-driver_23.0.1_linux-aarch64.run【下载链接】 Ascend-…...

1.2.3 TCP IP模型

TCP/IP模型&#xff08;接网叔用&#xff09; 网络接口层 网络层 传输层 应用层 理念&#xff1a;如果某些应用需要“数据格式转换”“会话管理功能”&#xff0c;就交给应用层的特定协议去实现 tip&#xff1a;数据 局部正确不等于全局正确 但是&#xff0c;数据的 全局正…...

选择、冒泡和插入排序及其优化版本课件

视频链接&#xff1a;是趣味编程的个人空间-是趣味编程个人主页-哔哩哔哩视频...

Matlab自学笔记三十九:日期时间型数据的算术运算:加减运算

1.说明 时间点和&#xff08;日历&#xff09;持续时间是可加的&#xff0c;结果是时间点&#xff1b;两个时间点是可减的&#xff0c;结果是持续时间&#xff0c;用时分秒表示&#xff1b;时间型和浮点数运算&#xff0c;结果是时间型&#xff0c;浮点数默认单位是天&#xf…...

Java-多线程2

什么是线程&#xff1f; 线程是 cpu调度和执行的单位。 多个线程共享进程的堆和方法区资源&#xff0c;但每个线程有自己的程序计数器、虚拟机栈和本地方法栈。 如何实现线程 继承Thread类 实现步骤&#xff1a; 创建自定义类&#xff0c;继承Thread类 重写run方法 创建自定…...

POWER_CONMETRICS的packet wakeup events触发条件的代码走读

摘要&#xff1a; adb shell dumpsys connmetrics 的packet wakeup events触发条件&#xff1a;首先App是无法控制packet wakeup events的事件日志打印&#xff0c;主要App联网过程中网络状态或配置发生变化时由系统netd自动触发的统计。 通俗理解&#xff1a;目前主要表示触…...

Bug:通过反射修改@Autowired注入Bean的字段,明确存在,报错 NoSuchFieldException

【BUG】通过Autowired注入了一个Bean SeqNo&#xff0c;测试的时候需要修改其中的字段。通过传统的反射&#xff0c;无论如何都拿不到信息&#xff0c;关键是一方面可以通过IDEA跳转&#xff0c;一方面debug也确实能看到这个字段。但是每次调用set方法报错&#xff1a;NoSuchFi…...