openlayers4 入门开发系列结合 echarts4 实现交通线流动图
2023-09-11 14:19:51 时间
前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:
内容概览
1.基于 openlayers4 结合 echarts4 交通线流动图
2.源代码 demo 下载
效果图如下:
- 地图加载代码如下:
/** * 地图创建初始化 */ var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' + 'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}' }) }) ], view: new ol.View({ center: [116.55406673632812, 39.94828066015626], projection: 'EPSG:4326', zoom: 10 }) });
- echarts数据源设置:
var hStep = 300 / (rawData.length - 1); var busLines = [].concat.apply([], rawData.map(function (busLine, idx) { var prevPt; var points = []; for (var i = 0; i < busLine.length; i += 2) { var pt = [busLine[i], busLine[i + 1]]; if (i > 0) { pt = [ prevPt[0] + pt[0], prevPt[1] + pt[1] ]; } prevPt = pt; points.push([pt[0] / 1e4, pt[1] / 1e4]); } return { 'coords': points, 'lineStyle': { 'normal': { 'color': echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx)) } } }; })); var option = { 'series': [ { 'type': 'lines', 'polyline': true, 'data': busLines, 'lineStyle': { 'normal': { 'width': 0 } }, 'effect': { 'constantSpeed': 20, 'show': true, 'trailLength': 0.5, 'symbolSize': 1.5 }, 'zlevel': 1 } ] };
- hideOnMoving=false 设置地图移动过程中不隐藏 echarts 效果,hideOnZooming=false 设置地图缩放过程中不隐藏 echarts 效果,stopEvent =false 设置不阻止echarts 事件,EChartsLayer 图层初始化代码如下:
var echartslayer = new ol3Echarts(option, { stopEvent: false, hideOnMoving: false, hideOnZooming: false, forcedPrecomposeRerender: true, }); echartslayer.appendTo(map) html 页面引用:
完整demo源码见小专栏文章尾部:GIS之家leaflet小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- IAR环境下编译CC2640入门开发
- Vue 入门指南
- android入门之一 开发环境搭建
- 开发VS2008 AddIn 入门Sample
- WEBRTC开发入门
- JavaScript HTML DOM 入门详解
- Spark修炼之道(基础篇)——Linux大数据开发基础:第十四节:Shell编程入门(六)
- Spark修炼之道(进阶篇)——Spark入门到精通:第三节 Spark Intellij IDEA开发环境搭建
- 【转载】微信小程序-开发入门(一)
- 一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘
- 0基础入门低码开发,在线解答你的所有困惑
- Linux入门开发: 从0开始搭建ubuntu系统环境(编写第一个C程序)
- Python游戏开发入门:pygame色彩与绘图机制-4
- koa2入门学习
- 跨平台移动框架iMAG开发入门
- Python开发入门到精通之11个案例讲透 Python 函数参数
- SpringBoot入门:SpringBoot项目属性配置:2种配置风格(.properties风格和yml风格)+ 2种开发环境(dev开发环境和prod生产环境)
- 微信小程序云开发入门实践
- 软件测试零基础快速入门
- React快速入门
- 开发成长之路(2)-- C语言从入门到开发(讲明白指针和引用,顺带讲解多文件编程)
- 零基础入门深度学习(7) - 递归神经网络
- 嵌入式开发----示波器入门