学习笔记-Leaflet加载北京地铁线路

最新推荐文章于 2024-04-19 09:40:04 发布
最新推荐文章于 2024-04-19 09:40:04 发布
阅读量2.4k 收藏 7
点赞数
分类专栏： 前端学习笔记 可视化 GIS 文章标签： Leaflet Geojson 地铁线路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HYB2012/article/details/80056907
版权

内容大纲

Leaflet学习笔记-加载北京地铁线路

先上效果图
这里写图片描述

这里写图片描述
本文主要由两部分组成：

  • 获取线路和站点json
  • Leaflet加载线路和站点GeoJson

获取线路和站点json

高德地图-地铁

路线json（包含站点坐标）
http://map.amap.com/service/subway?_1524027031909&srhdata=1100_drw_beijing.json
站点json（包含时间等）
http://map.amap.com/service/subway?_1524027031912&srhdata=1100_info_beijing.json

路线数据和站点数据都是以线路组织的。

利用高德地图抓取数据

route
最低0.47元/天 解锁文章
波帝伯爵
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
北京市区geojson地图文件
08-02
北京市行政单位geojson地图文件，可结合echarts用于地图数据可视化展示，内含北京市及各区地图文件，区地图展示下辖街道或乡镇，广泛应用于3D地图、自定义区域地图、地铁图、路线图、热度地图等等。
前端绘制地铁路线图
Bunny的博客
09-11 2419
前端绘制地铁路线图
探索Leaflet Ant Path：优雅的轨迹动画效果
最新发布
gitblog_00009的博客
04-19 487
探索Leaflet Ant Path：优雅的轨迹动画效果 项目地址:https://gitcode.com/rubenspgcavalcante/leaflet-ant-path Leaflet Ant Path 是一个基于流行的JavaScript地图库Leaflet.js的扩展插件，它为你的地图线路添加了一种动态、平滑的“蚂蚁爬行”般的动画效果，使得数据可视化更加引人入胜和生动。 项目简介 L...
基于leaflet 的高德离线地图/瓦片地图，以及简单的自定义样式、限制可视范围、右键菜单
zhuanggenhua的博客
11-14 2040
/</
js点击绘制地铁线路图地铁站（可自定义颜色）百度map_subway line
12-20
可支持h5、web端js绘制百度地铁线路图
JQuery绘制北京地铁线路图
04-18
NULL 博文链接：https://w69865399.iteye.com/blog/1836260
react-leaflet-editable-popup:react-leaflet组件，扩展了弹出窗口的功能
05-14
如果您仍在使用react-leaflet @ ^ 2，请使用npm i react-leaflet-editable-popup@^1.0.0 ，或在可编辑的弹出窗口上使用v2 npm i react-leaflet-editable-popup@^1.0.0 。 有关详细信息，请参见部分。安装通过npm...
react-esri-leaflet:对esri-leaflet的成分进行React
04-06
react-esri-leaflet 快速轻松地将esri-leaflet组件引入您的react-leaflet应用程序 要求需要react-leaflet ^ 3和esri-leaflet ^ 3。 要与react-leaflet版本2一起使用，请参阅 。安装要使用这些组件，您必须自己安装...
georaster-layer-for-leaflet:在传单地图上显示GeoTIFF和其他类型的栅格
05-13
通过脚本标签加载软件包 < script src =" https://unpkg.com/georaster-layer-for-leaflet/dist/georaster-layer-for-leaflet.min.js " > 用法 new GeoRasterLayer ( { georaster } ) . addTo ( map ) ; 演示...
rc-leaflet:Leaflet.js的React Map组件
05-02
Leaflet.js的React Map... ClusterPoints (v1.1.0+)将在v1.5.0+弃用，请改用rc-leaflet-cluster CircleMarker 圆圈 折线 多边形 长方形 ImageOverlay (v1.4.0+) VideoOverlay (v1.4.0+) SVGOverlay (v1.4.
leaflet加载百度瓦片并使用百度线路规划
03-05
leaflet加载百度地图瓦片图片，坐标已根据网上提供的方法进行了较正，并调用百度web服务API获取步行线路规划进行展示，可拖拽起始坐标点进行线路更新
结合leaflet粒子效果wind-js-leaflet-master.zip
08-04
本项目“wind-js-leaflet-master”是将Leaflet与粒子效果相结合，以实现风场图的动态模拟，这对于气象学、环境科学或者数据分析等领域具有重要意义。接下来，我们将深入探讨相关知识点。 首先，Leaflet库提供了丰富...
基于Leaflet实现图标旋转角度的效果(附源代码下载)
liu2004051957的博客
12-14 1797
本文将详细描述如何基于Leaflet开发库实现Marker图标旋转角度的应用效果
java调用百度地图api,展示世界地图
见证自己学习,成长的记录
05-16 6872
利用java调用百度地图api,展示世界地图 1.去百度地图官方登录,没有账号的可以创建一个,无需复杂步骤 百度地图官方网址:https://lbsyun.baidu.com/ 首先登陆或者注册 点击控制台 点击应用管理–>我的应用–>创建应用 个人测试的话,应用类型选择浏览器端就行了,Referer白名单只写一个*就行 然后就出现我们刚才创建的应用,注意这个AK密钥,一会用得到 2.创建页面直接复制代码 直接复制代码,把ak密钥改成自己申请创建的即可 <!DOCTYPE htm
LeaFlet学习之聚合效果
weixin_30276935的博客
07-20 1196
leaflet实现聚合效果是通过插件进行的，虽然leaflet是轻量级的但是，许多功能都是没有依赖插件来完成，关于这有缺点也有有点，通过这几天对leaflet感觉一直都在依靠插件完成，本身就两个主题类，map和layer，如果是小型项目展示地图一类的，做一些基本的功能leaflet非常适合，给我最大的感觉leaflet生态环境很好。这里用的不是纯聚合插件，实在聚合插件基础上衍生出的动态移...
正则表达式
weixin_30908103的博客
05-08 126
表达式全集 字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\”匹配“”而“(”则匹配“(”。 ^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。 $ 匹配输入字符串的结束位置。如果设置了RegE...
Arcgis for js实现北京地铁的展示
weixin_30632883的博客
04-09 290
概述： 通过获取百度地铁图数据，将北京市地铁图在Arcgis for js中实现展示。 效果： 初始化效果 放大后 鼠标经过线路高亮并显示名称 点击显示站点信息 实现： 1、获取地铁数据 a、打开百度地铁图 在chrom中输入地址http://map.baidu.com/subways/index.html?c=beijing ...
leaflet实现风场动态粒子效果
HOWER_Z的博客
05-24 2277
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、部分代码摘录（一）velocity插件代码.js（二）插件使用示例代码二、leaflet-velocity数据源格式三、总结 前言 效果实现需要用到一款插件：leaflet-velocity， 来自Github：https://github.com/onaci/leaflet-velocity 演示地址：https://onaci.github.io/leaflet-velocity/ 参考实现：https://www..
vue2-leaflet_vue2-leaflet软件包的MovingMarker插件扩展
07-21
对于vue2-leaflet软件包的MovingMarker插件扩展，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了vue2-leaflet和vue2-leaflet-movingmarker软件包。你可以使用npm或yarn进行安装。 ``` npm install vue2-leaflet vue2-leaflet-movingmarker ``` 2. 在你的Vue组件中，导入所需的库。 ```javascript import { LMap, LTileLayer, LMarker } from 'vue2-leaflet' import 'leaflet/dist/leaflet.css' import 'leaflet-movingmarker/MarkerMoving.css' import 'leaflet-movingmarker/MarkerMoving.js' ``` 3. 在Vue组件中，添加`l-moving-marker`标签，并使用`ref`属性命名。 ```html <template> <l-map :zoom="zoom" :center="center"> <l-tile-layer :url="url"></l-tile-layer> <l-marker :lat-lng="markerLatLng" ref="movingMarker"></l-marker> </l-map> </template> ``` 4. 在Vue组件的`mounted`生命周期钩子中，获取`movingMarker`实例，并使用其API进行动画设置。 ```javascript mounted() { const movingMarker = this.$refs.movingMarker.movingMarker const latLngs = [ [51.5, -0.09], // 起始位置 [52.5, -0.09], // 中间位置 [53.5, -0.09] // 结束位置 ] movingMarker.on('end', () => { // 动画结束时的回调函数 }) movingMarker.startMove(latLngs, 5000) // 每个位置之间的时间间隔为5000毫秒 } ``` 通过以上步骤，你可以在Vue应用中使用vue2-leaflet软件包的MovingMarker插件扩展来创建移动标记的动画效果。请注意，具体的使用方式可能会根据你的项目配置而有所不同，以上仅为示例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值