echars 3D地图为区域自定义颜色
echars 3D地图为区域自定义颜色
- 问题
- 延伸
- 解决问题
问题
根据项目需求,我们要将下面省级地图中的个别市进行高亮(不同颜色)展示
延伸
首先跟大家介绍这个地图的展示方式:
- 采用的是Vue框架中运用echarts
- 地图采用的是geo3D和scatter3D
当然他的实现很简单
首先我们要初始化echarts
let echartsMap = this.$echarts.init(this.$refs.echartsMap);
注册地图
this.$echarts.registerMap('河南', dataGeoLocation); //后面的dataGeoLocation是我们下载下载的地图json文件然后引入到当前 //组件中进行使用的,前面的河南则是我们要注册的地图
设置option对象
这里面的配置是根据自己的项目需求而来的 自己可以看文档都有详细的介绍
this.echartsDataMap = {visualMap: {min: 0,max: 500,show: false,inRange: {color: ['#eac736', '#6EAFE3'].reverse()},},globeRadius: 100,globeOuterRadius: 100,geo3D: {map: mapName,viewControl: {center: [0, 0, 0],alpha: 100,//上下旋转角度beta: 10,//左右旋转角度animation: true,//是否动画显示animationDurationUpdate: 1000,//动画时间distance: 130,//视角到主题距离minBeta: -9999,//最小(左)旋转度数maxBeta: 9999,//最多(右)旋转角度autoRotate: false,autoRotateDirection: 'cw',autoRotateSpeed: 10,},splitArea:{areaStyle:{color:'red',}},light: {main: {intensity: 1.2,// color: 'transparent',color: '#0D3867',shadowQuality: 'ultra',shadow: true,alpha: 150,beta: 200},ambient: {intensity: 1,//环境光强度},ambientCubemap: {diffuseIntensity: 1,texture: ''}},groundPlane: {show: false},postEffect: {enable: false},itemStyle: {color: '#175096',borderColor: 'rgb(62,215,213)',opacity: 0.8,//透明度borderWidth: 1},label: {show: false},emphasis: {label: {show: false},itemStyle: {}},silent: false, // 不响应和触发鼠标事件},series: [{type: 'scatter3D',coordinateSystem: 'geo3D',data: this.areaNamesymbol: 'circle',symbolSize: 0,silent: false, // 不响应和触发鼠标事件itemStyle: {borderColor: '#fff',borderWidth: 1},label: {distance: 30,show: true,formatter: '{b}',position: 'bottom',bottom: '100',textStyle: {color: '#fff',marginTop: 40,fontSize: 16,// fontWeight:'bold',backgroundColor: 'transparent',}}},{type: 'scatter3D',coordinateSystem: 'geo3D',data: pinArr,color: '#6EAFE3',symbol: 'pin',symbolSize: 56,symbolOffset: ['100%','50%','0'],silent: false, // 不响应和触发鼠标事件itemStyle: {textAlign: 'center',borderColor: '#6EAFE3',backgroundColor: '#6EAFE3',borderWidth: 0},zlevel: -10,label: {show: true,distance: -45,// left:-10,position: 'bottom',formatter: (data) => {return data.value[3] + ' ';},textStyle: {color: '#333',backgroundColor: 'transparent'}}},]};
将option实例到我们的echarts上
echartsMap.setOption(this.echartsDataMap);
解决问题
回头我们来看文章开头的问题,在百度上找到了很多方式,经过尝试好像没有什么效果,其实能够解决我也是根据网上提供的办法进行改进后就实现了
这是我在众多方式中找到的比较靠谱的一种方式,这里他说的是再geo中去添加regions即可,其实是这样的 但是我添加后没有效果,原因就是我的是geo3D而他的是geo,但是问题不大,经过我在三的尝试最终发现原来他们两个中仅仅是写法不一样
regions: [ {name: '郑州市', /itemStyle: {color: 'green'}},{name: '南阳市', itemStyle: {color: 'green'}},{name: '商丘市',itemStyle: {color: 'green'}}]
我们只需要更正一下color的设置形式然后添加到我们的geo3D中就可以了
你学会了吗
echars 3D地图为区域自定义颜色相关推荐
- echarts地图的常见用法:基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图
前言 最近几天用echarts做中国地图,就把以前写的demo:在vue中实现中国地图 拿来用,结果到项目里直接报错了,后来发现是因为版本的问题,没办法只能从头进行踩坑了.以下内容基于vue3 和 e ...
- 高德地图-2D地图下区域遮掩(只显示固定区域里的内容)
最近遇到一个新的需求需用用到高德地图 公司需要只显示固定区域范围的地图,其余地方的地图都用透明遮罩覆盖 完成后如下图所示: 地图体验网址 刚开始的时候研究了半天高德地图的的JS API中只有一个区域遮 ...
- echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能,解决dblclick事件失效问题,解决地图下钻后边框不更新保留问题
目录 先看实现效果:编辑 步骤一 安装echarts和echarts-gl 步骤二 设置地图容器 在methods中设置初始化地图方法并在mounted中调用 在methods中设置初始化地图方法 ...
- 使用echarts生成漂亮的3D地图
使用echarts生成漂亮的3D地图 echarts是非常好用的图表插件,本文使用echarts来生成一个漂亮的3D地图 效果 准备资料 第三方插件 <script type="tex ...
- echarts省级地图展示(包含3D地图)
1.npm i echarts --save // main.js import * as echarts from 'echarts'; Vue.prototype.$echarts = echar ...
- 【MapBox实战】生成地图+绘制区域+纠偏
[MapBox实战]生成地图+绘制区域+纠偏 mapbox介绍 生成地图过程 基础配置 坐标 在地图上绘制一块区域 在地图上画上点 瓦片地图原理理解 原理 瓦片地图背景理解 编码方式 谷歌xyz 百度 ...
- 使用echarts+echarts-gl绘制3d地图
首先在项目中安装echarts与echarts gl(echers gl用于3d) 安装命令 npm install echarts --save //echarts安装命令 npm install ...
- 在国内使用iOS 6看苹果3D地图Flyover成功! 小教程
有朋友之前提醒过,想要看iOS 6的地图,就需要地图使用TomTom的数据,但是你在国内,iOS 6会默认载入高德(AutoNavi)的地图数据,所以除了国内区域,其他地方只有普通地图,连卫星模式都没 ...
- 使用echarts实现3D地图和需要注意的点
echarts实现3d地图有两种方法 一种是map3D 一种是geo3D + series中的内容(比如bar3D.scatter3D) 具体配置Documentation - Apache ECha ...
最新文章
- 详解使用DockerHub官方的mysql镜像生成容器
- Java测试工具使用(1)--Junit
- 永磁同步电机转子磁链_永磁同步电机介绍
- 亲历dataguard的一些经验问答题
- P2906 [USACO08OPEN]Cow Neighborhoods G 切比雪夫距离 + 并查集 + set
- 一滴血、15分钟!钟南山指导研制试剂盒有望快速检测出结果
- oracle怎么使表更工整,Oracle 表分区介绍与使用
- c语言编译defined,#if defined(__GNUC__)的意思是不是如果使用的是GCC编译器?
- Mac 上的系统监控工具,可以实时监控系统的 CPU 使用率、内存使用率、硬盘使用、网速、电池等信息
- 后缀表达式的求值(c语言)
- IP 基础知识“全家桶”,45 张图一套带走
- poj 1950 Dessert(dfs)
- RTS相机+边框限制
- 51单片机——LED点阵屏(显示滚动画面)
- 基于vue练习demo:发表评论案例 (使用localStorage存储数据)
- STC-ISP程序下载软件
- 1018: 奇数偶数 C语言
- 借用继承_博物馆正在数字化,并在此过程中从数据中借用
- xp下固态硬盘测试软件,XP真的老矣? SSD实战XP/Win7/Win8系统
- 区块链 – 构建于技术创新之上的理想国
热门文章
- Echarts_1:水平柱体
- Fortify SCA安装以及卸载
- paper:Attention Is All You Need(模型篇)
- ESP32学习笔记(22)——ADC接口使用
- 航母级app手机淘宝是如何炼成的丨独家解密
- 良好的协同管理,是数字时代的成功前提
- 在线约会其实就是网络泡妞,Meexo 反其道而行为你隐姓埋名
- lacp - 链路汇聚控制协议
- 计算最长连续1数码长度c语言,C语言练习场-有难度
- 天龙八部网单服务器修改物品,如何用金山游侠V修改单机版天龙八部里面的物品啊?...