高德地图绘制国家区域+大数据可视化

map.js

let data = [
    { "lnglat": [116.366794, 39.915309], "name": "西城区", "style": 2 },
    { "lnglat": [116.486409, 39.921489], "name": "朝阳区", "style": 2 },
    { "lnglat": [116.286968, 39.863642], "name": "丰台区", "style": 2 },
    // ...更多数据
]

const areaObject = new window.AMap.DistrictLayer.Country({
    zIndex: 10,
    SOC: 'CHN',
    depth: 1,
    styles: {
        // 填充
        'fill': function() {
            return "transparent"
        },
        'nation-stroke':'transparent',
        'coastline-stroke':'transparent',
        'province-stroke':'transparent'
    }
});

//创建地图
let map = new window.AMap.Map('map', {
    mapStyle: 'amap://styles/grey',
    zoom: 4,
    layers: [
        areaObject
    ],
    center: [107.4976,32.1697]
});

const loca = window.Loca.create(map);

const layer = window.Loca.visualLayer({
    container: loca,
    type: 'point',
    shape: 'circle'
});

layer.setData(data, {
    lnglat: 'lnglat'   // 指定坐标数据的来源，数据格式: 经度在前，维度在后，数组格式。
});

layer.setOptions({
    style: {
        radius: 2,     // 圆形半径，单位像素
        color: '#b7eff7', // 填充颜色
        borderWidth: 0.5,   // 边框宽度
        borderColor: '#ffffff'  // 边框颜色
    }
});

layer.render();

window.AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {

    //创建一个实例
    let districtExplorer = new DistrictExplorer({
        map: map
    });


    let adcode = 100000;

    districtExplorer.loadAreaNode(adcode, function(error, areaNode) {

        //更新地图视野
        map.setBounds(areaNode.getBounds(), null, null, true);

        //清除已有的绘制内容
        districtExplorer.clearFeaturePolygons();

        //绘制子区域
        districtExplorer.renderSubFeatures(areaNode, function(feature, i) {

            return {
                cursor: 'default',
                bubble: true,
                strokeColor: "#0388DC", //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 2, //线宽
                fillColor: "#fff", //填充色
                fillOpacity: 0, //填充透明度
            };
        });

        //绘制父区域
        districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: '#0388DC', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 2, //线宽
            fillColor: "#fff", //填充色
            fillOpacity: 0, //填充透明度
        });
    });
});