高德地图系列之多边形polygon、行政边界查询districtExplorer、海量麻点MassMarks

多边形polygon:

<!DOCTYPE html>

<html>
<head>
<title>map</title>
<script type="text/javascript" src=""></script>
<style type="text/css">
body,html,#container{
        height: 100%;
        margin: 0px;
    }
</style>
</head>
<body>
<div id="container" tabindex="0"></div>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=86a4b7cc36b60dcaa93e5ab86f4d4007"></script>
    <script type="text/javascript">
        var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 18,
            center: [116.40249623233241,39.92292807688322]
        });
// path:[
//                 new AMap.LngLat(116.4137441460175,39.90125217483801),
//                 new AMap.LngLat(116.41463346014412,39.901278423806424),
//                 new AMap.LngLat(116.4146334601453,39.90129242381057),
//                 new AMap.LngLat(116.41374014460584,39.901266173722455)
//             ],


        var option = {
        map:map,
        path:[
                [116.40249623233241,39.92292807688322],
                [116.4025172394779,39.9229280825497],
                [116.40250723606474,39.92309507987206],
                [116.40248522857951,39.92309307393583]
            ],
        strokeColor: "#238CFB", //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 2,    //线宽
            strokeStyle: "solid",
            fillColor: "#2B90FB", //填充色
            fillOpacity: 0.2//填充透明度
        }
        var polygon = new AMap.Polygon(option);
        polygon.setMap(map);
    </script>
</body>
</html>

 

行政边界查询districtExplorer:

 

render中map参数设置,此处使用的react-amap

<Map

version={'1.4.4'}
amapkey={'XXXXXXXXX'}
plugins={['ToolBar']}
center={this.center}
zoom={15}
expandZoomRange={true}
zooms={zooms}
animateEnable={true}
events={this.mapEvents}
useAMapUI

>

</Map>

 

 

画图

let adcodes = [110000];//310000, 330100, 330200

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

    that.districtExplorers = new DistrictExplorer({//创建一个实例
            map: that.amap,
        });
        that.districtExplorers.loadMultiAreaNodes(adcodes, function(error, areaNodes) {
        if(areaNodes){
        that.subCenter = [];
        let subFeatures = areaNodes[0]._data.geoData.sub.features;
        subFeatures.forEach((item,index)=>{
        let center = item.properties.center;//[116,39]
        that.subCenter.push(center);
        })
        that.districtExplorers.clearFeaturePolygons();//清除已有的绘制内容
            for (let i = 0, len = areaNodes.length; i < len; i++) {
                renderAreaNode(areaNodes[i]);
            }
            //更新地图视野以适合区划面
            //that.amap.setFitView(that.districtExplorers.getAllFeaturePolygons());
        }
            
        });
        function renderAreaNode(areaNode) {
            //绘制子区域
            that.districtExplorers.renderSubFeatures(areaNode, function(feature, i) {
                let fillColor = colors[i % colors.length];
                let strokeColor = colors[colors.length - 1 - i % colors.length];
                return {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: strokeColor, //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: fillColor, //填充色
                    fillOpacity: 0.35, //填充透明度
                };
            });
            //绘制父区域
            that.districtExplorers.renderParentFeature(areaNode, {
                cursor: 'default',
                bubble: true,
                strokeColor: 'black', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: null, //填充色
                fillOpacity: 0.35, //填充透明度
            });
        }
    });

}

 

官方示例


<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 原始地址://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/index.html -->
    <base href="https://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>行政区浏览</title>
    <link rel="stylesheet" type="text/css" href="./area.css">
