vue + leaflet + 天地图实现搜索省份后高亮

实现省份高亮方法最重要的代码在于 L.geoJSON(district).addTo(map)这个方法,district为参数,可以在页面中引入当前省份的坐标json。

获取省份json文件的地址:https://datav.aliyun.com/portal/school/atlas/area_selector

import beijing from '../json/beijing.js';//! 1. 每次先调用 clearLayers 清除所有图层
//! 2. 完了之后在使用 titleLayer 设置图层对象, addTo添加到地图当中export const setLayer = (map, layerObject, district) => {clearLayers(map);const { spherical, mapLabel } = layerObject;let layer = L.tileLayer(spherical, {subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],//8个子域可用maxZoom: 18,//最大缩放minZoom: 1,//最小缩放});layer.addTo(map);//添加图层//实现省份高亮方法L.geoJSON(district).addTo(map);// L.geoJSON(beijing).addTo(map);// L.geoJSON(hebei).addTo(map);//! 有些地图图层类型,可能没有 label 标注 这里判断if (!mapLabel || Object.keys(mapLabel).length === 0) {return;}const { spherical: sphericalLabel } = mapLabel;let layerLabel = L.tileLayer(sphericalLabel, {subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],maxZoom: 18,minZoom: 1});layerLabel.addTo(map);// 创建marker聚合层const markers = L.markerClusterGroup();//创建一个新的聚合标记组 (markers),用于将多个标记聚合在一起显示。// 创建一个自定义的LayerGroup来控制层级const layerGroup = L.layerGroup([markers]);layerGroup.addTo(map);// 设置层级,注意这个方法会将图层在地图中移到指定位置layerGroup.setZIndex(9999999999999999999999); // 设置图层的层级// 将markers保存到map对象上,以便后续使用map.markers = markers;map.layerGroup = layerGroup;
}

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

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

相关文章

【machine learning-七-线性回归之成本函数】

监督学习之cost function 成本函数权重、偏置如何实现拟合数据成本函数是如何寻找出来w和b,使成本函数值最小化? 在线性回归中,我们说到评估模型训练中好坏的一个方法,是用成本函数来衡量,下面来详细介绍一下 成本函数…

【Unity】对象池 - 未更新完

