多区域加载

使用DistrictExplorer实现多区域加载。

源代码编辑器
复制
运行
还原
          <!-- 重点：loadAreaNode -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/multi-load.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>多区域加载</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        cursor: 'default',
        zoom: 4
    });

    //just some colors
    var colors = [
        "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
        "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
        "#651067", "#329262", "#5574a6", "#3b3eac"
    ];

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

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


        function renderAreaNode(areaNode) {

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

                var fillColor = colors[i % colors.length];
                var strokeColor = colors[colors.length - 1 - i % colors.length];

                return {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: strokeColor, //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: fillColor, //填充色
                    fillOpacity: 0.35, //填充透明度
                };
            });

            //绘制父区域
            districtExplorer.renderParentFeature(areaNode, {
                cursor: 'default',
                bubble: true,
                strokeColor: 'black', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: null, //填充色
                fillOpacity: 0.35, //填充透明度
            });
        }

        var adcodes = [310000, 330100, 330200];

        districtExplorer.loadMultiAreaNodes(adcodes, function(error, areaNodes) {

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


            for (var i = 0, len = areaNodes.length; i < len; i++) {
                renderAreaNode(areaNodes[i]);
            }

            //更新地图视野
            map.setFitView(districtExplorer.getAllFeaturePolygons());
        });
    });
    </script>
</body>

</html>
        
控制台
清空
示例
中心常见
问题智能
客服