区划面样式

使用DistrictCluster，实现区划面样式的设置。

源代码编辑器
<!-- 重点：featureStyle featureStyleByLevel getFeatureStyle -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictCluster/examples/feature-style.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/geo/DistrictCluster/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;
    }
    
    #loadingTip {
        position: absolute;
        z-index: 9999;
        top: 0;
        left: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 14px;
    }
    </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', {
        zoom: 4
    });

    function initPage(DistrictCluster, $) {

        var distCluster = new DistrictCluster({
            map: map, //所属的地图实例
            zIndex:11,
            getPosition: function(item) {

                if (!item) {
                    return null;
                }

                var parts = item.split(',');

                //返回经纬度
                return [parseFloat(parts[0]), parseFloat(parts[1])];
            },
            renderOptions: {
                //基础样式
                featureStyle: {
                    fillStyle: 'rgba(102,170,0,0.5)', //填充色
                    lineWidth: 2, //描边线宽
                    strokeStyle: 'rgb(31, 119, 180)', //描边色
                    //鼠标Hover后的样式
                    hoverOptions: {
                        fillStyle: 'rgba(255,255,255,0.2)'
                    }
                },
                //特定区划级别的默认样式
                featureStyleByLevel: {
                    //全国
                    country: {
                        fillStyle: 'rgba(49, 163, 84, 0.8)'
                    },
                    //省
                    province: {
                        fillStyle: 'rgba(116, 196, 118, 0.7)'
                    },
                    //市
                    city: {
                        fillStyle: 'rgba(161, 217, 155, 0.6)'
                    },
                    //区县
                    district: {
                        fillStyle: 'rgba(199, 233, 192, 0.5)'
                    }
                },
                //直接定义某写区划面的样式
                getFeatureStyle: function(feature, dataItems) {

                    if (dataItems.length > 3000) {

                        return {
                            fillStyle: 'red'
                        };
                        
                    } else if (dataItems.length > 1000) {
                        return {
                            fillStyle: 'orange'
                        };
                    }

                    return {};
                }
            }
        });

        window.distCluster = distCluster;

        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
        $.get('http://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {

            $('#loadingTip').remove();

            var data = csv.split('\n');

            distCluster.setData(data);
        });
    }

    //加载相关组件
    AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function(DistrictCluster, $) {

        //启动页面
        initPage(DistrictCluster, $);
    });
    </script>
</body>

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