echarts 地图迁徙与地图下钻

2023-11-02 05:04
文章标签 地图 echarts 迁徙

本文主要是介绍echarts 地图迁徙与地图下钻，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

echarts 地图迁徙与地图下钻

一、迁徙

地图迁徙

1、引入中国地图数据及echarts

const china = require("./echarts-mapJson-master/china.json")
import * as echarts from 'echarts'

2、数据准备

// 点数据 需要hover或点击获取数据可以添加额外的参数，
// 如{ value: [118.8062, 31.9208], code:'440100',itemStyle: { color: '#4ab2e5' }，code可以在hover或点击的时候拿到；
// 数组最后一个点是线指向的终点，也可不设
let poinstData = [{ value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }, { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }, { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }, { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }, { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }, { value: [123.1238, 42.1216], keysValue: 8, itemStyle: { color: '#f56321' } }, { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }, { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }, { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }, { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }, { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } }, { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }, { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }, { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }, { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }, { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }, { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } }, { value: [113.335367, 23.13559]}],
// 线数据 同样可以添加额外的参数，点击时type为lines时可拿到参数
let linesData = [{ coords: [ [118.8062, 31.9208],[113.335367, 23.13559]], lineStyle: { color: '#4ab2e5' } }, { coords: [ [127.9688, 45.368],[113.335367, 23.13559]], lineStyle: { color: '#4fb6d2' } }, { coords: [ [110.3467, 41.4899],[113.335367, 23.13559]], lineStyle: { color: '#52b9c7' } }, { coords: [ [125.8154, 44.2584],[113.335367, 23.13559]], lineStyle: { color: '#5abead' } }, { coords: [ [116.4551, 40.2539],[113.335367, 23.13559]], lineStyle: { color: '#f34e2b' } }, { coords: [ [123.1238, 42.1216],[113.335367, 23.13559]], lineStyle: { color: '#f56321' } }, { coords: [ [114.4995, 38.1006],[113.335367, 23.13559]], lineStyle: { color: '#f56f1c' } }, { coords: [ [117.4219, 39.4189],[113.335367, 23.13559]], lineStyle: { color: '#f58414' } }, { coords: [ [112.3352, 37.9413],[113.335367, 23.13559]], lineStyle: { color: '#f58f0e' } }, { coords: [ [109.1162, 34.2004],[113.335367, 23.13559]], lineStyle: { color: '#f5a305' } }, { coords: [ [103.5901, 36.3043],[113.335367, 23.13559]], lineStyle: { color: '#e7ab0b' } }, { coords: [ [106.3586, 38.1775],[113.335367, 23.13559]], lineStyle: { color: '#dfae10' } }, { coords: [ [101.4038, 36.8207],[113.335367, 23.13559]], lineStyle: { color: '#d5b314' } }, { coords: [ [103.9526, 30.7617],[113.335367, 23.13559]], lineStyle: { color: '#c1bb1f' } }, { coords: [ [108.384366, 30.439702],[113.335367, 23.13559]], lineStyle: { color: '#b9be23' } }, { coords: [ [113.0823, 28.2568],[113.335367, 23.13559]], lineStyle: { color: '#a6c62c' } }, { coords: [ [102.9199, 25.46639],[113.335367, 23.13559]], lineStyle: { color: '#96cc34' } }
]

3、获取options

