Echarts

mapgis-3d-echarts-layer

属性

All common layers props

options

• 类型: Object
• 默认值: { cesium: { roam: true }, series: [{ coordinateSystem: 'cesium', type: 'lines' }] }
• 侦听属性
• 描述: 参数 options 与 echarts 方法 setOption 中一致。echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。
• 注意: mapbox 的地图在使用的时候需要设置对应的坐标系，以 mapboxgl 举例，关键代码如下：

  // option的关键参数
  var option = {
    cesium: {
      //关键地方---1
      // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
      roam: true
    },
    series: [
      {
        //关键地方---2
        // 坐标系
        coordinateSystem: "cesium"
      }
    ]
  };
  

示例

<template>
  <mapgis-web-scene style="height:60vh" :cameraView = "cameraView">
    <mapgis-3d-arcgis-tile-layer :baseUrl="url" :layer-style="layerStyle" :srs="srs"/>
    <mapgis-3d-echarts-layer :options.sync="option"></mapgis-3d-echarts-layer>
  </mapgis-web-scene>
</template>
<script>
import { MapgisWebScene,Mapgis3dArcgisTileLayer } from "@mapgis/webclient-vue-cesium";
import { BaseServer } from "@mapgis/webclient-es6-service";
import * as echarts from "echarts";

export default {
  components: { MapgisWebScene, Mapgis3dArcgisTileLayer, BaseServer },
  data() {
    return {
      busLines: {},
      option: {},
      url:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
      layerStyle: {
        visible: true,
        opacity: 1,
        zIndex: 2
      },
      srs: "EPSG:4326",
      cameraView:{
        destination: {
          x: -2409221.7854387695,
          y: 4705113.697479787,
          z: 4500333.6696071755
        },
        orientation: {
          heading: 3.2694614177406143,
          pitch: -1.4832321184766042,
          roll: 3.1369303868636838
        },
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let vm = this;
      let onSuccess = function(data) {
        var hStep = 300 / (data.value.length - 1);
        vm.busLines = [].concat.apply(
          [],
          data.value.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)
                  )
                }
              }
            };
          })
        );
        this.initOptions(vm.busLines);
      };
      let onError = function(e) {
        console.log(e);
      };
      var service = new BaseServer.IgsServiceBase(
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/lines-bus.json",
        {
          eventListeners: {
            scope: this,
            processCompleted: onSuccess,
            processFailed: onError
          }
        }
      );
      service.processAsync();
    },
    initOptions(busLines) {
      let echartsOptions = {
        cesium: {
          roam: true
        },
        series: [
          {
            type: "lines",
            coordinateSystem: "cesium",
            polyline: true,
            data: busLines,
            silent: true,
            lineStyle: {
              // color: '#c23531',
              // color: 'rgb(200, 35, 45)',
              opacity: 0.2,
              width: 1
            },
            progressiveThreshold: 500,
            progressive: 200
          },
          {
            type: "lines",
            coordinateSystem: "mapboxgl",
            polyline: true,
            data: busLines,
            lineStyle: {
              width: 0
            },
            effect: {
              constantSpeed: 20,
              show: true,
              trailLength: 0.1,
              symbolSize: 1.5
            },
            zlevel: 1
          }
        ]
      };
      this.option = echartsOptions;
    }
  }
};
</script>
<style lang="css">
.main {
  height: 600px;
  width: 100%;
}
</style>