Echarts-gl geo3D设置regions区域高度

最新推荐文章于 2024-04-21 14:08:52 发布
最新推荐文章于 2024-04-21 14:08:52 发布
阅读量3.2k 收藏 3
点赞数 10
文章标签： echarts 3d javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42544269/article/details/122957676
版权

一、问题描述

首先VUE页面中展示3D地图，点击区域时，该区域凸起。

二、安装依赖

需要安装echarts-gl
这里直接使用npm install echarts-gl，安装的版本是2.0.8，

注意此处有坑！！

此时使用import将依赖局部导入页面，发现地图展示不出来，然后在main.js全局引入，同样不生效！！

（1）只好安装低版本

npm install  echarts-gl@1.1.0 -S

（2）import引入依赖

import 'echarts-gl'

这个时候，根据我们自己写的geo3D配置，就可以展示地图了

在这里插入图片描述

三、设置区域regions

我们要实现点击某块区域，该区域呈凸起状态，也就是高度要比全局高度regionHeight大。按照官方文档的说法，通过regions设置区域样式
在这里插入图片描述
其中包括区域名、高度、边框等配置项。尝试后发现区域样式都可以设置成功，只有高度不生效！！！

原因竟是官方文档字段有错，regions中的regionHeight要替换为height才生效！！

最终效果如下：
点击云南省

