文章目录

• 利用echart和echart-gl绘制江苏省的地图之一
• • 1. 初始化配置
  • • 1.1 引入echarts、echarts-gl、江苏省的地图数据
    • 1.2 初始化echarts的参数配置
    • • 1.2.1 通过视觉映射组件来标记每个柱状图的颜色
      • 1.2.2 使用三维地理坐标系组件绘制3D江苏省地图
      • 1.2.3 通过 viewControl 控制视角的旋转、平移、缩放
      • 1.2.4 设置每个地级市的标签
      • 1.2.5 设置每个地级市的样式
      • 1.2.6 设置每一个地级市的鼠标悬浮效果
      • 1.2.7 设置地图的光照效果
    • 1.3 配置初始化的柱状图
    • • 1.3.1 定义每个地级市的具体数据
      • 1.3.2 定义每个地级市的省会的经纬坐标
      • 1.3.3 处理地级市的数据和坐标
      • 1.3.4 声明画布
  • 2. 存在的问题

利用echart和echart-gl绘制江苏省的地图之一

需求分析：

新建一个画布并绘制3D江苏省的地图

江苏省的每一个地级市配置背景颜色

每个地级市的数据使用3D柱状图来展示，并显示出具体的数据

根据每一个地级市的数据的取值范围标记颜色

1. 初始化配置

1.1 引入echarts、echarts-gl、江苏省的地图数据

import * as echarts from 'echarts' // echarts@v5.2.2 import echartGL from 'echarts-gl' // echarts-gl@v2.0.8 import jiangsu from '../assets/json/jiangsu.json' // 江苏省的地图数据

1.2 初始化echarts的参数配置

1.2.1 通过视觉映射组件来标记每个柱状图的颜色

// 是视觉映射组件 const visualMap = [{type: 'continuous', // 连续型视觉映射组件show: false, // 是否显示 visualMap-continuous 组件seriesIndex: 0, // 指定取哪个系列的数据text: ['High', 'Low'],// 两端的文本calculable: true, // 是否显示拖拽用的手柄max: 4000, // 指定 visualMapContinuous 组件的允许的最大值// 定义 在选中范围中 的视觉元素inRange: {color: ['#87aa66', '#eba438', '#d94d4c'], // 图元的颜色的集合} }]

1.2.2 使用三维地理坐标系组件绘制3D江苏省地图

1.2.3 通过 viewControl 控制视角的旋转、平移、缩放

// 用于鼠标的旋转，缩放等视角控制 const viewControl = {projection: 'perspective', // 透视投影autoRotate: false, // 是否开启视角绕物体的自动旋转查看autoRotateDirection: 'cw', // 物体自转的方向: 从上往下看是顺时针方向autoRotateSpeed: 10, // 物体自转的速度: 角度 / 秒autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔.在开启 autoRotate 后有效damping: 0.8, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度// panMouseButton: 'left', // 平移操作使用的鼠标按键// rotateMouseButton: 'middle', // 旋转操作使用的鼠标按键// distance: 100, // 默认视角距离主体的距离，在 projection 为'perspective'的时候有效。// minDistance: 40, // 视角通过鼠标控制能拉近到主体的最小距离。// maxDistance: 400, // 视角通过鼠标控制能拉远到主体的最大距离// orthographicSize: 100, // 正交投影的大小。 projection 为'orthographic'的时候有效。// maxOrthographicSize: 20, // 正交投影缩放的最大值。 projection 为'orthographic'的时候有效。// minOrthographicSize: 400, // 正交投影缩放的最小值。 projection 为'orthographic'的时候有效。// alpha: 4, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。// minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。// maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。// beta: 4, // 视角绕 y 轴，即左右旋转的角度。// minBeta: -80, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。// maxBeta: 80, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。// center: [0,0,0], // 视角中心点，旋转也会围绕这个中心点旋转animation: true, // 是否开启动画。animationDurationUpdate: 1000, // 过渡动画的时长。animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。 }

1.2.4 设置每个地级市的标签

