devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

openlayers-echarts 公交路线图实现_echarts 公交实时路线

作者：小丑西瓜9 | 2024-06-16 20:44:16

赞

踩

echarts 公交实时路线

关于 openlayers 入门开发系列结合 echarts 开发 文章，几个作者 抄来抄去，这几个作者没有抄明白。

github 搜索    echarts-openlayer

可以找到      https://github.com/sakitam-fdd/ol3Echarts   这个 大佬作者。

以下  是 我 做的 案例

效果图

代码复制粘贴  运行 就可以 看到，效果图了

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <style>
  10.         #map {
  11.             width: 100vw;
  12.             height: 100vh;
  13.             margin: 0;
  14.             padding: 0;
  15.             overflow: hidden;
  16.             position: absolute;
  17.         }
  18.         body {
  19.             width: 100vw;
  20.             height: 100vh;
  21.             margin: 0;
  22.             padding: 0;
  23.             overflow: hidden;
  24.         }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <div id="map"></div>
  30.     <script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
  31.     <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
  32.     <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.js"></script>
  33.     <script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
  34.     <script>
  35.         var Map = new ol.Map({
  36.             target: 'map',
  37.             layers: [
  38.                 new ol.layer.Tile({
  39.                     preload: 4,
  40.                     source: new ol.source.OSM()
  41.                 })
  42.             ],
  43.             loadTilesWhileAnimating: true,
  44.             view: new ol.View({
  45.                 projection: 'EPSG:4326',
  46.                 center: [116.395723, 39.889544],
  47.                 zoom: 9
  48.             })
  49.         });
  50.  
  51.         var option = {
  52.             series: [
  53.                 {
  54.                     type: 'lines',
  55.                     blendMode: 'lighter',
  56.                     dimensions: ['value'],
  57.                     data: [{ "coords": [[116.4383, 40.1471], [116.4372, 40.1458], [116.4373, 40.1409], [116.4347, 40.1395], [116.4446, 40.1225], [116.445, 40.1189], [116.4537, 40.1187], [116.4553, 40.1046], [116.4551, 40.1031], [116.4504, 40.1025], [116.4336, 40.1016], [116.4334, 40.1038], [116.426, 40.1034], [116.4122, 40.1044], [116.4134, 40.0892], [116.4143, 40.0837], [116.4126, 40.0726], [116.4139, 40.055], [116.4119, 40.0512], [116.412, 40.0455], [116.4151, 40.0401], [116.4179, 40.0316], [116.4174, 40.019], [116.4161, 40.0128], [116.4162, 40.0094], [116.4078, 40.0095], [116.4075, 39.9877], [116.409, 39.9883], [116.4168, 39.9885], [116.4172, 39.9833], [116.4242, 39.9834], [116.4249, 39.9692], [116.4348, 39.9694], [116.4369, 39.9689], [116.4598, 39.9539], [116.4614, 39.9516], [116.4614, 39.9336], [116.4782, 39.9337], [116.4778, 39.908], [116.486, 39.908], [116.4893, 39.9058], [116.4971, 39.9078]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4383, 40.1471], [116.4372, 40.1458], [116.4373, 40.1409], [116.4347, 40.1395], [116.4446, 40.1225], [116.445, 40.1189], [116.4537, 40.1187], [116.4553, 40.1046], [116.4551, 40.1031], [116.4504, 40.1025], [116.4336, 40.1016], [116.4334, 40.1038], [116.426, 40.1034], [116.4122, 40.1044], [116.4134, 40.0892], [116.4143, 40.0837], [116.4126, 40.0726], [116.4139, 40.055], [116.4119, 40.0512], [116.412, 40.0455], [116.4151, 40.0401], [116.4179, 40.0316], [116.4174, 40.019], [116.4161, 40.0128], [116.4162, 40.0094], [116.4078, 40.0095], [116.4075, 39.9877], [116.409, 39.9883], [116.4168, 39.9885], [116.4172, 39.9833], [116.4242, 39.9834], [116.4249, 39.9692], [116.4348, 39.9694], [116.4369, 39.9689], [116.4598, 39.9539], [116.4614, 39.9516], [116.4614, 39.9336], [116.4782, 39.9337], [116.4778, 39.908], [116.486, 39.908], [116.4893, 39.9058], [116.4971, 39.9078]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4311, 39.9594], [116.4319, 39.9595], [116.4352, 39.9595], [116.4408, 39.9596], [116.4437, 39.9599], [116.4467, 39.9626], [116.4475, 39.9621], [116.4496, 39.9607], [116.4499, 39.9605], [116.45, 39.9604], [116.4496, 39.9601], [116.4483, 39.9588], [116.4462, 39.9569], [116.4453, 39.956], [116.4437, 39.9551], [116.4344, 39.9545], [116.4352, 39.9595], [116.4252, 39.9594], [116.4251, 39.9594], [116.408, 39.9591], [116.4079, 39.9591], [116.4079, 39.959], [116.4079, 39.9582], [116.4079, 39.9567], [116.408, 39.9559], [116.408, 39.9531], [116.408, 39.9527], [116.4081, 39.9516], [116.4081, 39.9497], [116.4081, 39.9485], [116.4083, 39.9463], [116.4084, 39.9437], [116.4085, 39.9412], [116.4085, 39.9387], [116.4086, 39.9363], [116.4086, 39.9359], [116.4088, 39.9334], [116.4088, 39.9333], [116.4088, 39.9326], [116.4089, 39.9298], [116.4091, 39.9273], [116.4108, 39.9243], [116.4108, 39.9242], [116.4108, 39.924], [116.411, 39.9185], [116.4066, 39.9184], [116.4066, 39.9152], [116.4067, 39.9152], [116.4115, 39.9155], [116.4126, 39.9155], [116.4138, 39.9121], [116.4138, 39.9114], [116.4114, 39.9105], [116.4114, 39.9093], [116.4115, 39.9081], [116.4115, 39.908], [116.4122, 39.908], [116.413, 39.908], [116.4138, 39.908], [116.4179, 39.9081], [116.418, 39.9071], [116.418, 39.9067], [116.4181, 39.9062], [116.4181, 39.9056], [116.4181, 39.9053], [116.4183, 39.9032], [116.4184, 39.902], [116.4184, 39.9012], [116.4184, 39.901], [116.4186, 39.901], [116.4217, 39.9004], [116.4223, 39.9004], [116.4274, 39.9006], [116.4274, 39.9007], [116.4204, 39.9007], [116.4211, 39.902], [116.4218, 39.9025], [116.4248, 39.9047], [116.4249, 39.9048]], "lineStyle": { "color": "#409eff" } }, { "coords": [[116.4311, 39.9594], [116.4319, 39.9595], [116.4352, 39.9595], [116.4408, 39.9596], [116.4437, 39.9599], [116.4467, 39.9626], [116.4475, 39.9621], [116.4496, 39.9607], [116.4499, 39.9605], [116.45, 39.9604], [116.4496, 39.9601], [116.4483, 39.9588], [116.4462, 39.9569], [116.4453, 39.956], [116.4437, 39.9551], [116.4344, 39.9545], [116.4352, 39.9595], [116.4252, 39.9594], [116.4251, 39.9594], [116.408, 39.9591], [116.4079, 39.9591], [116.4079, 39.959], [116.4079, 39.9582], [116.4079, 39.9567], [116.408, 39.9559], [116.408, 39.9531], [116.408, 39.9527], [116.4081, 39.9516], [116.4081, 39.9497], [116.4081, 39.9485], [116.4083, 39.9463], [116.4084, 39.9437], [116.4085, 39.9412], [116.4085, 39.9387], [116.4086, 39.9363], [116.4086, 39.9359], [116.4088, 39.9334], [116.4088, 39.9333], [116.4088, 39.9326], [116.4089, 39.9298], [116.4091, 39.9273], [116.4108, 39.9243], [116.4108, 39.9242], [116.4108, 39.924], [116.411, 39.9185], [116.4066, 39.9184], [116.4066, 39.9152], [116.4067, 39.9152], [116.4115, 39.9155], [116.4126, 39.9155], [116.4138, 39.9121], [116.4138, 39.9114], [116.4114, 39.9105], [116.4114, 39.9093], [116.4115, 39.9081], [116.4115, 39.908], [116.4122, 39.908], [116.413, 39.908], [116.4138, 39.908], [116.4179, 39.9081], [116.418, 39.9071], [116.418, 39.9067], [116.4181, 39.9062], [116.4181, 39.9056], [116.4181, 39.9053], [116.4183, 39.9032], [116.4184, 39.902], [116.4184, 39.9012], [116.4184, 39.901], [116.4186, 39.901], [116.4217, 39.9004], [116.4223, 39.9004], [116.4274, 39.9006], [116.4274, 39.9007], [116.4204, 39.9007], [116.4211, 39.902], [116.4218, 39.9025], [116.4248, 39.9047], [116.4249, 39.9048]], "lineStyle": { "color": "#409eff" } }],
  58.                     polyline: true,
  59.                     large: true,
  60.                     lineStyle: {
  61.                         color: '#409eff',
  62.                         width: 3,
  63.                         opacity: 1
  64.                     }
  65.                 },
  66.             ]
  67.         };
  68.         var echartslayer = new ol3Echarts(option, {
  69.             source: '',
  70.             destination: '',
  71.             hideOnMoving: true,
  72.             forcedRerender: false,
  73.             forcedPrecomposeRerender: false
  74.         });
  75.         echartslayer.appendTo(Map)
  76.     </script>
  77. </body>
  78.  
  79. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/728201
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号