</head>
<body>
    <div id="outer-box">
        <div id="container" tabindex="0"></div>
        <div id="panel" class="scrollbar1">
            <ul id="area-tree">
            </ul>
        </div>

    </div>

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.6&key=86a4b7cc36b60dcaa93e5ab86f4d4007'></script>

    <!-- UI组件库 1.0 -->

    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        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.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {
        //创建一个实例
        var districtExplorer = window.districtExplorer = new DistrictExplorer({
            eventSupport: true, //打开事件支持
            map: map
        });
        //当前聚焦的区域
        var currentAreaNode = null;
        //鼠标hover提示内容
        var $tipMarkerContent = $('<div class="tipMarker top"></div>');
        var tipMarker = new AMap.Marker({
            content: $tipMarkerContent.get(0),
            offset: new AMap.Pixel(0, 0),
            bubble: true
        });
        //根据Hover状态设置相关样式
        function toggleHoverFeature(feature, isHover, position) {
            tipMarker.setMap(isHover ? map : null);
            if (!feature) {
                return;
            }
            var props = feature.properties;
            if (isHover) {
                //更新提示内容
                $tipMarkerContent.html(props.adcode + ': ' + props.name);
                //更新位置
                tipMarker.setPosition(position || props.center);
            }
            $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);
            //更新相关多边形的样式
            var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
            for (var i = 0, len = polys.length; i < len; i++) {
                polys[i].setOptions({
                    fillOpacity: isHover ? 0.5 : 0.2
                });
            }
        }
        //监听feature的hover事件
        districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
            toggleHoverFeature(feature, e.type === 'featureMouseover',
                e.originalEvent ? e.originalEvent.lnglat : null);
        });
        //监听鼠标在feature上滑动
        districtExplorer.on('featureMousemove', function(e, feature) {
            //更新提示位置
            tipMarker.setPosition(e.originalEvent.lnglat);
        });
        //feature被点击
        districtExplorer.on('featureClick', function(e, feature) {
            var props = feature.properties;
            //如果存在子节点
            if (props.childrenNum > 0) {
                //切换聚焦区域
                switch2AreaNode(props.adcode);
            }
        });
        //外部区域被点击
        districtExplorer.on('outsideClick', function(e) {
            districtExplorer.locatePosition(e.originalEvent.lnglat, function(error, routeFeatures) {
                if (routeFeatures && routeFeatures.length > 1) {
                    //切换到省级区域
                    switch2AreaNode(routeFeatures[1].properties.adcode);
                } else {
                    //切换到全国
                    switch2AreaNode(100000);
                }
            }, {
                levelLimit: 2
            });
        });
        //绘制区域面板的节点
        function renderAreaPanelNode(ele, props, color) {
            var $box = $('<li/>').addClass('lv_' + props.level);
            var $h2 = $('<h2/>').addClass('lv_' + props.level).attr({
                'data-adcode': props.adcode,
                'data-level': props.level,
                'data-children-num': props.childrenNum || void(0),
                'data-center': props.center.join(',')
            }).html(props.name).appendTo($box);
            if (color) {
                $h2.css('borderColor', color);
            }
            //如果存在子节点
            if (props.childrenNum > 0) {
                //显示隐藏
                $('<div class="showHideBtn"></div>').appendTo($box);
                //子区域列表
                $('<ul/>').addClass('sublist lv_' + props.level).appendTo($box);
                $('<div class="clear"></div>').appendTo($box);
                if (props.level !== 'country') {
                    $box.addClass('hide-sub');
                }
            }
            $box.appendTo(ele);
        }
        //填充某个节点的子区域列表
        function renderAreaPanel(areaNode) {
            var props = areaNode.getProps();
            var $subBox = $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').siblings('ul.sublist');
            if (!$subBox.length) {
                //父节点不存在,先创建
                renderAreaPanelNode($('#area-tree'), props);
                $subBox = $('#area-tree').find('ul.sublist');
            }
            if ($subBox.attr('data-loaded') === 'rendered') {
                return;
            }
            $subBox.attr('data-loaded', 'rendered');
            var subFeatures = areaNode.getSubFeatures();
            //填充子区域
            for (var i = 0, len = subFeatures.length; i < len; i++) {
                renderAreaPanelNode($subBox, areaNode.getPropsOfFeature(subFeatures[i]), colors[i % colors.length]);
            }
        }
        //绘制某个区域的边界
        function renderAreaPolygons(areaNode) {
            //更新地图视野
            map.setBounds(areaNode.getBounds(), null, null, true);
            //清除已有的绘制内容
            districtExplorer.clearFeaturePolygons();
            //绘制子区域
            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, //填充透明度
            });
        }
        //切换区域后刷新显示内容
        function refreshAreaNode(areaNode) {
            districtExplorer.setHoverFeature(null);
            renderAreaPolygons(areaNode);
            //更新选中节点的class
            var $nodeEles = $('#area-tree').find('h2');
            $nodeEles.removeClass('selected');
            var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');
            //展开下层节点
            $selectedNode.closest('li').removeClass('hide-sub');
            //折叠下层的子节点
            $selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
        }
        //切换区域
        function switch2AreaNode(adcode, callback) {
            if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
                return;
            }
            loadAreaNode(adcode, function(error, areaNode) {
                if (error) {
                    if (callback) {
                        callback(error);
                    }
                    return;
                }
                currentAreaNode = window.currentAreaNode = areaNode;
                //设置当前使用的定位用节点
                districtExplorer.setAreaNodesForLocating([currentAreaNode]);
                refreshAreaNode(areaNode);
                if (callback) {
                    callback(null, areaNode);
                }
            });
        }
        //加载区域
        function loadAreaNode(adcode, callback) {
            districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
                if (error) {
                    if (callback) {
                        callback(error);
                    }
                    console.error(error);
                    return;
                }
                renderAreaPanel(areaNode);
                if (callback) {
                    callback(null, areaNode);
                }
            });
        }
        $('#area-tree').on('mouseenter mouseleave', 'h2[data-adcode]', function(e) {
            if (e.type === 'mouseleave') {
                districtExplorer.setHoverFeature(null);
                return;
            }
            var adcode = $(this).attr('data-adcode');
            districtExplorer.setHoverFeature(currentAreaNode.getSubFeatureByAdcode(adcode));
        });
        $('#area-tree').on('click', 'h2[data-children-num]', function() {
            var adcode = $(this).attr('data-adcode');
            switch2AreaNode(adcode);
        });
        $('#area-tree').on('click', '.showHideBtn', function() {
            var $li = $(this).closest('li');
            $li.toggleClass('hide-sub');
            if (!$li.hasClass('hide-sub')) {
                //子节点列表被展开
                var $subList = $li.children('ul.sublist');
                //尚未加载
                if (!$subList.attr('data-loaded')) {
                    $subList.attr('data-loaded', 'loading');
                    $li.addClass('loading');
                    //加载
                    loadAreaNode($li.children('h2').attr('data-adcode'), function() {
                        $li.removeClass('loading');
                    });
                }
            }
        });
        //全国
        switch2AreaNode(100000);
    });
    </script>
