1. 程式人生 > 其它 >Echarts配合高德地圖, 實現單省份衛星地圖 + 城市描邊 + 地區標註 + 地區遷徙圖

Echarts配合高德地圖, 實現單省份衛星地圖 + 城市描邊 + 地區標註 + 地區遷徙圖

效果如下:


所需JS:

echarts.min.js

echarts-amap.min.js

https://webapi.amap.com/maps?v=1.4.15&key=key


具體程式碼如下:

<div id="map" style="width: 900px; height: 500px"></div>

<script>
    AMap.plugin(['AMap.DistrictSearch', 'AMap.MapType', 'AMap.CustomLayer'], function()
    {
        var district 
= new AMap.DistrictSearch( { extensions: 'all', level: 'province' }) district.search('青海省', function(status, result) { var bounds = result.districtList[0].boundaries; var districts = result.districtList[0].districtList;
var mask = [] for(var i = 0; i < bounds.length; i ++) { mask.push([bounds[i]]); } var myChart = echarts.init(document.getElementById('map')); var option = { animation: false, amap : { mask: mask, center: [
95.77, 35.62], viewMode: '3D', zoom: 6, defaultCursor: 'auto', }, tooltip: { trigger: 'item', axisPointer: { type: 'shadow' }, textStyle: { fontSize: 12, }, formatter: function(params) { var returnStr = ''; if(params.componentSubType == 'effectScatter') { returnStr += params.marker; returnStr += params.name + '' + params.data.count; } else if(params.componentSubType == 'lines') { returnStr += params.marker; returnStr += params.data.fromName + ' -> ' + params.data.toName; returnStr += '' + params.data.value; } return returnStr; } }, series: [ { name: '', type: 'effectScatter', coordinateSystem: 'amap', zlevel: 9999, symbolSize: 12, rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { show: false, }, itemStyle: { normal: { color: "#4892C2", shadowBlur: 12, shadowColor: '#fff' } }, data: [ { name: "海南藏族自治州", value: [100.622647, 35.926399], count: 100 }, { name: "海西蒙古族藏族自治州", value: [97.33197, 36.868114], count: 200 }, ], }, { name: '', type: 'lines', coordinateSystem: 'amap', zlevel: 9999, effect: { show: true, period: 5, trailLength: 0.2, symbol: 'arrow', symbolSize: 12, }, lineStyle: { // 線的顏色 normal: { color: "#4892C2", width: 2, curveness: 0.2 } }, data: [ { fromName: "海南藏族自治州", toName: "海西蒙古族藏族自治州", coords: [ [100.622647, 35.926399], [97.33197, 36.868114] ], value: 100, } ], } ] } myChart .setOption(option); var map = myChart.getModel().getComponent('amap').getAMap(); var layer = myChart.getModel().getComponent('amap').getLayer(); var mapType = new AMap.MapType( { defaultType: 1 }) map.addControl(mapType); mapType.hide(); var LabelsData = []; for(var i = 0; i < districts.length; i ++) { var config = { name: '', position: [116.12, 39.11], zooms: [4, 13], zIndex: 1, opacity: 1, text: { content: '', direction: 'center', offset: [0, 0], zooms: [3, 20], style: { fontSize: 12, fontWeight: 'normal', fillColor: '#fff', strokeColor: '#fff', strokeWidth: 1, } } }; var district = districts[i]; var name = district.name; config.text.content = name; config.position = [district.center.lng, district.center.lat]; LabelsData.push(config); var district2 = new AMap.DistrictSearch( { extensions: 'all', level: 'city' }); district2.search(name, function(status, result) { var bounds = result.districtList[0].boundaries; for(var ii = 0; ii < bounds.length; ii ++) { new AMap.Polyline( { map: map, path: bounds[ii], strokeColor: '#0af', strokeWeight: 2, }); } }); } for(var i = 0; i < bounds.length; i ++) { new AMap.Polyline( { map: map, path: bounds[i], strokeColor: '#0af', strokeWeight: 6, }) } map.on('complete', function() { var layer = new AMap.LabelsLayer({ collision: false, animation: true, }); for (var i = 0; i < LabelsData.length; i++) { var labelsMarker = new AMap.LabelMarker(LabelsData[i]); layer.add(labelsMarker); } map.add(layer); document.getElementsByClassName('amap-container')[0].style.background = "none"; }) }) }) </script>
歡迎轉載,轉載時請註明來源。