echarts中国及省份地图以及阴影的显示

echarts中国及省份合并地图以及阴影的显示

一、写在前面

因为百度echarts不在提供地图,所以需要在一些网站上找一些地图的json数据，所以总结了一些站点；

1：http://datav.aliyun.com/portal/school/atlas/area_selector ------- 阿里云地图数据下载

2：https://api.map.baidu.com/lbsapi/getpoint/index.html ------------ 百度坐标拾取系统定位

3：https://pan.baidu.com/s/16A-WG_bufpW3RsWCcMv1VQ ------ 百度网盘下载，是接下来当前项目所用的依赖文件，提取码：d6pw，内容如图

二、开发

1.成果图：

2.业务需求是首先展示中国地图，根据不一样的省份名称，来显示不一样的省份合并地图，如北京、天津，河北三个省市合并的地图，这里需要根据这三个名称生成这个地图。

a.所以首先整理出地图json和对应的名称数组：(引入文件百度网盘下载)

/***
@文件名：provinceMap.js
@来源：Winford.Wang|2021-12-30，17:51
@描述：地图绑定数据数据来源
***/
import beijing from '@/modules/datacenter/assets/json/geometryProvince/11.json';
import tianjin from '@/modules/datacenter/assets/json/geometryProvince/12.json';
import hebei from '@/modules/datacenter/assets/json/geometryProvince/13.json';
import shanxi from '@/modules/datacenter/assets/json/geometryProvince/14.json';
import neimenggu from '@/modules/datacenter/assets/json/geometryProvince/15.json';
import liaoning from '@/modules/datacenter/assets/json/geometryProvince/21.json';
import jilin from '@/modules/datacenter/assets/json/geometryProvince/22.json';
import heilongjiang from '@/modules/datacenter/assets/json/geometryProvince/23.json';
import shanghai from '@/modules/datacenter/assets/json/geometryProvince/31.json';
import jiangsu from '@/modules/datacenter/assets/json/geometryProvince/32.json';
import zhejiang from '@/modules/datacenter/assets/json/geometryProvince/33.json';
import anhui from '@/modules/datacenter/assets/json/geometryProvince/34.json';
import fujian from '@/modules/datacenter/assets/json/geometryProvince/35.json';
import jiangxi from '@/modules/datacenter/assets/json/geometryProvince/36.json';
import shandong from '@/modules/datacenter/assets/json/geometryProvince/37.json';
import henan from '@/modules/datacenter/assets/json/geometryProvince/41.json';
import hubei from '@/modules/datacenter/assets/json/geometryProvince/42.json';
import hunan from '@/modules/datacenter/assets/json/geometryProvince/43.json';
import guangdong from '@/modules/datacenter/assets/json/geometryProvince/44.json';
import guangxi from '@/modules/datacenter/assets/json/geometryProvince/45.json';
import hainan from '@/modules/datacenter/assets/json/geometryProvince/46.json';
import chongqing from '@/modules/datacenter/assets/json/geometryProvince/50.json';
import sichuan from '@/modules/datacenter/assets/json/geometryProvince/51.json';
import guizhou from '@/modules/datacenter/assets/json/geometryProvince/52.json';
import yunnan from '@/modules/datacenter/assets/json/geometryProvince/53.json';
import xizang from '@/modules/datacenter/assets/json/geometryProvince/54.json';
import shanxisheng from '@/modules/datacenter/assets/json/geometryProvince/61.json';
import gansu from '@/modules/datacenter/assets/json/geometryProvince/62.json';
import qinghai from '@/modules/datacenter/assets/json/geometryProvince/63.json';
import ningxia from '@/modules/datacenter/assets/json/geometryProvince/64.json';
import xinjiang from '@/modules/datacenter/assets/json/geometryProvince/65.json';
import taiwan from '@/modules/datacenter/assets/json/geometryProvince/71.json';
import xianggang from '@/modules/datacenter/assets/json/geometryProvince/81.json';
import aomen from '@/modules/datacenter/assets/json/geometryProvince/82.json';
// get地图名称
const mapdata = [
  {
    name: '北京',
    data: beijing
  },
  {
    name: '天津',
    data: tianjin
  },
  {
    name: '河北',
    data: hebei
  },
  {
    name: '山西',
    data: shanxi
  },
  {
    name: '内蒙古',
    data: neimenggu
  },
  {
    name: '辽宁',
    data: liaoning
  },
  {
    name: '吉林',
    data: jilin
  },
  {
    name: '黑龙江',
    data: heilongjiang
  },
  {
    name: '上海',
    data: shanghai
  },
  {
    name: '江苏',
    data: jiangsu
  },
  {
    name: '浙江',
    data: zhejiang
  },
  {
    name: '安徽',
    data: anhui
  },
  {
    name: '福建',
    data: fujian
  },
  {
    name: '江西',
    data: jiangxi
  },
  {
    name: '山东',
    data: shandong
  },
  {
    name: '河南',
    data: henan
  },
  {
    name: '湖北',
    data: hubei
  },
  {
    name: '湖南',
    data: hunan
  },
  {
    name: '广东',
    data: guangdong
  },
  {
    name: '广西',
    data: guangxi
  },
  {
    name: '海南',
    data: hainan
  },
  {
    name: '重庆',
    data: chongqing
  },
  {
    name: '四川',
    data: sichuan
  },
  {
    name: '贵州',
    data: guizhou
  },
  {
    name: '云南',
    data: yunnan
  },
  {
    name: '西藏',
    data: xizang
  },
  {
    name: '陕西',
    data: shanxisheng
  },
  {
    name: '甘肃',
    data: gansu
  },
  {
    name: '青海',
    data: qinghai
  },
  {
    name: '宁夏',
    data: ningxia
  },
  {
    name: '新疆',
    data: xinjiang
  },
  {
    name: '台湾',
    data: taiwan
  },
  {
    name: '香港',
    data: xianggang
  },
  {
    name: '澳门',
    data: aomen
  }
];