getOptions(name, id, seriesData, pointsData, linesData ){let _this = this;return {backgroundColor: '#0F1C3C',toolbox: { // 返回按钮right: '5%',top: '15%',feature: {myBack: {show: false,title: '返回',icon: 'path://M473.2 276.9v-133c-4-18.4-11.7-27-20.2-30.3-17.2-6.7-37.8 8.5-37.8 8.5L95.9 395.4c-70.1 48.4-4.8 84.7-4.8 84.7L405.5 751c62.9 46 67.7-24.2 67.7-24.2V603.4c319.3-99.2 449.9 297.5 449.9 297.5 12.1 21.8 19.3 0 19.3 0 123.4-595-469.2-624-469.2-624z m0 0',iconStyle: {color: "#1aaef6",borderColor: "#1aaef6"},onclick: async function () {const seriesData = await _this.handleMap('china', chinaJson);const opt = await _this.getOptions('china', '', seriesData, _this.pointsData, _this.linesData)await _this.myChart.setOption(opt, true);}}}},tooltip: {trigger: 'item',backgroundColor: '#ffff',borderColor: '#FFFFCC',showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,extraCssText: 'z-index:100',formatter: function (params, ticket, callback) {let name = params.name//根据业务自己拓展要显示的内容// 自定义数据 params.datalet res = "<div>" + name + '</div>'return res;},},geo: {map: 'china',// 下钻时以当前地图名称命名show: true,roam: true,zoom: 1.2,label: {show: true,color: '#1DE9B6',emphasis: {show: true,areaColor: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#073684' // 0% 处的颜色},{offset: 1,color: '#061E3D' // 100% 处的颜色}]}}},layoutSize: '100%',itemStyle: {areaColor: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#073684' // 0% 处的颜色},{offset: 1,color: '#061E3D' // 100% 处的颜色}]},borderColor: '#2863ad',borderWidth: 1,shadowColor: 'rgba(10,76,139,1)',shadowOffsetY: 0,shadowBlur: 60,emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: 'green',label: {show: false}}},},series: [{type: 'map',map: 'china',// 有data时不需要roam: true,geoIndex: 0,aspectScale: 0.85, //长宽比show: true,textStyle: {color: '#1DE9B6'},emphasis: {textStyle: {color: 'rgb(183,185,14)'}},itemStyle: {borderColor: 'rgb(147, 235, 248)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: '#09132c' // 0% 处的颜色}, {offset: 1,color: '#274d68'  // 100% 处的颜色}],globalCoord: true // 缺省为 false},emphasis: {areaColor: 'rgb(46,229,206)',// shadowColor: 'rgb(12,25,50)',borderWidth: 0.1}},// data:[{name:'',value:[经,纬]}] },{type: 'effectScatter', // 动效散点coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 1,rippleEffect: { // 涟漪特效period: 4, // 动画的周期，秒数scale: 5, // 动画中波纹的最大缩放比例brushType: 'stroke',// ['fill','stroke'] 波纹海浪或线圈},hoverAnimation: true,label: {formatter: '{b}',position: 'right',offset: [15, 0],color: '#1DE9B6',show: true},itemStyle: {color: '#1DE9B6',shadowBlur: 10,shadowColor: '#333'},symbolSize: function (val) { // 点大小return 12},data: pointsData}, //地图线的动画效果{type: 'lines',zlevel: 2,effect: {show: true,period: 4, // 箭头指向速度，值越小速度越快trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', // 箭头图标symbolSize: 7, // 图标大小},lineStyle: {color: '#1DE9B6',width: 1, // 线条宽度opacity: 0.1, // 尾迹线条透明度curveness: .3 // 尾迹线条曲直度},data: linesData}]};
}

4、画图

// 先引入中国地图，再画图
async loadData(){let _this = this;this.myChart = echarts.getInstanceByDom(this.$refs.baseEcharts);if (!this.myChart) {this.myChart = await echarts.init(this.$refs.baseEcharts);}await _this.myChart.setOption(option);
}

二、下钻

1、画中国地图
2、从地图点击事件中获取到省级id或市级编码（具体看下一级显示什么）
3、根据省级id拿到对应省级地图数据，注册地图
4、拿到对应option，再setOptions，返回中国地图再画一遍中国地图（当前显示哪一个地图就画哪一个地图）
5、缩放或其他原因，切换地图后地图不在容器中心点解决，setOptions(option,true)，true意思为重新绘画地图
在这里插入图片描述

			/*** 获取当前配置项* @param{string} name 当前地图* @param{string} id 当前地图id* @param{array} seriesData 组[{name,value}]* @param{array} pointsData 点* @param{array} linesData 线* */async getOptions(name, id, seriesData, pointsData, linesData) {let _this = this;// 参考迁徙图return{}}/*** @description 画图* @param{string} name 画图* @param{object} json 当前地图数据* @return{array} [{name:'',value:[]}]* */async handleMap(name, json) {let obj = {}, map = [];// 1、初始化全国地图// 2、设置点击事件-单击下钻，双击返回// 3、单击注册点击省份地图-setOption画图// 4、双击返回，重新画全国地图if (name !== 'china') { // 注册地图echarts.registerMap(name, json);}let mapFeatures = echarts.getMap(name) ? echarts.getMap(name).geoJson.features : [];mapFeatures.forEach(function (v) {obj = { name: v.properties.name, value: v.properties.cp }if (name === 'china') {obj.value.push(v.properties.id)}map.push(obj)});return map},/*** @description 实例化* */async loadData() {let _this = this;this.myChart = echarts.getInstanceByDom(this.$refs.baseEcharts);if (!this.myChart) {this.myChart = await echarts.init(this.$refs.baseEcharts);}// 全国地图echarts.registerMap('china', chinaJson);// 每个地图点，series第一个type: 'map'的dataconst seriesData = await this.handleMap('china', chinaJson);// optionsconst opt = await this.getOptions('china', '', seriesData, this.pointsData, this.linesData)// 绘画await this.myChart.setOption(opt);// 监控窗口变化// window.addEventListener("resize", this.resize); // myChart.resize();this.myChart.on('click', async function (params) {// 项目点击-下钻if (params.data && params.data.value && params.data.value[2]) {const json = require('./echarts-mapJson-master/geometryProvince/' + params.data.value[2] + '.json')if (!json) {return;}const seriesData = await _this.handleMap(params.data.value[2], json);const opt = await _this.getOptions(params.data.value[2], params.data.value[2], seriesData, _this.pointsData, _this.linesData)opt.toolbox.feature.myBack.show = trueawait _this.myChart.setOption(opt, true);}})// 双击返回this.myChart.on('dblclick', async function (params) {if (params.type === 'dblclick' && params.data && (!params.data.value || !params.data.value[2])) {const seriesData = await _this.handleMap('china', chinaJson);const opt = await _this.getOptions('china', '', seriesData, _this.pointsData, _this.linesData)await _this.myChart.setOption(opt, true);}})},

参考：
1、echarts Demo集 https://www.isqqw.com/
2、https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.027163647290617&lng=106.75386074913891&zoom=4.5
3、地图资源 https://gitee.com/niceguy802/map-resources.git

这篇关于echarts 地图迁徙与地图下钻的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/328308。

相关文章

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

一、前言说明 随着风云局势的剧烈变化，对我们搞软件开发的人员来说，影响也是越发明显，比如之前对美对欧的软件居多，现在慢慢的变成了对大鹅和中东以及非洲的居多，这两年明显问有没有俄语或者阿拉伯语的输入法的增多，这要是放在2019年以前，一年也遇不到一个人问这种需求场景的。 地图应用这块也是，之前的应用主要在国内，现在慢慢的多了一些外国的应用场景，这就遇到一个大问题，我们平时主要开发用的都是国内的地
阅读更多...
Imageview在百度地图中实现点击事件

Imageview在百度地图中实现点击事件

1.首先第一步，需要声明的全局有关类的引用 private BMapManager mBMapMan; private MapView mMapView; private MapController mMapController; private RadioGroup radiogroup; private RadioButton normalview; private RadioBu
阅读更多...
MMO地图传送

MMO地图传送

本篇由以下四个点讲解： 创建传送点 传送点配置 编辑器扩展：传送点数据生成 传送协议与实现 创建传送点 建碰撞器触发 //位置归零 建一个传送门cube放到要传送的位置（这个teleporter1是传出的区域 这是从另一张地图传入时的传送门 创建一个脚本TeleporterObject给每个传送cube都绑上脚本 通过脚本，让传送门在编辑器下面还能绘制出来
阅读更多...
Echarts使用笔记--饼图，柱状图

Echarts使用笔记--饼图，柱状图

开始做前端了，感觉自己是要变成全栈工程师了。。。 今天使用了echart，用之前觉得好高大上好厉害，肯定很复杂。用了以后才发现，使用起来超简单，当然，精通很难，里面的各种配置太多了，本文记录一下自己用到的东西。 echart使用 现在直接引用js文件就可以了 <script src="echarts.min.js"></script> echart组件需要在一个宽高固定的DOM里才能显示
阅读更多...
【python web】Flask+Echarts 实现动图图表

【python web】Flask+Echarts 实现动图图表

flask 是python web开发的微框架，Echarts酷炫的功能主要是javascript起作用，将两者结合起来，发挥的作用更大。下面将Echarts嵌套进Flask的html模板中。 项目结构： 打开demo.py运行，点击console中的链接http://127.0.0.1:5000/ 就可以看到我们想要的动态图表。 demo.py #coding:utf-8fro
阅读更多...
ArcGIS Pro SDK （十三）地图创作 3 特殊图层

ArcGIS Pro SDK （十三）地图创作 3 特殊图层

ArcGIS Pro SDK （十三）地图创作 3 特殊图层 文章目录 ArcGIS Pro SDK （十三）地图创作 3 特殊图层1 高程表面图层1.1 创建具有地表图层的场景1.2 创建新的高程表面1.3 将自定义高程表面设置为 Z 感知图层1.4 将高程源添加到现有高程表面图层1.5 从地图中获取高程表面图层和高程源图层1.6 查找高程表面图层1.7 移除高程表面图层1.8 从曲面获
阅读更多...
激光SLAM如何动态管理关键帧和地图

激光SLAM如何动态管理关键帧和地图

0. 简介 个人在想在长期执行的SLAM程序时，当场景发生替换时，激光SLAM如何有效的更新或者替换地图是非常关键的。在看了很多Life-Long的文章后，个人觉得可以按照以下思路去做。这里可以给大家分享一下 <br/> 1. 初始化保存关键帧 首先对应的应该是初始化设置，初始化设置当中会保存关键帧数据，这里的对应的关键帧点云数据会被存放在history_kf_lidar当中，这个数据是和
阅读更多...
echarts 多个3D柱状图

echarts 多个3D柱状图

图片样式： 代码实现： <template><div :class="className" :style="{height:height,width:width}" /></template><script>require("echarts/theme/sakura"); // echarts themeexport default {props: {className: {typ
阅读更多...
产品地图经典案例，为盲人设计一款闹钟

产品地图经典案例，为盲人设计一款闹钟

在产品设计的旅程中，复杂程度往往超乎你的想象。从理解产品设计的初衷，到制定具体目标，再到解决实际问题，这一过程涉及许多环节。以下是如何通过即时设计在线白板高效绘制产品地图，以便更好地进行产品设计的具体示例——为盲人设计一款闹钟。 即时设计在线白板是一个高效便捷的可视化工具，可以帮助团队更好地协作和整理思路。我们将通过实际案例来展示如何使用它绘制产品地图。https://js.design/?so
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2