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,一经查实,立即删除!

相关文章

【链表】83.删除链表中的重复元素

题目 法1&#xff1a;快慢指针 class Solution {public ListNode deleteDuplicates(ListNode head) {if (head null || head.next null) {return head;}ListNode slow head, fast head.next;while (fast ! null) {if (fast.val > slow.val) {slow.next fast;slow sl…

【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…

什么是反射?(详解)

1.什么是反射&#xff1f; 反射是计算机编程中的一个重要概念&#xff0c;它指的是在运行时动态地获取对象的状态信息并对其进行操作的能力。在面向对象编程中&#xff0c;反射通常用于在程序运行时动态地创建对象、调用方法和修改属性等操作。 反射的实现通常依赖于语言提供的…

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;来于“云”的“羽球人”。…

大数据电商公司的卓越之路及api如何应用

一、优秀电商数据公司的特质 数据采集能力&#xff1a;优秀的数据公司具备强大的数据采集能力&#xff0c;能够从各种渠道获取海量、高质量的数据。这不仅包括电商平台、社交媒体等线上渠道&#xff0c;还涵盖线下门店、POS机等传统数据源。全面的数据采集确保了分析的准确性和…

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

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

《微信小程序开发从入门到实战》学习六十九

6.6 网络API 6.6.3 下载文件API 使用 wx.downloadFile 接口是可使小程序发起HTTPS GET请求&#xff0c;下载文件到手机端。 单次下载的最大文件为50MB。接受Obkect参&#xff0c;参支持属性如下&#xff1a; url&#xff08;必填&#xff09;&#xff1a;下载文件的URL he…

LLM Agent零微调范式 ReAct Self Ask

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

三层架构概述

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

几种以root形式启动qt程序的形式,亲测 sudo是有效的

0、环境 操作系统:麒麟V10- aarch64-国防版 注意:以下所示内容均在 麒麟V10平台上得以验证并投入使用,其他平台尚未测试验证。 1、suid 有问题;通过终端/usr/…/hgerasetool 命令行没问题; 通过快捷方式无反应; 2、pkexec pkexec env DISPLAY=$DISPLAY XAUTHORITY=$…

Squid 代理服务器

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

Udp实现一个小型shell

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

阿里巴巴中国站1688商品详情API:获取商品详情的指南和最佳实践

阿里巴巴中国站提供了1688商品详情API&#xff0c;允许开发者通过编程方式获取商品详情信息。以下是使用该API的一般步骤&#xff1a; 注册成为阿里巴巴中国站的会员&#xff0c;并登录到开发者中心。在开发者中心中&#xff0c;找到并进入“API管理”页面。在API管理页面中&a…

web前端媒体查询的知识点

相应式布局和媒体查询是不分家的 写在<style></style>标签里面 /*只有在打印机或打印预览的时候才会应用的样式 没有任何的优先级&#xff0c;只有执行顺序的问题*/ media print{ h1{ background:transparent; } } /*只有在屏幕上才应用的样式&#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? 作…