export default mapdata;

b.仔细研究这个json数据，不难发现，坐标数据大概结构就是最外层包裹很多子类，最终渲染子类，所以，只要将子类合并，即可出现合并地图。因为业务需求的原因，合成地图的最外层要显示阴影，当我把地图阴影效果加上的时候地图就像长斑了一样，并不是在最外层显示阴影，并且使地图不好看，所以为了解决这个问题，经过测试，是因为地图渲染顺序造成的，地图内的json数组数据，会优先渲染开头的，后面的会覆盖上一层数据，利用这个数据渲染方式，可以优先对数据内的省份进行排序，但不是最佳解决方式。根据数据显示全国的显示各省，各省显示市区，所以当我显示中国地图时候在最上层加上中国地图轮廓，显示省的时时候，在最上层加省的轮廓，得以解决。合并代码如下：

/***
@文件名：mergeProvince.js
@来源：Winford.Wang|2021-12-30，17:52
@描述：返回根据省份名称获取相应的地图数据合并数据
***/

import provinceMap from './provinceMap';
import chinaMapData from '@/modules/datacenter/assets/json/groupPortal/chinaEchart.json';

export function getMaoPrivince(names = []) {
  // 容器映射
  let resultMap = {
    type: 'FeatureCollection',
    features: []
  };
  let oldMapData = [];
  // 非空
  if (names.length === 0) return resultMap;
  // 名字和地图排序添加，
  for (let j = 0; j < names.length; j++) {
    // 将阴影层放在头处，显示时候将在地图最下层
    for (let i = 0; i < chinaMapData.features.length; i++) {
      let item = chinaMapData.features[i];
      if (item.properties.name === names[j]) {
        oldMapData.unshift(item);
        break;
      }
    }
    // 获取相应名字的地图
    for (let i = 0; i < provinceMap.length; i++) {
      if (provinceMap[i].name === names[j]) {
        let objdata = provinceMap[i].data
          ? provinceMap[i].data.features
            ? provinceMap[i].data.features
            : []
          : [];
        oldMapData = oldMapData.concat(objdata);
        break;
      }
    }
  }
  // 新地图
  resultMap.features = oldMapData;
  // 返回
  return resultMap;
}

c.辅助组件编写完成后，开始写调用方法，就是echarts的option，数据及方法都存在了，那么就是样式了，注意看引用组件的路径。

/***
 @文件名：chinaMap.js
 @来源：Winford.Wang|2021-10-20，13:37
 @描述：地图组件应用，设置地图显示等
 ***/
