B71eb5402775c84199295468a4d47b2f
openlayers4 入门开发系列结合 echarts4 实现交通线流动图(附源码下载)

前言

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': {

top Created with Sketch.