leaflet学习笔记-leaflet-ajax获取数据(五)

前言

地图开发中都会用一些GeoJSON数据进行渲染,这是用就会需要加载GeoJSON数据,这时就可以使用leaflet-ajax进行数据的获取

数据准备

本文通过阿里云的地图选择器(DataV.GeoAtlas官网)可以找到云南省的GeoJSON数据,访问链接如下https://geo.datav.aliyun.com/areas_v3/bound/530000_full.json

下载leaflet-ajax

本文依旧使用npm下载

npm i leaflet-ajax

使用

本来我以为可以直接用了,但是使用报错,发现leaflet里面的确有L.GeoJSON.AJAX,但是那个L.GeoJSON.AJAX不是我们真正要使用的L.GeoJSON.AJAX,所以必须要重新import,覆盖掉它原来的L.GeoJSON.AJAX,使用的时候才不会报错

    //加载geoJson数据//要先引用import一下leaflet-ajax才能覆盖leaflet带的L.GeoJSON.AJAXlet geoJsonLayer = new L.GeoJSON.AJAX("https://geo.datav.aliyun.com/areas_v3/bound/530000_full.json");geoJsonLayer.addTo(this.mainMap);

效果如下

完成代码如下

<template><div id="mainMap"></div>
</template><script>
import MiniMap from 'leaflet-minimap';
import 'leaflet-ajax';
import "leaflet-minimap/dist/Control.MiniMap.min.css";export default {name: "MainMap",data: () => {return {centerLatLng: [25, 102.7],mainMap: null}},methods: {},mounted() {this.mainMap = L.map('mainMap', {center: [25, 102.7], // 地图中心zoom: 14, //缩放比列zoomControl: true, //禁用 + - 按钮doubleClickZoom: true, // 禁用双击放大attributionControl: false, // 移除右下角leaflet标识});//添加瓦片图层(作为底图备选)let openstreetmapLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(this.mainMap);let somedomainLayer = L.tileLayer('http://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});// 定义一个图层(注意:小地图的layer不能和地图上共用一个,否则无法加载)const minilayer = L.tileLayer(`https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}`);let circle = L.circle(this.centerLatLng, {radius: 100, fillColor: 'red'});let littleton = L.marker([25.61, 102.7]).bindPopup('This is Littleton, CO.');let denver = L.marker([25.61, 102.71]).bindPopup('This is Denver, CO.');let aurora = L.marker([25.61, 102.72]).bindPopup('This is Aurora, CO.');let golden = L.marker([25.61, 102.73]).bindPopup('This is Golden, CO.');//相当于arcgis的featureLayerlet featureGroup = L.featureGroup([circle, littleton, denver, aurora, golden]);featureGroup.addTo(this.mainMap);//聚焦所有的markerlet bound = featureGroup.getBounds();this.mainMap.fitBounds(bound);//基础底图(每次只能有一个)let baseLayers = {openstreetmapLayer,somedomainLayer,};//覆盖图层let overlays = {// circle,// littleton,// denver,// aurora,// golden,'<i style="color:red;">layerGroup</i>': featureGroup};//添加图层管理组件let layerControl = L.control.layers(baseLayers, overlays, {position: 'topright'}).addTo(this.mainMap);//比例尺组件let scaleControl = L.control.scale({imperial: false}).addTo(this.mainMap);let miniMap = new MiniMap(minilayer, {// 鹰眼图配置项,参数非必须,可以忽略使用默认配置width: 200, // 鹰眼图宽度height: 200, // 鹰眼图高度toggleDisplay: true, // 是否显示最小化按钮minimized: false, // 是否最小化位置开始}).addTo(this.mainMap);//自定义图片markerlet myIcon = L.icon({iconUrl: '/icon/test_icon.jpg',iconSize: [42, 42],iconAnchor: [21, 21],popupAnchor: [0, -20],//注意坐标轴的方向// shadowUrl: 'my-icon-shadow.png',// shadowSize: [68, 95],// shadowAnchor: [22, 94]});let customIconMarker = L.marker([25.2, 102.7], {icon: myIcon}).addTo(this.mainMap);customIconMarker.bindPopup('<i style="color:blue;">我现在就在这里,<b style="color: red;">你来打我呀</b></i>');//默认打开popupsetTimeout(() => {customIconMarker.openPopup();});//加载geoJson数据//要先引用import一下leaflet-ajax才能覆盖leaflet带的L.GeoJSON.AJAXlet geoJsonLayer = new L.GeoJSON.AJAX("https://geo.datav.aliyun.com/areas_v3/bound/530000_full.json", {style: {color: 'red'}, onEachFeature: (feature, layer) => {//为每一个feature要素添加label(这里就是显示行政区的名称)let latlng = layer?.getBounds().getCenter();if (latlng) {let div_icon = L.divIcon({html: feature?.properties?.name || '', iconSize: [100], className: 'divIconLabel'});L.marker(latlng, {icon: div_icon}).addTo(this.mainMap);}}});geoJsonLayer.addTo(this.mainMap);}
}
</script><style scoped>#mainMap {width: 100vw;height: 100vh;
}/deep/ .divIconLabel {font-size: 24px;font-weight: bolder;color: blue;
}
</style>

本文只是做了一个简单的引入和基本加载操作,具体的渲染问题,后面会在详细讲述


本文为学习笔记,仅供参考

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

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

相关文章

【C++杂货铺】C++11新特性——可变参数模板

文章目录 一、可变模板参数相关概念的引入二、获取参数包中参数的个数三、递归函数方式展开参数包四、逗号表达式展开参数包五、可变模板参数的实际应用——emplace相关接口5.1 回顾一下 push_back 的三种用法5.2 emplace_back 使用方法介绍5.3 听说 emplace_back 可以提高效率…

MAC电脑安装java开发工具

一、安装brew 1.1、官网地址 链接 1.2、更新地址 二、安装 java brew install openjdk11 三、安装gradle Gradle安装与配置教程 - 知乎 四、GIT 4.1、GIT安装 brew install git 4.2、rsa ssh-keygen -t rsa -C "jhestarbucks.com" 五、自动搭建一个springBoot…

字符串 (5)--- 后缀数组(倍增思想求解)

字符串下标从 1 开始。 字符串 s 的长度为 n。 " 后缀 i" 代指以第 i 个字符开头的后缀&#xff0c;存储时用 i 代表字符串 s 的后缀 s[i ... n]。 后缀数组&#xff08;Suffix Array&#xff09;主要关系到两个数组&#xff1a;sa 和 rk。 后缀数组sa&#xff0c;s…

python基础-01

文章目录 前言一、python中的注释二、变量的数据类型1.Number&#xff08;数字&#xff09;2.Boolean&#xff08;布尔类型&#xff09;—— True 和 False3.String&#xff08;字符串&#xff09;4.List&#xff08;列表&#xff09;5.Tuple&#xff08;元组&#xff09;6.Dic…

详解动态顺序表

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

前端:html+css+js实现CSDN首页

提前说一下&#xff0c;只实现了部分片段哈&#xff01;如下&#xff1a; 前端&#xff1a;htmlcssjs实现CSDN首页 1. 实现效果2. 需要了解的前端知识3. 固定定位的使用4. js 监听的使用4. 参考代码和运行结果 1. 实现效果 我的实现效果为&#xff1a; 原界面如下,网址为&…

LLM Agent零微调范式 ReAct Self Ask

前三章我们分别介绍了思维链的使用&#xff0c;原理和在小模型上的使用。这一章我们正式进入应用层面&#xff0c;聊聊如何把思维链和工具使用结合得到人工智能代理。 要回答我们为什么需要AI代理&#xff1f;代理可以解决哪些问题&#xff1f;可以有以下两个视角 首先是我们…

三层架构概述

三层架构就是把整个软件的代码分为三个层次&#xff0c;分层的目的是&#xff1a;规范代码&#xff0c;大型软件需要团队配合的时候问题就来了&#xff0c;由于每个程序员风格不一样&#xff0c;而开发软件大量的代码风格不统一就会造成后期调试和维护出现问题&#xff0c;然而…

Squid 代理服务器

13.1.1缓存代理概述 作为应用层的代理服务软件&#xff0c;Squid主要提供缓存加速、应用层过滤控制的功能。 1.代理的工作机制 当客户机通过代理来请求Web页面时&#xff0c;指定的代理服务器会先检查自己的缓存&#xff0c;如果缓存中已 经有客户机需要的页面&#xff0c;则直…

Udp实现一个小型shell

实现原理 首先我们要有个客户端和一个服务器&#xff0c;客户端向服务器传递命令。而服务器收到命令后创建一个管道&#xff0c;并fork一个子进程。随后子进程解析命令&#xff0c;再把标准输出换成管道文件&#xff0c;因为命令行命令是自动输出到显示器的&#xff0c;所以我…

英飞凌TC3xx之一起认识GTM系列(一)先来认识GTM架构

英飞凌TC3xx之一起认识GTM系列(一)先来认识GTM架构 1 先来认识GTM的通用架构2 概览2.1 架构的简要说明2.2 架构概述1 先来认识GTM的通用架构 GTM系统使用GTM全局时钟fGTM 运行(本文称为SYS_CLK)。 特点如下: GTM模块由两个主要部分组成: 由博世设计的GTM IP v3.1.5.1 …

【Java 数组解析:探索数组的奇妙世界】

数组的引入 我们先通过一段简单的代码引入数组的概念。 import java.util.Scanner; public class TestArray01{public static void main(String[] args){//功能&#xff1a;键盘录入十个学生的成绩&#xff0c;求和&#xff0c;求平均数&#xff1a;//定义一个求和的变量&…

【我与CSDN的128天】相识相知相守

目录: 相识相知相守 相识 为什么选择写博客? 写博客的目的,我觉得是因为想要记录。记录学习的过程,整理学过的知识,方便今后的复习。 更重要的是热爱分享,分享给别人知识也是一种快乐。 在某一瞬间教会某一个你不认识的人,难道不是一个很酷的事情吗? 为什么选择CSDN? 作…

企业签名分发对移动应用开发者有什么影响

企业签名分发是移动应用开发者在应用程序发布前测试、内部分发和特定的受众群体分发等方面比较常用的一种工具。那对于应用商城分发有啥区别&#xff0c;下面简单的探讨一下。 独立分发能力 通过企业签名分发开发者可以自己决定应用程序的发布时间和方式&#xff0c;不用受应用…

[2024区块链开发入门指引] - 比特币运行原理

一份为小白用户准备的免费区块链基础教程 工欲善其事,必先利其器 Web3开发中&#xff0c;各种工具、教程、社区、语言框架.。。。 种类繁多&#xff0c;是否有一个包罗万象的工具专注与Web3开发和相关资讯能毕其功于一役&#xff1f; 参见另一篇博文&#x1f449; 2024最全面…

Android14之禁掉Selinux的两种方式(一百七十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

uniapp的分包使用记录

UniApp的分包是一种将应用代码划分为多个包的技术。分包的核心思想是将不同部分的代码划分为不同的包&#xff0c;按需加载&#xff0c;从而提高应用性能。使用UniApp的条件编译功能&#xff0c;开发人员可以根据需要将代码划分为多个包。每个包都包含一组页面和组件&#xff0…

大数据Doris(四十五):物化视图选择最优

文章目录 物化视图选择最优 物化视图选择最优 下面详细解释一下第一步最优物化视图是被如何选择出来的。 这里分为两个步骤: 对候选集合进行一个过滤。只要是查询的结果能从物化视图数据计算(取部分行,部分列,或部分行列的聚合)出都可以留在候选集中,过滤完成后候选集合…

RocketMQ源码解析-主从同步原理(HA)

1、关键组件 主从同步的实现逻辑主要在HAService中&#xff0c;在它的构造函数中实例化了几个对象同时在start()方法内执行启动&#xff1a; public class HAService {public HAService(final DefaultMessageStore defaultMessageStore) throws IOException {this.defaultMes…

李宏毅机器学习第二十三周周报 Flow-based model

文章目录 week 23 Flow-based model摘要Abstract一、李宏毅机器学习1.引言2.数学背景2.1Jacobian2.2Determinant2.3Change of Variable Theorem 3.Flow-based Model4.GLOW 二、文献阅读1. 题目2. abstract3. 网络架构3.1 change of variable formula3.2 Coupling layers3.3Prop…