import chinaMapData from '@/modules/datacenter/assets/json/groupPortal/chinaEchart.json';
import { getMaoPrivince } from '@/modules/datacenter/views/groupPortal/gatewayPage/mergeProvince';
import chinaMapYin from '@/modules/datacenter/assets/json/groupPortal/china-contour.json';
// 组件加载
const echarts = require('echarts');
// 样式集合 基础
const styleS = {
  // 基础样式，地图平面样式
  itemRootStyle: {
    normal: {
      borderColor: '#c1c1c1',
      borderType: 'dotted',
      borderWidth: 0.5,
      areaColor: '#fff'
    },
    emphasis: {
      areaColor: '#eceaea', // 鼠标放上去  省份颜色
      borderWidth: 0.1
    }
  },
  // 阴影样式，立体感添加
  itemStyleQ: {
    normal: {
      shadowBlur: 0,
      shadowColor: '#f0f0f0',
      shadowOffsetX: 0,
      shadowOffsetY: 10,
      borderWidth: 0
    }
  },
  // 鼠标放到阴影上的去样式
  itemStyleEmphasis: {
    itemStyle: {
      opacity: 0
    },
    label: {
      color: 'rgba(255,255,255,0)'
    }
  },
  // china 文字样式
  labelStyle: {
    normal: {
      fontSize: 8,
      show: true,
      textStyle: {
        color: '#6e6e6e'
      }
    },
    emphasis: {
      textStyle: {
        color: '#333333'
      }
    }
  },
  // 各个区域文字样式
  labelStyleHide: {
    normal: {
      fontSize: 8,
      show: false
    },
    emphasis: {
      show: true,
      textStyle: {
        color: '#333333'
      }
    }
  },
  // 点坐标样式
  markPointLabelStyle: {
    show: false,
    emphasis: {
      show: false
    }
  },
  // 弹窗样式
  tooltipStyle: {
    color: '#333333',
    fontSize: 10,
    fontWeight: 600
  },
  // 地图最大最小缩放级别
  scaleLimit: {
    min: 0.7,
    max: 3
  }
};
// 弹窗配置
const tooltip = function(mapdata) {
  return {
    backgroundColor: 'rgba(236,236,236,0.85)',
    textStyle: styleS.tooltipStyle
  };
};
// 中国大地图设置
const chinaMapOption = function(data, mapdata = 'china') {
  let provinceShodawData;
  // 查找注册地图区域组件
  if (mapdata === 'china') {
    chinaMapData.features.unshift(chinaMapYin.features[0]);
    // 注册中国地图
    echarts.registerMap(mapdata, chinaMapData);
  } else {
    let names = mapdata.split(',');
    // 获取地图数据
    let map = getMaoPrivince(names);
    // 注册省份地图
    echarts.registerMap(mapdata, map);
  }
  // 设置阴影显示，伪立体感觉
  if (mapdata === 'china') {
    // 阴影 最外围显示阴影
    provinceShodawData = ['中华人民共和国'];
  } else {
    // 阴影 最外围显示阴影
    provinceShodawData = mapdata ? mapdata.split(',') : [];
  }
  // 阴影和样式结合
  provinceShodawData = provinceShodawData.map(item => {
    return {
      itemStyle: styleS.itemStyleQ,
      emphasis: styleS.itemStyleEmphasis,
      label: {
        show: false
      },
      name: item
    };
  });
  // 引用点
  let markPointData = data ? data : [];
  // 返回设置
  return {
    tooltip: tooltip(mapdata),
    series: [
      {
        type: 'map',
        map: mapdata,
        zoom: 1.2, //当前视角的缩放比例。
        roam: true, //是否开启鼠标缩放和平移漫游
        scaleLimit: styleS.scaleLimit,
        label: mapdata == 'china' ? styleS.labelStyle : styleS.labelStyleHide,
        itemStyle: styleS.itemRootStyle,
        markPoint: {
          symbolSize: 18,
          label: styleS.markPointLabelStyle,
          data: markPointData
        },
        data: provinceShodawData
      }
    ]
  };
};

export { chinaMapOption };

d.接下来直接引用这个方法，传入要生成的地图名字，和点数据，映射到dom上即可，一个地图基本就出现了。

// 中国地图获取方式
let markPointDatas = [
{name:'dian1',coord: [longitude, latitude]}
{name:'dian2',coord: [经度, 纬度]}
] 
this.chinaData = chinaMapOption(markPointDatas, 'china');


