Leaflef地图的学习（一）：省份区域的高亮

最新推荐文章于 2023-02-21 15:14:42 发布
VIP文章 最新推荐文章于 2023-02-21 15:14:42 发布 2080 收藏
分类专栏： leaflet 地图 文章标签： 街景地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Crazy_GirlLL/article/details/109365101
版权

环境：vue+nuxt+leaflet

1：地图中心点的确定和缩放层级

引入组件：

其中四个参数为：topleft, topright, bottomleft, bottomright，也适用于所有控件

2：省份区域的高亮

这个需要你想要高亮的省份的数据，也就是这个省份边界的经纬度数组

可以去这个里面去找https://www.tiandi

最低0.47元/天 解锁文章
阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
Crazy_GirlLL
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
使用Leaflet加载TopoJSON数据并显示图形
MbMobile的博客
09-25 2
在本文中，我们将介绍如何使用Leaflet库加载TopoJSON数据并在地图上显示图形。TopoJSON是一种用于表示地理图形的数据格式，与GeoJSON类似，但具有更高的压缩比和更快的性能。接下来，我们需要编写JavaScript代码来加载TopoJSON数据并将其转换为Leaflet可识别的格式。然后，在HTML文件的。上述代码中，我们首先创建了一个Leaflet地图实例，并将其绑定到之前创建的地图容器。在浏览器中打开HTML文件，你应该能够看到加载的地图，并显示了中国各省级行政区划边界。
省份点击高亮显示.rar
06-24
通过在全国地图底图上添加鼠标点击事件，在鼠标移动上和点击时会出现高亮显示，同时也可以通过调整具体显示某个省份的具体信息。
vue实践 Leaflet地图标注（图注，位置）带数字对应显示
Ypromise-的博客
01-29 2076
效果： leaflet地图容器的初始化和图层的加载就不说了，都是基础。 上图用的是天地图,以下是在vue中 步骤 上图效果图主要为地图页面，和右侧列表页面 主页面地图页面 index.vue 里（地图页面）列表页面queryResult <query-result @proQuery="proQuery" @setPoint_zk="setPoint_zk" @clear_marker_layer="clear_marke
leaflet pm绘制图形
当然是最帅气的茶茶丸了！哇耶~
07-05 988
添加pm控件 网址https://www.npmjs.com/package/leaflet.pmhttps://www.npmjs.com/package/leaflet.pm 设置控件语言 给不同图形设置颜色 绘制事件 pmignore设置 设置了pmIgnore的图形不再受leaflet.pm的影响
【自学笔记】openlayers加载天地图笔记二
weixin_46074818的博客
10-19 351
openlayers是开源地图包，它支持加载天地图。 html <body> <div id="tabMap"> </div> </body> css *{ padding: 0; margin: 0; box-sizing: border-box; } body, html{ width: 100%; height: 100%; font-family:"微软雅黑"; } #tabMap{ width:100%; heigh
81.（leaflet篇）leaflet区域高亮（悬浮修改样式）.zip
04-08
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/124034422
leaflet+geoJSON实现绘制区域边界和边界高亮效果
zcylyzhi4的博客
12-04 5059
先展示下效果图： 具体代码如下： geoJSON绘制边界 initNewMap(){ var myStyle = { "color": "#00f", "weight": 2, "opacity": 0.5, "fillColor": 'red', "fillOpacity": 0, }; let JsonUrl = 'http://192.168.37.129:22221/assets/images/
leaflet地图总结（不断更新）
summer_du的博客
03-04 7553
一、创建leaflet地图 输入指令npm install leaflet 页面引入import L from "leaflet"; import "leaflet/dist/leaflet.css" 页面创建展示地图的div<div id="map-container" style="width: 100%;height: 100%;"></div> 初始化地图initMap: function() { //定义图层样式 var layer = L.tileLay
leaflet 鼠标移动到图层时变_leaflet 图层高亮
weixin_34897112的博客
01-16 940
Choropleth Tutorial - Leaflet#map {width: 600px;height: 400px;}#map { width: 800px; height: 500px; }.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; backgroun...
ECharts省份地图数据合集.zip
06-07
ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录中国各个省份的地图JSON数据。ECharts省份地图数据合集。收录...
jQuery中国省份地图选择高亮特效代码
03-20
jQuery中国省份地图选择高亮代码是一款基于Bootstrap库制作下拉框选择中国省份城市插件下载。
省份地图系列图标下载
07-14
省份地图系列图标下载提供12张尺寸为128x128像素的PNG和ICO格式省份地图系列图标下载。
echarts世界地图+中国详细省份
04-24
echarts的 geo: { map: 'world-china', ｝
leaflet在地图上绘制省份、区县边界
技术分享
02-21 415
leaflet在地图上绘制省份、区县边界
leaflet 渲染省份
qq_37550440的博客
03-20 170
效果图： 代码块： <!-- * @Description: * @Version: 2.0 * @Autor: Cookie * @Date: 2022-03-19 16:28:57 * @LastEditors: Zhang * @LastEditTime: 2022-03-19 17:58:59 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF.
React-leaflet在ant-design pro中的基本使用
weixin_30715523的博客
06-12 473
react-leaflet的github地址：https://github.com/PaulLeCam/react-leaflet react-leaflet-markercluster点聚合github地址 :https://github.com/YUzhva/react-leaflet-markercluster 本篇案例github地址：https://github.com/GugaL...
关于Leaflet 地图 遮罩反选
u012420268的博客
02-13 5587
关于Leaflet 地图 遮罩反选 最近项目用到leaflet作为地图开发插件，需要将某个区域突出显示，其余部分隐藏，之前做过百度地图的开发，有过类似的经验，就简单写一下作为记录。 leaflet 地图插件 leaflet:https://leafletjs.com/ 下边就直接进入主题： 1.初始化地图 //加载地图 function initMap() { if(!page.map){ ...
leaflet: 鼠标mouseover显示城市信息,mouseout隐藏信息（067）
大剑师兰特的GIS世界
02-15 387
第067个本示例的目的是介绍演示如何在vue+leaflet中显示城市信息，这里给marker添加鼠标事件，用到了mouseover和mouseout，用于控制信息的显示和隐藏。
echarts地图部分区域高亮显示
最新发布
08-13
要在 Echarts 中实现地图部分区域的高亮显示，你可以使用 Echarts 提供的地图组件和相关配置项来实现。下面是一个简单的示例代码： 首先，确保你已经引入了 Echarts 的 JavaScript 文件。然后，创建一个包含地图的容器，例如一个 `<div>` 元素，并为其设置一个固定的宽度和高度。 ```html <div id="map" style="width: 600px; height: 400px;"></div> ``` 接下来，使用 JavaScript 代码来初始化 Echarts 并配置地图的数据和样式。 ```javascript // 初始化 Echarts var myChart = echarts.init(document.getElementById('map')); // 地图数据配置 var option = { series: [{ type: 'map', map: 'china', // 使用中国地图 itemStyle: { normal: { // 设置默认状态下的地图区域样式 areaColor: '#ccc', borderColor: '#fff', borderWidth: 1 }, emphasis: { // 设置鼠标悬停时的高亮样式 areaColor: '#ff0000', borderColor: '#fff', borderWidth: 1 } }, data: [ {name: '北京', value: 100}, {name: '上海', value: 200}, {name: '广州', value: 300}, // 其他省份的数据... ] }] }; // 将配置项设置给 Echarts 实例 myChart.setOption(option); ``` 在上面的代码中，通过设置 `itemStyle` 中的 `normal` 和 `emphasis` 分别配置了默认状态和高亮状态下的地图区域样式。你可以根据自己的需求来调整这些样式。 最后，使用 `setOption` 方法将配置项设置给 Echarts 实例，即可在页面上显示出地图并实现区域高亮效果。 请注意，上面的示例中使用的是中国地图，你可以根据需要更换为其他地图数据。此外，你还可以根据自己的需求对其他 Echarts 地图配置项进行进一步的调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Crazy_GirlLL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值