<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D地图</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/echarts.js"></script> <script src="js/echarts-gl.min.js"></script> </head> <body> <!-- 3D地图容器 --> <div id="main" style="width: 100%; height: 800px;"></div> <script> // 初始化图表 var myChart = echarts.init(document.getElementById('main')); // JSON文件(地图数据)路径 var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/230000_full.json"; // 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。 myChart.showLoading(); // 引入JSON文件 $.getJSON(uploadedDataURL, function(geoJson) { // 注册地图名字(china)和数据(geoJson) echarts.registerMap('china', geoJson); // 隐藏动画加载效果。 myChart.hideLoading(); // 图表配置项 var option = { title : { // 标题 top : '5%', text : '3D地图', subtext : '', x : 'center', textStyle : { color : '#ccc' } }, tooltip: { show: true, }, geo3D: { map: 'china', roam: true, regionHeight: 5, //地图厚度 itemStyle: { color: '#326a9a', opacity: 0.8, borderWidth: 0.8, borderColor: '#c3d7de' }, label:{ normal:{ show:false, }, emphasis:{ show:false, }, }, emphasis: { //当鼠标放上去 地区区域是否显示名称 disabled: true, //是否可以被选中 label: { formatter: function(params) { // 鼠标经过的回调函数 // console.log('hover', params) dataObj = params; return params.name }, }, }, light: { //光照阴影 main: { color: '#fff', //光照颜色 intensity: 1.2, //光照强度 shadowQuality: 'high', //阴影亮度 shadow: false, //是否显示阴影 alpha: 55, beta: 10 }, ambient: { intensity: 0.3 } }, viewControl: { distance: 120, // 地图视角 控制初始大小 // rotateSensitivity: 0, // 旋转 // zoomSensitivity: 0, // 缩放 // autoRotate: false, // maxBeta: Infinity, // minBeta: -Infinity, // beta: -15, //旋转视角 alpha: 35, //视角 panMouseButton: 'left', rotateMouseButton: 'right', center: [-1, 0, 5], }, }, series: [ { type: 'scatter3D', coordinateSystem: 'geo3D', symbolSize: 5, rippleEffect: { //坐标点动画 period: 3, scale: 5, brushType: 'fill' }, data: [ { name: "阿城区", value: [126.972726,45.538372], label: { normal: { show: true, position: 'right', formatter: '{b}', color: '#f99', fontWeight: "bold", fontSize: 18 } }, itemStyle: { normal: { color: 'red' } }, }, { name: "牡丹江", value: [129.650322,44.567084], label: { normal: { show: true, position: 'right', formatter: '{b}', color: '#f99', fontWeight: "bold", fontSize: 18 } }, itemStyle: { normal: { color: 'blue' } }, }, { name: "齐齐哈尔", value: [123.891969,47.388143], label: { normal: { show: false, position: 'right', formatter: '{b}', color: '#f99', fontWeight: "bold", fontSize: 18 } }, itemStyle: { normal: { color: 'black' } }, }, { name: "伊春", value: [128.859239,47.743023], label: { normal: { show: false, position: 'right', formatter: '{b}', color: '#f99', fontWeight: "bold", fontSize: 18 } }, itemStyle: { normal: { color: 'orange' } }, }, ], }, ], }; myChart.setOption(option); }); </script> </body> </html>