你甜到掉牙了
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
echarts 3D地图，地图区域点击触发事件
10-23
echarts 3D地图，地图区域点击触发事件，3d地图加数据
echarts地图给不同区域设置不同颜色，动态改变地图颜色
m0_45237165的博客
07-21 6549
（地图组件中监听数据变化）
echarts地图 geo-3d
weixin_45811204的博客
02-26 404
echarts geo-ed 点击事件不触发解决方案
micro-read Copy Number Variant Regions-开源
04-28
mrCaNaVaR与我们以前发布的算法以及mrFAST / mrsFAST / drFAST读取映射程序一起使用，对用户更友好，更快速地重新实现，以发现较大的片段重复和缺失并预测绝对拷贝数。
3D-RCNN: Instance-level 3D Object Reconstruction via Render-and-Compare
07-04
We present a fast inverse-graphics framework for instance-level 3D scene understanding. We train a deep convolutional network that learns to map image regions to the full 3D shape and pose of all object instances in the image. Our method produces a compact 3D representation of the scene, which can be readily used for applications like autonomous driving. Many traditional 2D vision outputs, like instance segmentations and depth-maps, can be obtained by simply rendering our output 3D scene model. We exploit class-specific shape priors by learning a low dimensional shape-space from collections of CAD models. We present novel representations of shape and pose, that strive towards better 3D equivariance and generalization. In order to exploit rich supervisory signals in the form of 2D annotations like segmentation, we propose a differentiable Render-and-Compare loss that allows 3D shape and pose to be learned with 2D supervision. We evaluate our method on the challenging real-world datasets of Pascal3D+ and KITTI, where we achieve state-of-the-art results.
ConRiot-Regions:ConRiot 3.0 区域模块
07-10
注意：这是一个未完成的遗留插件 我决定发布我的许多旧的私人插件，它们都处于 alpha 阶段，还没有准备好迎接黄金时段。 我认为这对于希望解决我在编写这些时遇到的许多问题的其他人可能很有用。 随意使用代码并从中学习！ 冲突地区 ConRiot 3.0 区域模块
echarts geo 下的regions 单独修改地图省份界线样式与颜色
热门推荐
zhaoletf的博客
07-04 1万+
其实省份界线的样色特别的容易修改,只需要修改 geo.regions 下的属性即可,但是有一个问题,就是regions的设置 只能在geo中设置,series中不可以设置,所以用到地图立体效果的时候还需要注意层级的设置,z:1 的层级小于 zlevel:1,如果不需要设置立体地图,则不需要注意这一点,可以直接设置
echarts 全国和省份
weixin_50085094的博客
11-23 124
2.在vue文件中编写地图文件。
echarts地图根据数据动态显示不同区域颜色
qq_23244029的博客
11-15 1548
echarts地图数据动态加载不同颜色
echarts 禁用/取消 地图regions/区域 选中
HyEISN的博客
03-29 1899
echarts 禁用或取消地图区域的选中
Echarts 绘制大区数据
我叫陈小皮。
04-14 1688
需求：地图区分大区展示，将某几个省份绘制成一个大区图形式 注意：如果需要直辖市绘制为一个区域，不绘制区，同样的思路 // config.js export const regionsMap = { 华北大区: { names: ['北京', '天津', '河北', '山西', '内蒙古'], cp: [115.24, 41.54] // 名称的经纬度，可以自己调整到合适的位置 }, 东北大区: { names: ['黑龙江', '吉林', '辽宁'], cp:
地级市echarts 3d 地图数据可视化
08-31
基于地级市3d 地图上的3d柱形图 更换相关json就可以变成你想要的城市的统计图 demo 学习多天心血之作 一起学习
killer-responsive-layouts-with-css-regions:具有 CSS 区域的杀手级响应式布局
06-18
CSS 区域使我们能够跨多个容器分发内容。 它们提供了一个流，由可以放置在几个元素中的内容和一个区域链组成，流在这些区域之间分布。 内容动态填充作用域链中的元素。 同时，容器的垂直尺寸可以改变，而不必担心某些内容会被切断，因为它会简单地转移到链中的下一个元素。 这为响应式布局开辟了新的可能性。
ghana-cities-with-regions:加纳城市和地区的API。 为您的项目。 更新了新区域
05-01
加纳有地区API的城市 加纳城市和地区的api。 为您的项目。 更新了新区域 该API使用POST && GET请求进行通信，并使用HTTP来识别状态和错误。 所有响应均以标准JSON格式提供。 所有请求都必须包括content-type的application/json ，并且正文必须是有效的JSON。 请求端点 数据 URL端点 获取城市 获取地区 响应码 200: Success 400: Bad request 401: Unauthorized 404: Cannot be found 405: Method not allowed 422: Unprocessable Entity 50X: Server Error
R-CNN matlab 代码: Regions with Convolutional Neural Network Features
03-17
R-CNN, matlab 代码: Regions with Convolutional Neural Network Features,卷积神经网络，此代码容易看懂，实现，适合学习 改进！
cyclone-regions.pdf
08-14
cyclone-regions ，垃圾回收，大家理解一下
vietnam-regions
05-12
越南地区越南行政单位上次更新时间：2018年6月16日资料来源：国家统计局（ ）
政安晨：【Keras机器学习示例演绎】（七）—— 利用 NeRF 进行 3D 体积渲染
最新发布
政安晨——致力于AI人工智能数字互动领域
04-21 781
本文目标：NeRF 中显示的体积渲染的最小实现。 在本示例中，我们将介绍 Ben Mildenhall 等人的研究论文 NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis 的最小实现。 作者提出了一种巧妙的方法，即通过神经网络对体积场景函数进行建模，从而合成场景的新颖视图。
3D抓取算法的网络结构原理及作用
Greenorange1的博客
04-18 881
3D抓取算法是一个基于深度学习的算法，旨在从点云数据中预测出最佳的抓取姿态。该算法的网络结构主要由接近网络操作网络和容忍网络三个网络组成。下面我将详细讲解这三个网络的原理和作用。
echarts geo3D 设置可操作地图旋转
05-24
要启用地图旋转功能，需要在 ECharts 中使用 geo3D 组件，并设置 geo3D 的 rotateEnable 属性为 true。 以下是一个示例代码： ```javascript option = { globe: { baseTexture: 'path/to/earth.jpg', heightTexture: 'path/to/bathymetry.jpg', displacementScale: 0.1, shading: 'realistic', environment: 'path/to/starry.jpg', realisticMaterial: { roughness: 0.2 }, postEffect: { enable: true }, light: { main: { intensity: 5, shadow: true }, ambient: { intensity: 0 } } }, geo3D: { map: 'world', roam: true, rotateEnable: true, // 启用地图旋转 itemStyle: { color: '#fff' }, regions: [{ name: 'China', itemStyle: { color: '#f00' } }] }, series: [{ type: 'lines3D', coordinateSystem: 'geo3D', effect: { show: true, trailWidth: 2, trailOpacity: 0.5, trailLength: 0.5, constantSpeed: 10 }, blendMode: 'lighter', lineStyle: { width: 1, color: '#ff0', opacity: 0.2 }, data: [ // 线的数据 ] }] }; ``` 在这个示例中，我们设置了 geo3D 的 rotateEnable 属性为 true，启用了地图旋转功能。你可以在浏览器中查看这个示例并尝试旋转地图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值