高德地图,显示行政区划图

发布时间:2021年06月15日      浏览次数:1232 次
如何使用高德地图,显示自己想要的行政区划图,实现代码如下,地图样式需要你自己注册登录高德地图进行创建与设置。

<style type="text/css">
#container {width:100%; height: 100%; border:1px #000 solid; }
</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<div id="container"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的Key"></script>
<script>
var map = new AMap.Map('container', {
      mapStyle: 'amap://styles/859154f30ffaec4521b959815da8902d', //设置使用地图样式
      zoom:11, //级别
      zooms: [9,15], //缩放范围
      resizeEnable: false, //调整大小
      showIndoorMap: false, //显示格式
      center:[110.293476, 25.231563],//设置中心点,必须是在你要显示的区域中心
      features:['point','road','bg'],//地图要素
      zoomEnable:true, //可缩放
      viewMode:'3D'//使用3D视图
});

Add_District("叠彩区", "#ee0066");
Add_District("七星区", "#ff55aa");
Add_District("象山区", "#cc7700");
Add_District("秀峰区", "#aabbcc");
Add_District("雁山区", "#4455ff");
Add_District("临桂区", "#ffff00");

Add_District("灵川县", "#0066ff");
Add_District("兴安县", "#cc66ff");
Add_District("全州县", "#fd9a4e");
Add_District("灌阳县", "#FF9900");
Add_District("阳朔县", "#ffffff");
Add_District("平乐县", "#e4393c");
Add_District("恭城瑶族自治县", "#cc99ff");
Add_District("荔浦市", "#00cc00");
Add_District("永福县", "#333333");
Add_District("资源县", "#ccccff");
Add_District("龙胜各族自治县", "#ff0000");

Only_Display("桂林市"); //仅显示区域,别的全部不显示


//添加行政区
function Add_District(area, color="#10102D") {
      //加载行政区划插件
      AMap.service('AMap.DistrictSearch', function() {
            var opts = {
                  extensions: 'all', //返回行政区边界坐标组等具体信息
                  subdistrict: 1, //返回下一级行政区
                  level: 'district' //设置查询行政区级别:city 市,district 区/县
            };
            //实例化DistrictSearch
            district = new AMap.DistrictSearch(opts);
            //行政区查询
            district.search(area, function(status, result) {
                  var bounds = result.districtList[0].boundaries;
                  var polygons = [];
                  if (bounds) {
                        for (var i = 0, l = bounds.length; i < l; i++) {
                              //生成行政区划polygon
                              var polygon = new AMap.Polygon({
                                    map: map,
                                    path: bounds[i],
                                    fillColor:color, //区块背景色
                                    fillOpacity: 0.3, //区块透明度
                                    strokeColor: '#4A90E2', //线颜色
                                    strokeWeight: 1, //线大小
                              });
                              polygons.push(polygon);
                        }
                        map.setFitView();//地图自适应
                  }
            });
      });
}

//区域遮罩层,area为当前只显示的区域,别的全部不显示
function Only_Display(area, color="#10102D") {
      var opts = {
            extensions: 'all', //返回行政区边界坐标组等具体信息
            subdistrict: 1, //返回下一级行政区
            level: 'district' //设置查询行政区级别:city 市,district 区/县
      };
      //实例化DistrictSearch
      district = new AMap.DistrictSearch(opts);
      //行政区查询
      district.search(area, function(status, result){
            //外多边形坐标数组和内多边形坐标数组
            var outer = [
                  new AMap.LngLat(-360,90,true),
                  new AMap.LngLat(-360,-90,true),
                  new AMap.LngLat(360,-90,true),
                  new AMap.LngLat(360,90,true),
            ];
            var bounds = result.districtList[0].boundaries;
      
            var pathArray = [
                  outer
            ];
            pathArray.push.apply(pathArray, bounds)
            var polygon = new AMap.Polygon( {
                  pathL:pathArray,            
                  fillColor: '#10102D',//区块背景颜色            
                  fillOpacity: 1,//区块透明度:取值范围[0-1],0表示完全透明,1表示不透明。默认为0.9                  
                  strokeColor: '#4A90E2',//线颜色
                  strokeWeight: 2, //线大小      
                  strokeOpacity:1, //线透明:取值范围[0-1],0表示完全透明,1表示不透明。默认为0.9            
                  //strokeStyle:'solid',//线样式:实线:solid,虚线:dashed
                  /*勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效, 此属性在ie9+浏览器有效 取值:
                   实线:[0,0,0]
                   虚线:[10,10] ,[10,10] 表示10个像素的实线和10个像素的空白(如此反复)组成的虚线
                   点画线:[10,2,10], [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
                   线和10个像素的空白 (如此反复)组成的虚线*/
                  //strokeDasharray:[0,0,0]
            });
            polygon.setPath(pathArray);
            map.add(polygon);
      });
}
</script>


商德地图样式:amap://styles/859154f30ffaec4521b959815da8902d
分享地图样式:lbs.amap.com/dev/mapstyle/mapshare/859154f30ffaec4521b959815da8902d
共享地图样式:lbs.amap.com/dev/mapstyle/clone?id=859154f30ffaec4521b959815da8902d
懂的人自己将样式复制到您的帐号下即可,不懂的自己模拟创建。

运行展示效果如下:
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!