</body>
</html>

 

海量麻点MassMarks:

<!doctype html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="http://a.amap.com/jsapi_demos/static/resource/commonStyle.css"/>
    <title>海量麻点</title>
  </head>
  <body >
    <div id="container" class="map" tabindex="0"></div>
    <div class="button-group">
      <input type="button" class="button" value="单一图标" onclick = 'setStyle(0)'/>
      <input type="button" class="button" value="多个图标" onclick = 'setStyle(1)'/>
    </div>
    <script type="text/javascript" src = 'http://a.amap.com/jsapi_demos/static/citys.js'></script> 
    <script type="text/javascript" src = 'http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值'></script>
    <script type="text/javascript">
      var map = new AMap.Map('container', {
        zoom: 4,
        center: [102.342785, 35.312316]
      });
      var style = [{
                      url: 'http://a.amap.com/jsapi_demos/static/images/mass0.png',
                      anchor: new AMap.Pixel(6, 6),
                      size: new AMap.Size(11, 11)
                    },{
                      url: 'http://a.amap.com/jsapi_demos/static/images/mass1.png',
                      anchor: new AMap.Pixel(4, 4),
                      size: new AMap.Size(7, 7)
                    },{
                      url: 'http://a.amap.com/jsapi_demos/static/images/mass2.png',
                      anchor: new AMap.Pixel(3, 3),
                      size: new AMap.Size(5, 5)
                    }
                  ];
      var mass = new AMap.MassMarks(citys, {
            opacity:0.8,
            zIndex: 111,
            cursor:'pointer',
            style:style
      });
      var marker = new AMap.Marker({content:' ',map:map})
      mass.on('mouseover',function(e){
        marker.setPosition(e.data.lnglat);
        marker.setLabel({content:e.data.name})
      })
      mass.setMap(map);
      var setStyle = function(multiIcon) {
        if(multiIcon){
          mass.setStyle(style);
        }else{
          mass.setStyle(style[2]);
        }
      }
    </script>
  </body>
</html>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页