高德地图 + 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>