高德地图 JS API示例-简易行政区图- ›行政区拾取+修改样式

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no, width=device-width'>
    <title>简易行政区图 - 区域拾取</title>
    <meta name="description" content="通过 getDistrictByContainerPos() 方法拾取所在位置的行政区。并且通过 setStyles() 重置行政区样式。">
    <link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .info span {
            color: #0288d1;
        }
    </style>
</head>
<body>
<div id='container'></div>
<div class="info" style="min-width: 200px;">
    <h4>国家/地区</h4>
    <p>中文名字：<span id="name">--</span></p>
    <p>英文名字：<span id="eng-name">--</span></p>
    <p>SOC：<span id="soc">--</span></p><hr>
    <p>点击地图任意陆地区域</p>
</div>
<script src='//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.DistrictLayer'></script>
<script>
    var nationStroke = 'rgba(20, 20, 120, 0.6)';
    var nationFill = 'rgba(20, 120, 230, 0.3)';

    // 绘制世界地图国家轮廓
    var disWorld = new AMap.DistrictLayer.World({
        zIndex: 10,
        styles: {
            // 颜色格式: #RRGGBB、rgba()、rgb()、[r, g, b, a]
            // 国境线
            //'nation-stroke': nationStroke,
            // 海岸线
            //'coastline-stroke': '',
            // 填充
            'fill': function (props) {
                if (props.SOC == 'CHN') {
                    updateInfo(props);
                    return nationFill;
                } else {
                    return 'white'
                }
            }
        }
    });

    var map = new AMap.Map('container', {
        zooms: [3, 18],
        center:[110,30],
        showIndoorMap: false,
        zoom: 3,
        isHotspot: false,
        defaultCursor: 'pointer',
        touchZoomCenter: 1,
        pitch: 0,
        layers: [
            disWorld
        ],
        viewMode: '3D',
        resizeEnable: true
    });

    map.on('click', function (ev) {
        var px = ev.pixel;
        // 拾取所在位置的行政区
        var props = disWorld.getDistrictByContainerPos(px);

        if (props) {
            var SOC = props.SOC;
            if(SOC){
                // 重置行政区样式
                disWorld.setStyles({
                    // 国境线
                    //nation-stroke': nationStroke,
                    // 海岸线
                    //'coastline-stroke': '',
                    'fill': function (props) {
                        return props.SOC == SOC ? nationFill : 'white';
                    }
                });
                updateInfo(props);
            }
            

            
        }
    });
    document.getElementsByClassName('amap-mcode')[0].innerHTML = '-GS(2019)756号'
    function updateInfo(props) {
        document.getElementById('name').innerText = props.NAME_CHN;
        document.getElementById('eng-name').innerText = props.NAME_ENG;
        document.getElementById('soc').innerText = props.SOC;
    }
</script>
</body>
</html>
0 0 投票数
文章评分