【免费】echarts自定义3D城市地图_echarts立体地图资源-CSDN下载

共3个文件

html：1个

js：1个

ds_store：1个

需积分: 0 180 浏览量 2023-12-08 23:46:30 上传评论收藏 32KB ZIP 举报

**正文** 在本文中，我们将深入探讨如何使用ECharts这一强大的数据可视化库来创建自定义的3D城市地图。ECharts是由百度开发的一款基于JavaScript的数据可视化图表库，它支持丰富的图表类型，包括柱状图、折线图、饼图以及地图等。而3D城市地图则是ECharts提供的高级特性之一，它可以将地理数据以立体形式展现，为用户带来更直观、更具沉浸感的视觉体验。我们需要了解ECharts的3D地图基础。ECharts 3D功能是通过集成Three.js库实现的，Three.js是一个广泛使用的WebGL库，用于在浏览器中创建三维图形。这意味着，使用ECharts创建3D地图时，我们需要对WebGL和Three.js有一定的理解。 **1. 配置ECharts实例** 创建3D地图的第一步是初始化ECharts实例，设置地图类型为`'map3d'`。在配置项中，需要指定地图的投影方式、光照设置、视角等。例如： ```javascript var option = { tooltip: {}, visualMap: { show: false, pieces: [{value: 1, color: 'blue'}, {value: 2, color: 'green'}], dimension: 0 }, series: [ { name: '3D City Map', type: 'map3d', mapType: 'your_city_name', // 城市名称，可以是自定义的城市名 viewControl: { autoRotate: true, rotateSensitivity: 0.5 }, itemStyle: { normal: { opacity: 0.8, shadowBlur: 10, shadowColor: '#000' } }, ... } ] }; ``` **2. 加载3D地图数据** ECharts 3D地图需要地理数据来构建城市的三维模型。这些数据通常以JSON格式提供，包含城市的地理坐标、高度信息等。你可以从开源社区或者ECharts官方获取预处理好的数据，也可以自行处理GIS数据生成。在配置项中，通过`data`属性加载数据： ```javascript series: [{ ... data: [ {name: 'city1', value: 1}, {name: 'city2', value: 2}, // 更多城市数据... ], ... }] ``` **3. 自定义3D效果** ECharts提供了丰富的API和配置项来调整3D地图的外观和交互。你可以改变光照、阴影、纹理、颜色等，以达到理想的效果。例如，通过`light`配置项控制光源： ```javascript series: [{ ... light: { main: { intensity: 1.5, shadow: true, color: 'white', position: [100, 100, 100] }, ambient: { intensity: 0.5 } }, ... }] ``` **4. 交互与动画** ECharts的3D地图支持用户交互，如旋转、缩放和平移。你还可以添加自定义的点击事件、鼠标悬停效果等。同时，利用ECharts的动态数据更新能力，可以实现地图的实时数据展示和动画效果。 **5. 实例应用** 3D城市地图在多个领域有广泛应用，如城市规划、交通分析、环境监测等。通过结合实际业务数据，可以直观地展示城市区域的发展状况、人口分布、交通流量等信息。总结，ECharts的自定义3D城市地图功能为数据可视化带来了新的可能性。通过熟练掌握ECharts的配置项和API，我们可以创建出富有表现力的3D地图，使数据更加生动且易于理解。不过，要注意的是，创建高质量的3D地图可能需要一定的编程和地理信息处理技能，但ECharts的易用性和灵活性使得这一过程变得相对简单。

资源推荐

资源详情

资源评论

收起资源包目录

echarts自定义3D城市地图.zip （3个子文件）

echarts自定义3D城市地图

.DS_Store 6KB

linyi.js 377KB

index.html 7KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .chart { width: 1200px; height: 800px; margin: 0 auto; } </style> </head> <body> <div class="chart"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>  <script src="./linyi.js"></script> <script> // 注册自定义城市边界信息 echarts.registerMap('Linyi', Linyi); // 图表实例 let chart = echarts.init(document.querySelector('.chart')); // map3D视角控制参数 let viewControl = { beta: 35, alpha: 45, distance: 120, // zoomSensitivity: 0, // 是否允许放大 // rotateSensitivity: 0,// 是否允许旋转 }; // 标注点数据 // 这里的name需要和城市边界信息中的name对应才能显示出来，因为没有坐标信息，name是唯一可以对应起来的 let pointData = [{ name: '兰山区', value: 10 }, { name: '河东区', value: 20 }, { name: '罗庄区', value: 99 } ] let label = { show: true, formatter(params) { if (params.value) { return `{radiusBg|${params.value}}` } else { return null; } }, rich: { radiusBg: { color: "#fff", align: 'center', width: 50, height: 50, fontSize: 22, }, }, textStyle: { width: 50, height: 64, backgroundColor: { image: 'data:image/png;base64,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' } } }; chart.setOption({ series: [{ zlevel: 10, viewControl, map: 'Linyi', type: "map3D", regionHeight: 10, label: { show: true, color: '#fff', fontWeight: 'bold', fontSize: 14, textShadowBlur: 2, textShadowOffsetY: 2, textShadowColor: 'rgba(0, 0, 0, 0.5)' }, itemStyle: { opacity: 1, borderWidth: 2, color: '#428BF4', borderColor: '#61CFF8', }, emphasis: { label: { show: true, textStyle: { color: '#fff' } }, itemStyle: { color: '#007EE8', borderWidth: 10, borderColor: '#6BECF5' } }, light: { ambient: { color: '#fff', intensity: 0.4 } }, }, { zlevel: 20, viewControl, map: 'Linyi', type: "map3D", regionHeight: 10, itemStyle: { color: 'transparent' }, emphasis: { itemStyle: { color: 'transparent' } }, data: pointData.map(v => { v.label = label; v.emphasis = { label } return v }) } ] }); </script> </body> </html>

评论收藏

内容反馈