echarts地图 绘制部分上海市公交线路数据
2024-04-15 18:09:01
源代码地址
MyHTML/roadMap.html at gh-pages · a1115040996/MyHTML · GitHub
预览地址
https://a1115040996.github.io/MyHTML/echarts/roadMap.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;border: 0;}html,body{width: 100%;height: 100%;}</style></head><body><div id="box" style="width: 100%;height: 100%;"></div><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bmap.min.js" type="text/javascript" charset="utf-8"></script><!-- 使用的是2.0版本的地图数据 --><script src="http://api.map.baidu.com/api?v=3.0&ak=UAumsTfvpKBlNPUd9e5PvAEnR0YGNllO" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// const searchList = ["770路","771路","774路","775路","776路","778路","779路","780路","781路","783路","784路","784路区间","785路","787路","789路","790路","791路","793路B线","793路","794路","795路","798路","799路","801路","802路","804路","806路","807路","808路","809路","810路","812路","813路","816路","817路","818路","819路","822路","823路","824路","825路","829路","830路","836路","837路","842路","843路","844路","845路","848路","849路","850路","851路","854路","855路","856路","858路","860路","862路","863路","864路","868路","869路","870路","871路","875路","876路","909路"];// 上海市暂时添加这几个公交线路数据 后期再补busLines = [{"coords":[[121.448029,31.198981],[121.448319,31.19844],[121.423055,31.179337],[121.423241,31.17883],[121.423274,31.178741],[121.423556,31.177975],[121.423786,31.177349],[121.423793,31.177329],[121.423796,31.177322],[121.424074,31.176597],[121.424074,31.176597],[121.424202,31.176189],[121.424362,31.175681],[121.424702,31.174598],[121.424771,31.1743],[121.425043,31.173124],[121.42508,31.172964],[121.42508,31.172964],[121.425099,31.172824],[121.425219,31.171954],[121.42522,31.171947],[121.425419,31.170691],[121.425552,31.169854],[121.425601,31.169545],[121.42571,31.168856],[121.425778,31.168427],[121.425778,31.168426],[121.425898,31.167737],[121.426078,31.166702],[121.426132,31.166393],[121.426179,31.166124],[121.426379,31.164977],[121.426457,31.164528],[121.426457,31.164528],[121.4258,31.164317],[121.423929,31.163844],[121.423301,31.163685],[121.421621,31.16326],[121.421046,31.163115],[121.421033,31.163112]],"lineStyle":{"normal":{"color":"rgba(135, 206, 235, 1)"}}}]const option = {bmap: {center: [121.494687,31.23937],zoom: 12,roam: true,mapStyle: {'styleJson': [{'featureType': 'water','elementType': 'all','stylers': {'color': '#031628'}},{'featureType': 'land','elementType': 'geometry','stylers': {'color': '#000102'}},{'featureType': 'highway','elementType': 'all','stylers': {'visibility': 'off'}},{'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'arterial','elementType': 'geometry.stroke','stylers': {'color': '#0b3d51'}},{'featureType': 'local','elementType': 'geometry','stylers': {'color': '#000000'}},{'featureType': 'railway','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'railway','elementType': 'geometry.stroke','stylers': {'color': '#08304b'}},{'featureType': 'subway','elementType': 'geometry','stylers': {// 'color': '#000000',// 默认透明显示地铁线路'lightness': -70}},{'featureType': 'building','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'all','elementType': 'labels.text.fill','stylers': {'color': '#857f7f'}},{'featureType': 'all','elementType': 'labels.text.stroke','stylers': {'color': '#000000'}},{'featureType': 'building','elementType': 'geometry','stylers': {'color': '#022338'}},{'featureType': 'green','elementType': 'geometry','stylers': {'color': '#062032'}},{'featureType': 'boundary','elementType': 'all','stylers': {'color': '#465b6c'}},{'featureType': 'manmade','elementType': 'all','stylers': {'color': '#022338'}},{'featureType': 'label','elementType': 'all','stylers': {'visibility': 'off'}}]}},series: [{type: 'lines',coordinateSystem: 'bmap',polyline: true,data: busLines,silent: true,lineStyle: {normal: {// color: '#c23531',// color: 'rgb(200, 35, 45)',opacity: 0.4,width: 2.5}},progressiveThreshold: 500,progressive: 200}, {type: 'lines',coordinateSystem: 'bmap',polyline: true,data: busLines,lineStyle: {normal: {width: 0}},effect: {constantSpeed: 50,show: true,trailLength: 0.6,symbolSize: 3},zlevel: 1}]};const myChart = echarts.init(document.getElementById('box'));myChart.setOption(option);</script></body>
</html>echarts地图 绘制部分上海市公交线路数据相关推荐
- 公交线路数据的爬取与分析
1.某市某条公交线路数据的爬取分析 1.创建属于自己的API的key值,我创建的应用类型为出行 2.高德地图开发文档的内容解析 1.定位到Web服务API 这里包含有第一步怎么获取Key值. 1.地理 ...
- Echarts地图 绘制自定义区域 - geojson.io使用方法
Echarts地图 绘制自定义区域 & 解决区域点击无效 1. 绘制地图自定义区域 需求:绘制带高新区的河源市地图,目前百度地图json还没有此新区.需手动绘制. STEP1:获取市区json ...
- BaiduMap---百度地图官方Demo之公交线路查询功能（介绍查询公交线路功能）
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- echarts地图绘制
ceharts 地图绘制 效果图 js引入 // An highlighted block<script src="./echarts.js"></script& ...
- ECharts 地图绘制
地图模拟实例(数据不具真实性仅供学习) 在绘制之前我们要了解一些Echarts的一些基本的组件: 1.geo geo 是 ECharts 图表的地理坐标系组件. ECharts 中地理坐标系组件可以用 ...
- echarts地图自定义，上海市崇明区陆地地图
1.生成地图json文件网址 https://datav.aliyun.com/portal/school/atlas/area_generator 例如使用的是崇明区,发现json文件是整个崇明区 ...
- 从高德地图获取城市公交线路+站点
公交线路+站点 在研究城市公共交通问题上,地面的公交网络研究算是很重要的一块,因此获取整个城市的公交线路及其站点的所有数据是非常重要的!但令人高兴的是,有关这些数据的获取其实是很方便快捷的,因为目前的 ...
- 基于高德地图实现的公交线路查询功能
高德地图支持公交线程查询功能.线上示例; 线上示例说明 接口返回的数据结构: path和via_stops字段详情: ... path: [{Q: 39.97741, R: 116.397880999 ...
- 前端实现街道地图_有哪些简单易用且可精确到地级市的JavaScript前端矢量地图绘制库？...
有一个方案完全满足你的需求,那就是 Echarts + 百度地图 API,首先我不太喜欢百度,也不做广告,不过 Echarts 却是我最喜欢的开源图表库. Echarts 实现的地图是这样的,你可以在 ...
最新文章
- 改变完成工作的方式压力的效果
- 微信小程序惩治“老赖” 河北高院“老赖地图”上线
- 推荐20个很有帮助的 Web 前端开发教程
- [数据结构-划分树小结]
- 中国电力环保设备行业十四五发展形势与投资机会分析报告2022版
- vs2012编译boost_1_54_0
- CVPR 2019全部论文下载！
- Android功耗优化（6）---如何确定阻止进入suspend的原因
- VS2010 C# 4.0新特性一览
- 因为在此系统上禁止运行脚本。有关详细信息_win10系统下Hyper-V基本（网上资源整合）3
- floyd算法_常用十大算法（九）— 弗洛伊德算法
- p(y|x,z)=p(x,y,z)/p(x,z)的解释
- FISCO BCOS PBFT网络优化
- linux安装vnc
- sqlite 服务器数据库文件,sqlite可以做服务器数据库吗
- eplan加密狗已损坏_[转载]EPLAN Electric P8 仿真加密狗 error 1068 问题
- MS-office计算机二级选择题大全
- 基于Springboot外卖系统01：技术构成+功能模块介绍
- 计算机专业答辩系统抄袭怎么办,计算机毕业设计答辩怎么老是不过？
- 王兴：8年时间，我对商业的思考