echarts三维建筑地图注解

代码主要来自echarts实例，本文是对实例做了些注解，最好还是复制下来自己试一下，具体配置看echarts官网


<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var option;var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';$.getJSON(ROOT_PATH + '/data-gl/asset/data/buildings.json',function (buildingsGeoJSON) {echarts.registerMap('buildings', buildingsGeoJSON);var regions = buildingsGeoJSON.features.map(function (feature) {return {name: feature.properties.name,value: Math.max(Math.sqrt(feature.properties.height), 0.1),height: Math.max(Math.sqrt(feature.properties.height), 0.1)};});myChart.setOption({series: [{type: 'map3D',map: 'buildings',shading: 'realistic',   // 着色方式 'color': 只显示颜色  realistic: 真实感渲染   'lambert' 通过经典的 lambert 着色表现光照带来的明暗realisticMaterial: { // 真实感材质相关的配置项，在 shading 为'realistic'时有效。roughness: 0.1,   // 光滑程度  0 - 1textureTiling: 10,  // 这个材质 重复渲染多少次detailTexture:'换一个你喜欢的图片链接'},postEffect: { // 后处理特效的相关配置。后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。enable: true, // 是否开启后处理特效bloom: { // 高光特效enable: false},SSAO: {enable: true,quality: 'medium',radius: 10,intensity: 1.2}, depthOfField: { // 景深效果enable: false,focalRange: 5, // 焦距fstop: 1, // 镜头的F值，值越小景深越浅blurRadius: 10 // 焦外的模糊半径}},groundPlane: { // 是否显示地面show: true,color: '#333'},light: {main: {intensity: 6,shadow: true,shadowQuality: 'high',alpha: 30},ambient: {intensity: 0},ambientCubemap: {texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',  // 光源文件exposure: 2,diffuseIntensity: 1,specularIntensity: 1}},viewControl: { // minBeta: -360,  // 这俩属性不知道有啥意义// maxBeta: 360,panSensitivity: 1, // 平移敏感度 0-1zoomSensitivity: 1 // 缩放敏感度 0-1},itemStyle: {areaColor: 'red'},label: {show: false,color: 'red'},silent: true,  // 辅助触发事件instancing: true, // 提高绘图效率的boxWidth: 200,boxHeight: 1,data: regions}]});});if (option && typeof option == 'object') {myChart.setOption(option);}myChart.getZr().on('click',function(e){console.log(e)});</script></body>
</html>

echarts三维建筑地图注解相关推荐

echart 三维可视化地图_使用 ECharts GL 实现三维可视化 - 入门款
(题图是使用 ECharts GL 渲染的纽约市建筑群) ECharts GL (后面统一简称 GL)为 ECharts 补充了丰富的三维可视化组件,这篇文章我们会简单介绍如何基于 GL 实现一些常见 ...
Echarts三维坐标系
Echarts三维坐标系一.坐标系 1.1 globe-地图组件提供地球坐标系可展示三维图:散点图.气泡图.柱状图.飞线图部分属性属性含义默认值 globeRadius 地球半径 100 ...
geojson地图_ThingJS的三维城市地图搭建逻辑解析
一个城市越智慧,综合竞争力越强,面向用户的可视化更是必不可少,ThingJS的三维城市地图搭建工具应运而生. Citybuilder是ThingJS旗下三维地图城市搭建工具,使用Citybuilder ...
echart 三维可视化地图_揭秘720°三维全景3D实景地图制作技术
近两年来三维全景3D实景地图在三维虚拟现实领域中占有相当大的地位.目前的三维720°线上三维实景展示基本都是通过商迪3D三维全景建模与3d全景地图技术制作.例如:VR游戏.智慧城市规划项目.智慧房地产 ...
echart 三维可视化地图_可视化地图是什么？推荐3个工具！
做数据的人都了解,每次做报告或做图表,大家最喜欢的便是数据可视化,可视化中最喜欢的便是数据地图.谁让大家都是视觉动物,而数据地图可视化最能震撼到大家.本文将分别举例用Excel.BI工具.Echart ...
echart 三维可视化地图_实测三个工具后，我终于找到了地图可视化的神器
做过数据分析的人都知道,老板最喜欢的莫过于数据可视化,可视化中最喜欢的莫过于地图可视化.但是想要做地图可视化也并非易事,对于大多数人来说,Excel一直都是首选,但是Excel真的是实现地图可视化的最 ...
三维实景地图智慧园区3D可视化物联商迪3D网平台制作
3D可视化物联网平台是5G新时代互联网发展战略之一,随着社会与企业管理建设对社会现有的资源比如地上.地下空间数据的要求越来越迫切,而商迪3D使三维实景地图构建的的智慧园区3D可视化系统,可监控园区环境 ...
使用echarts实现3D地图和需要注意的点
echarts实现3d地图有两种方法一种是map3D 一种是geo3D + series中的内容(比如bar3D.scatter3D) 具体配置Documentation - Apache ECha ...
三维实景地图建模技术在智慧城市中的应用
随着位置服务技术的进步和用户导航需求的增加,逐步推动了地图技术的发展.从二维到三维,从室外到室内,从桌面到移动,地图技术在不断变化着. 由于传统建模手段效率较低.成本较高,以致于三维并没有在智慧城市. ...
《ESMap平台如何在线绘制三维可视化地图-易景空间地图》
最近在了解一些如何绘制三维地图的问题,其中有一个ESMap平台是使用了地图编辑器场景搭建的方式,并支持在线开发,可以达到快速开发三维可视化地图的目的.所以花了几天天的时间看看这方面的东西,并总结一下. ...

echarts三维建筑地图注解

echarts三维建筑地图注解相关推荐

最新文章

热门文章