引入文件
<script src="js/jquery-3.2.1.js"></script> <script type="text/javascript" src="js/echarts4.0.js"></script> <script src="js/echarts-gl.min.js"></script> <script src="js/shenyang.js"></script>
其中地区的geojson文件，为了实现本地化的访问，已经转化为.js文件。
构建容器
<div id="container" style="height: 100%"></div>
地图数据
var dataList = [ {name: '和平区', country: 62, town: 33, village: 12, wan: 12}, {name: '沈河区', country: 62, town: 33, village: 12, wan: 12}, {name: '大东区', country: 62, town: 33, village: 12, wan: 12}, {name: '皇姑区', country: 62, town: 33, village: 12, wan: 12}, {name: '铁西区', country: 62, town: 33, village: 12, wan: 12}, {name: '苏家屯区', country: 62, town: 33, village: 12, wan: 12}, {name: '浑南区', country: 62, town: 33, village: 12, wan: 12}, {name: '沈北新区', country: 62, town: 33, village: 12, wan: 12}, {name: '于洪区', country: 62, town: 33, village: 12, wan: 12}, {name: '辽中区', country: 62, town: 33, village: 12, wan: 12}, {name: '新民市', country: 62, town: 33, village: 12, wan: 12}, {name: '康平县', country: 62, town: 33, village: 12, wan: 12}, {name: '法库县', country: 62, town: 33, village: 12, wan: 12} ];
渲染地图
注册地图
var myChart = echarts.init(document.getElementById("container")); echarts.registerMap('沈阳市', geoJson);
var option = { backgroundColor: "rgba(0,0,0,0.8)", tooltip: { show: true, }, geo3D: { map: '沈阳市', zoom: 1, roam: true, color: '#fff', viewControl: { // 用于鼠标的旋转，缩放等视角控制。 projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。 autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ] distance: 200, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。 center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。 }, itemStyle: { opacity: 1, // 透明度 color: '#012a66',//地图颜色 borderWidth: 1.5,//分界线宽度 borderColor: "#459bca",//分界线颜色 }, emphasis: { areaColor: '#012a66', label: { show: true, color: '#fff' } }, label: { show: false,//是否显示市 textStyle: { color: "#fff",//文字颜色 fontSize: 16,//文字大小 fontFamily: '微软雅黑', backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景 }, }, //legendHoverLink: true, data: dataList, regions: [{ name: '和平区', itemStyle: { color: '#0160AD', opacity: 1, }, label: { show: true, formatter: function (params) { console.log(params); } }, }],//默认高亮区域 }, series: []
定时轮播
var count = 0; let regions = setInterval(function () { option.geo3D.regions[0].name = option.geo3D.data[count].name; myChart.setOption(option); count++; if (count === option.geo3D.data.length) { count = 0; } }, 2000);
案例是通过regions属性，实现轮播的效果，但是一些数据无法通过该方法实现。map3D不支持2d的属性。
lockdatav Done ！