自定义泛型对象池 文章目录 自定义泛型对象池封装泛型类例子 使用Unity自带对象池 封装泛型类 public abstract class MyPool<T> : MonoBehaviour where T :Component {[SerializeField] protected T prefab; // 生成的预制体[SerializeField] protected int defaultNum…

.Net日志组件之NLog的使用和配置

文章目录 .Net日志组件之NLog的使用和配置1、新建.Net8控制台项目2、Nuget安装NLog组件3、添加配置文件nlog.config4、右键文件nlog.config&#xff0c;修改属性为“始终复制 or 较新则复制”5、编写nlog.config配置文件内容6、编写c#代码测试记录简单日志7、编写c#代码测试记录…

苹果CMS插件:优化蜘蛛访问内容,提升百度收录率

确保蜘蛛抓取原始内容 专为苹果CMS设计的广告管理插件&#xff0c;能够智能识别搜索引擎蜘蛛与普通访客&#xff0c;确保蜘蛛访问时展示原始内容&#xff0c;从而提升被百度等搜索引擎收录的几率。 广告显示提升收益 对于普通访客&#xff0c;该插件则优先显示广告内容&#…

【HTTP】认识 URL 和 URL encode

文章目录 认识 URLURL 基本格式**带层次的文件路径****查询字符串****片段标识符** URL encode 认识 URL 计算机中非常重要的概念&#xff0c;并不仅仅是在 HTTP 中使用。用来描述一个网络资源所处的位置&#xff0c;全称“唯一资源定位符” URI 是“唯一资源标识符“严格的说…

Java 数据类型转换详解:隐式转换(自动转换)与强制转换(手动转换)

目录 前言 取值范围从小到大的关系&#xff1a; 隐式转换&#xff08;自动转换&#xff09; &#x1f4dc;示例 1&#xff1a;基本类型隐式转换 &#x1f4dc;示例 2&#xff1a;算术运算中的类型提升 &#x1f4dc;示例 3&#xff1a;byte、short 和 char 的自动转换 隐…

排序的实现

1&#xff0c;插入排序 时间复杂度O(N) 思路&#xff1a;当插入第i个元素时&#xff0c;前面i-1个元素已经排好&#xff0c;将第i个元素与前面的元素比较&#xff0c;找到插入的位置&#xff0c;原来位置的元素向后挪。 动图展示&#xff1a; 从上图可以看出&#xff0c;先把…

CS61C 2020计算机组成原理Lab03

Exercise 1: Familiarizing yourself with Venus .data .word 2, 4, 6, 8 n: .word 9.text main: # add t0, x0, x0# addi 是 "add immediate"&#xff08;立即数加法&#xff09;的缩写&#xff0c;表示这是一个加法指令&#xff0c;其中一个加数是一个立即数&am…

macos tcl-tk python图形库软件包安装 port 和brew 包管理工具安装方法和使用总结

macos下安装这个tcl-tk 图形库&#xff0c; 使用port和brew 安装时是不一样的&#xff0c; 软件包名称不一样&#xff0c;安装后的软件文件路径信息也不一样。 在brew 包管理工具中&#xff0c;这个软件包的名称就是tcl-tk&#xff0c; 安装方法为 brew install tcl-tk , 而…

昂科烧录器支持Senasic琻捷电子的蓝牙低功耗芯片SNP746

芯片烧录行业领导者-昂科技术近日发布最新的烧录软件更新及新增支持的芯片型号列表&#xff0c;其中Senasic琻捷电子的蓝牙低功耗芯片SNP746已经被昂科的通用烧录平台AP8000所支持。 SNP746是一款蓝牙低功耗芯片&#xff0c;集成了压力传感器和加速度传感器的测量电路。它是为…

表达式求值(综合应用的难题)

一、各种表达式的含义与操作 请看下面链接里面的博客吧&#xff0c;这是一位大佬写的&#xff0c;里面的图很是不错&#xff0c;可以看看。 各种表达式的概念与操作 二、题目 给定一个表达式&#xff0c;其中运算符仅包含 ,-,*,/&#xff08;加 减 乘 整除&#xff09;&…

产业报告 | 2024年中国机器人产业研究报告

近日&#xff0c;世界机器人大会在北京亦庄国际会展中心举办。据悉&#xff0c;这是国内最大的机器人展会&#xff0c;今年的展会规模更是创下新高&#xff0c;共有169家企业参展&#xff0c;展出的产品数量超过600款&#xff0c;观展人次超过30万&#xff0c;足见各行各业对机…

QT widgets 窗口缩放,自适应窗口大小进行布局

1. 窗口布局 2. 尺寸策略&#xff1a;扩展 Fixed (固定): 行为&#xff1a;控件的大小是固定的&#xff0c;不会随着窗口大小的变化而改变。它的大小由控件的 sizeHint() 返回的值决定。 适用场景&#xff1a;当你希望控件的大小保持不变&#xff0c;不随布局调整时使用&#x…

前端vue-插值表达式和v-html的区别

创建vue实例的时候&#xff0c;可以有两种形式。 1.let appnew Vue({}) 2 const appnew Vue({}) 3 el是挂载点&#xff0c;是上面div的id值 4 data中的值可以展示在上面div中 5 v-html标签里面如果有内容&#xff0c;则我们的新内容会把标签里面的内容覆盖掉

解决 Torch not compiled with CUDA enabled 问题 | MiniCPM3-4B 【应用开发笔记】

最近在研究测试MiniCPM3-4B&#xff0c;这里记录一下遇到的cuda和torch版本问题 在调试和运行MiniCPM3-4B过程中如果出现找不到某个包&#xff0c;就用pip进行安装&#xff0c;如果提示GPU相关的问题则需要进一步检查 解决 Torch not compiled with CUDA enabled 问题 一、查看…

Arthas 全攻略:让调试变得简单

文章目录 一、简介二、命令列表 一、简介 注意 &#xff1a; 我安装的版本是&#xff1a;Arthas V3.7.2 官网&#xff1a;https://arthas.aliyun.com/doc/ 相关错误解决方案请看GitHub&#xff1a;https://github.com/alibaba/arthas/issues Alibaba开源的Java诊断工具。 从…

我的AI工具箱Tauri版-MicrosoftTTS文本转语音

本教程基于自研的AI工具箱Tauri版进行MicrosoftTTS文本转语音服务。 MicrosoftTTS文本转语音服务 是自研的AI工具箱Tauri版中的一款功能模块&#xff0c;专为实现高效的文本转语音操作而设计。通过集成微软TTS服务&#xff0c;用户可以将大量文本自动转换为自然流畅的语音文件…

圣多纳释放法,达到内心的平静

圣多纳释放法的关键在于&#xff1a;我们被情绪控制时&#xff0c;不应该压抑情绪或是发泄情绪。 利用释放法处理情绪是最健康的方法&#xff0c;可以帮助我们获得自由与平静。当我们面对讨厌的人时&#xff0c;我们真正要做的并非压抑或者爆发&#xff0c;而是将“讨厌”这种…

仪表放大器AD620

AD623 是一款低功耗、高精度的仪表放大器&#xff0c;而不是轨到轨运算放大器。它的输入电压范围并不覆盖整个电源电压&#xff08;轨到轨&#xff09;&#xff0c;但在单电源供电下可以处理接近地电位的输入信号。 AD620 和 AD623 都是仪表放大器&#xff0c;但它们在一些关键…

HTB-Netmon(prtg配置文件获取,CVE-2018-9276复现)

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天给大家讲解Netmon靶机 渗透流程 信息搜集 服务器开放了80HTTP、21FTP(匿名登录)、445SMB服务 FTP匿名登录 获取敏感文件 登录后台 网站登录需要 账号、密码 &#xff0c;尝试去FTP服务 碰下运气 通过翻阅ft…