反向镂空区域

使用DistrictExplorer实现反向镂空区域效果。

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/reverse.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.1 -->
    <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
    });

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

        initPage(DistrictExplorer);
    });

    function getAllRings(feature) {

        var coords = feature.geometry.coordinates,
            rings = [];

        for (var i = 0, len = coords.length; i < len; i++) {
            rings.push(coords[i][0]);
        }

        return rings;
    }

    function getLongestRing(feature) {
        var rings = getAllRings(feature);

        rings.sort(function(a, b) {
            return b.length - a.length;
        });

        return rings[0];
    }

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

        var countryCode = 100000, //全国
            provCodes = [
                110000, //北京
                510000 //四川
            ],
            cityCodes = [
                230100, //哈尔滨
                331100 //丽水
            ];

        districtExplorer.loadMultiAreaNodes(
            //只需加载全国和市，全国的节点包含省级
            [countryCode].concat(cityCodes),
            function(error, areaNodes) {

                var countryNode = areaNodes[0],
                    cityNodes = areaNodes.slice(1);

                var path = [];

                //首先放置背景区域，这里是大陆的边界
                path.push(getLongestRing(countryNode.getParentFeature()));


                for (var i = 0, len = provCodes.length; i < len; i++) {
                    //逐个放置需要镂空的省级区域
                    path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i])));
                }

                for (var i = 0, len = cityNodes.length; i < len; i++) {
                    //逐个放置需要镂空的市级区域
                    path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
                }

                //绘制带环多边形
                //https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
                var polygon = new AMap.Polygon({
                    bubble: true,
                    lineJoin: 'round',
                    strokeColor: 'red', //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: 'black', //填充色
                    fillOpacity: 0.65, //填充透明度
                    map: map,
                    path: path
                });
            });
    }
    </script>
</body>

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