const label = {show: true, // 是否显示市textStyle: {borderWidth: 0, // 文字的描边宽度。borderColor: '#fff', // 文字的描边颜色。color: '#fff', // 文字颜色fontSize: 12, // 文字大小fontFamily: 'sans-serif', // 文字的字体系列。fontWeight: 'normal', // 文字字体的粗细。} }

1.2.5 设置每个地级市的样式

const itemStyle = {opacity: 1,color: 'rgb(5,101,123)', // 地图颜色borderWidth: 1, // 分界线wdithborderColor: '#459bca', // 分界线颜色 }

1.2.6 设置每一个地级市的鼠标悬浮效果

const emphasis = {label: {show: true, // 是否显示高亮textStyle: {color: '#000', // 高亮文字颜色fontSize: 3, // 文字的字体大小}},itemStyle: {color: '#0489d6' // 地图高亮颜色} }

1.2.7 设置地图的光照效果

const light = {// 场景主光源的设置main: {color: '#fff', // 主光源的颜色intensity: 1.2, // 主光源的强度shadow: false, // 主光源是否投射阴影shadowQuality: 'high', // 阴影的质量alpha: 55, // 主光源绕 x 轴，即上下旋转的角度beta: 10, // 主光源绕 y 轴，即左右旋转的角度},// 全局的环境光设置ambient: {color: '#fff', // 环境光的颜色intensity: 0.3 // 环境光的强度} } const geo3D = {map: '江苏', // 地图类型。boxDepth: 80, // 三维地理坐标系组件在三维场景中的深度// 用于鼠标的旋转，缩放等视角控制viewControl,// 标签的相关设置。label,// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等itemStyle,// 鼠标 hover 高亮时图形和标签的样式。emphasis,// 光照相关的设置。light }

1.3 配置初始化的柱状图

const seriesBar3D = {name: 'bar3D',type: "bar3D",coordinateSystem: 'geo3D', // 该系列使用的坐标系barSize: 1, // 柱子粗细shading: 'lambert', // 三维柱状图中三维图形的着色效果。bevelSize: 0.3, // 柱子的倒角尺寸。支持设置为从 0 到 1 的值。// 柱子的标签配置label: {show: true,formatter: function(data) {var res = data.name + " " + data.value[2]return res}},data: [] } const options = {backgroundColor: 'rgba(128,128,128,0)',geo3D,series: [seriesBar3D] }

1.3.1 定义每个地级市的具体数据

// 每个地级市的具体数据 const data = [{ name: '南京市', value: 3802 },{ name: '无锡市', value: 3802 },{ name: '徐州市', value: 3412 },{ name: '常州市', value: 3421 },{ name: '苏州市', value: 3802 },{ name: '南通市', value: 3432 },{ name: '连云港市', value: 3512 },{ name: '淮安市', value: 3802 },{ name: '盐城市', value: 3802 },{ name: '扬州市', value: 3802 },{ name: '镇江市', value: 3802 },{ name: '泰州市', value: 3612 },{ name: '宿迁市', value: 3802 }, ]

1.3.2 定义每个地级市的省会的经纬坐标

// 每个地级市的省会的经纬坐标 const gdGeoCoordMap = {"南京市": [118.767413,32.041544],"无锡市": [120.301663,31.574729],"徐州市": [117.184811,34.261792],"常州市": [119.946973,31.772752],"苏州市": [120.619585,31.299379],"南通市": [120.864608,32.016212],"连云港市": [119.178821,34.600018],"淮安市": [119.021265,33.597506],"盐城市": [120.139998,33.377631],"扬州市": [119.421003,32.393159],"镇江市": [119.452753,32.204402],"泰州市": [119.915176,32.484882],"宿迁市": [118.275162,33.963008], }

1.3.3 处理地级市的数据和坐标

// 处理地级市的数据和坐标 function convertData() {var res = []for (var i = 0; i < data.length; i++) {var geoCoord = gdGeoCoordMap[data[i].name]if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)})}}return res }

1.3.4 声明画布

// 声明 var echart = null // 创建画布 function createMap() {echart = echarts.init(document.getElementById('echarts'), {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight})echarts.registerMap('江苏', jiangsu)options.series[0].data = convertData(data)echart.setOption(options)echart.on('click', function(params) {console.log(params)}) }

2. 存在的问题

echarts@v5.2.2 和 echarts-gl@v2.0.8 组合创建的江苏省地图中每个地级市的 label 的字体颜色无法改变。

echarts@v5.2.2 和 echarts-gl@v2.0.8 组合创建的江苏省地图中在每个地级市区域无法触发click事件，但是每个地级市中的柱状图可以触发click事件，如果采用如下方式不使用geo3D而是使用map3D绘制江苏省地图，可以在每个地级市区域触发click事件：

const options = {series: [{type: 'map3D',map: '江苏',itemStyle: {...},data: [...]}] }

echarts-gl 绘制的地图中无法放置彩色图片

ecahrts-gl 中的scatter3D的symbol绘制的图形只有'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'和通过 'path://' 将图标设置为任意的矢量路径,这集中方式，而且还都是2d的平面图。

总结

以上是生活随笔为你收集整理的利用echart和echart-gl绘制江苏省的地图之一的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。