Echarts 2dMap阴影,多个map分层现象以及飞线飞机航线

秃头小宝贝(柚子君)

已于 2022-11-10 17:31:50 修改

阅读量2.4k

点赞数 2

分类专栏： echarts 文章标签： echarts

于 2022-09-29 14:34:14 首次发布

本文链接：https://blog.csdn.net/qq_43557302/article/details/127104408

版权

echarts 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

Echarts 2dMap阴影,多个map分层现象以及飞线飞机航线

在这里插入图片描述

说明:2d地图为了实现阴影效果关键点在于在geo map下叠加了series map并且设置了下一层的阴影效果(层次通过zlevel控制) .series是一个数组,在series中可以叠加多个地图已达到3d立体效果.

注意事项:

(1) 上层地图会遮挡下层地图.上下地图可以任意控制显示层.在下一层次的地图会被上一层次遮挡,需要在地图上做操作时,注意是对上层的地图操作,如果对下层的地图进行操作效果会被遮挡.

解决使用多个map分层问题关键

(2)上下两层的地图需要设置相同的中心点,相同的起始视角,相同的缩放控制参数,才能同时控制上下两层地图否则地图会出现分层现象

(1).geo

geo中设置的map的zlevel等级为1在series map的上层(series的zlevel等级为0)注意区别

 map: "HK",    //这个地方的名字与上面registerMap时的名字对应
 zlevel: 1, 
 zoom: this.zoomData,
layoutCenter: ["50%", "50%"], //控制显示中心点位置
layoutSize: 1200, //控制显示大小
roam: 'scale',  //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
     left: this.option.gridX,      //好像没效果
                top: this.option.gridY,
                right: this.option.gridX2,
                bottom: this.option.gridY2,

(2).series

  series: [
            {
              type: 'lines',
              symbol: ["diamond", "arrow"],
              zlevel: 6,//带有尾迹特效的图表需要单独放在一个层
              polyline: false,
              animation: false,//关闭该层的动画不然位于同个层的其它系列的图形，和动画的标签也会产生不必要的残影。
              // 线特效
              effect: {
                show: true,
                constantSpeed: this.option.periodLine || 50, //箭头指向速度，值越小速度越快
                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                // symbol:
                //飞机图标
                // 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
                color: this.option.effectLinesColor || '#b9e839',
                symbol: this.option.symbolLineType || 'arrow',
                // symbol: 'arrow', //rect,roundRect,triangle,diamond,pin,arrow
                symbolSize: this.option.symbolLineSize || 10, //图标大小数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10
                // loop : true,//是否循环显示特效。
              },
              // 轨迹线
              lineStyle: {
                normal: {
                  width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'
                },
              },
              coordinateSystem: 'geo',
              // symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
              // symbol :['diamond','arrow'],//线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。
              // symbolSize: 30,//只保留地图端标记
              opacity: 0.3,
              data: this.linesData || [],
            },
     //地图叠加阴影
            {
              type: "map",
              map: "HK",//这个地方的名字与上面registerMap时的名字对应
              zoom: this.zoomData,
              layoutCenter: ["50%", "50%"],//控制显示中心点位置
              layoutSize: 1200,//控制显示大小
              zlevel: 0,
              // geoIndex: 1,
              label: {
                show: false,
              },
              show: true,
              tooltip: {
                fontSize: 20,
                color: "#000",
                show: true, //this.option.popShow,
                //可以是html格式,而且优先级是series.map3D.tooltip==>tooltip
                formatter: params => {
                  // console.log("hl:tooltip:formatter====>>")
                  // console.log(params.name)
                  this.paramsName = params.name;
                  // console.log(this.areaName)
                  //TODO:根据params.name去map3D里找对应的数据
                  //console.log("DENGG-DEBUG 提示事件params.name:=",params)
                  this.paramsName = params.name;
                  //params:= {"componentType":"geo","name":"山西省","$vars":["name"],"geoIndex":0}
                  // console.log("DENGG-DEBUG [series-map3D-tooltip] params:=",JSON.stringify(params))
                  // return this.htmlTips({"componentType":"geo","name":"山西省","$vars":["name"],"geoIndex":0});
                  return JSON.stringify(params.name);  //区域名称
                  // return "series-map3D-tooltip:=" + JSON.stringify(params.name);  //区域名称
                },
                //鼠标放上去的颜色
                //默认弹框
                backgroundColor: "rgba(0,0,0,0.01)",
                textStyle: {
                  fontSize: this.option.popUpFontSize || 20,
                  color: "#f3f3f3",
                  width: this.option.popUpWidth,
                  height: this.option.popUpHeight,
                },
              },
              itemStyle: {
                borderWidth: this.borderWidth,
                borderColor: this.borderColor,
                areaColor: this.areaColor,
                shadowColor: this.option.shadowColor || '#1863DE',
                shadowOffsetY: this.option.shadowOffsetY || 10,
                shadowOffsetX: this.option.shadowOffsetX || 2,
                opacity: this.option.itemStyleOpacity || 1,
              },
              roam: 'scale',//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成'scale'或者'move'。设置成true为都开启
              // roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成'scale'或者'move'。设置成true为都开启
              left: this.option.gridX,
              top: this.option.gridY,
              right: this.option.gridX2,
              bottom: this.option.gridY2,
              // animationDurationUpdate: 0,
            },
          ]