// 各省地图获取方式
let markPointDatas = [
{name:'dian1',coord: [longitude, latitude]}
{name:'dian2',coord: [经度, 纬度]}
] 
this.chinaData = chinaMapOption(markPointDatas, '北京,天津,河北');

// 基于准备好的dom，初始化echarts实例
this.chartInstance = echarts.init(document.getElementById(this.chartId));
this.chartInstance.setOption(this.chinaData);

3.根据不一样的需求，最终需要的地图样式也不一样，可根据自己的需要来变更采纳。

三、其它

这里后来又对3d echarts地图进行了一点研究，引入和echarts版本相匹配的echarts-gl,代码如下，仅供参考：

/***
 @文件名：china3DMap.js
 @来源：Winford.Wang|2021-10-20，13:37
 @描述：3d地图组件应用，设置地图显示等
 ***/
import 'echarts-gl';
import chinaMapData from '@/modules/datacenter/assets/json/groupPortal/chinaEchart.json';
import { getMaoPrivince } from '@/modules/datacenter/views/groupPortal/gatewayPage/mergeProvince';
// 组件加载
const echarts = require('echarts');
// 弹窗配置
const tooltip = function(data, mapdata) {
  return {
    backgroundColor: 'rgba(236,236,236,0.85)',
    textStyle: {
      color: '#333333',
      fontSize: 10,
      fontWeight: 600
    }
  };
};
// 地图样式显示
const styleMap = {
  label: {
    show: true,
    distance: [0, 0, 0],
    textStyle: {
      fontSize: 8,
      color: '#6e6e6e',
      backgroundColor: 'rgba(255,255,255,0)'
    }
  },
  itemStyle: {
    color: [255, 255, 255, 0.9],
    borderWidth: 0.5,
    borderColor: '#c1c1c1'
  },
  emphasis: {
    itemStyle: {
      show: true,
      color: 'rgba(245,245,245,1)'
    },
    label: {
      show: true,
      distance: 0,
      textStyle: {
        color: '#333'
      }
    }
  }
};
// 地图样式显示2
const styleMap2 = {
  label: {
    show: false,
    distance: 0,
    textStyle: {
      fontSize: 8,
      color: '#6e6e6e',
      backgroundColor: 'rgba(255,255,255,0)'
    }
  },
  itemStyle: {
    color: [255, 255, 255, 0.9],
    borderWidth: 0.5,
    borderColor: '#c1c1c1'
  },
  emphasis: {
    itemStyle: {
      show: true,
      color: '#fafafa'
    },
    label: {
      show: true,
      distance: 0,
      textStyle: {
        color: '#333'
      }
    }
  }
};
// 点样式显示
const styleScatter = {
  label: {
    show: false
  },
  emphasis: {
    itemStyle: {
      opacity: 0.9
    },
    label: {
      show: false
    }
  }
};
// 中国大地图设置
const chinaMapOption = function(data, mapdata = 'china') {
  // 查找注册地图区域组件
  if (mapdata === 'china') {
    // 注册中国地图
    echarts.registerMap(mapdata, chinaMapData);
  } else {
    let names = mapdata.split(',');
    // 获取地图数据
    let map = getMaoPrivince(names);
    // 注册省份地图
    echarts.registerMap(mapdata, map);
  }
  // 返回设置
  return {
    color: ['#fff'],
    tooltip: tooltip(data, mapdata),
    geo3D: {
      show: true,
      map: mapdata,
      label: mapdata === 'china' ? styleMap.label : styleMap2.label,
      itemStyle: styleMap.itemStyle,
      emphasis: styleMap.emphasis,
      shading: 'color',
      viewControl: {
        rotateSensitivity: 2, // 旋转操作的灵敏度
        zoomSensitivity: 2, // 缩放操作的灵敏度
        // distance: 80, //视角距离主体
        minDistance: 50,
        maxDistance: 300
        // alpha: 30, // 倾斜角度
        // beta: 10 // 旋转角度
      }
    },
    series: []
  };
};

export { chinaMapOption };

希望对你有帮助

posted @ 2022-01-10 16:01 星涑阅读(1210) 评论(1) 编辑收藏举报

刷新页面返回顶部

星涑

向往自由，珍惜时间。