高德地圖,顯示行政區劃圖

發布時間:2021年06月15日      浏覽次數:1186 次
如何使用高德地圖,顯示自己想要的行政區劃圖,實現代碼如下(xià),地圖樣式需要你自己注冊登錄高德地圖進行創建與設置。

<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], //縮放(fàng)範圍
      resizeEnable: false, //調整大(dà)小(xiǎo)
      showIndoorMap: false, //顯示格式
      center:[110.293476, 25.231563],//設置中(zhōng)心點,必須是在你要顯示的區域中(zhōng)心
      features:['point','road','bg'],//地圖要素
      zoomEnable:true, //可縮放(fàng)
      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("資(zī)源縣", "#ccccff");
Add_District("龍勝各族自治縣", "#ff0000");

Only_Display("桂林市"); //僅顯示區域,别的全部不顯示


//添加行政區
function Add_District(area, color="#10102D") {
      //加載行政區劃插件
      AMap.service('AMap.DistrictSearch', function() {
            var opts = {
                  extensions: 'all', //返回行政區邊界坐标組等具體(tǐ)信息
                  subdistrict: 1, //返回下(xià)一(yī)級行政區
                  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++) {
                              //生(shēng)成行政區劃polygon
                              var polygon = new AMap.Polygon({
                                    map: map,
                                    path: bounds[i],
                                    fillColor:color, //區塊背景色
                                    fillOpacity: 0.3, //區塊透明度
                                    strokeColor: '#4A90E2', //線顔色
                                    strokeWeight: 1, //線大(dà)小(xiǎo)
                              });
                              polygons.push(polygon);
                        }
                        map.setFitView();//地圖自适應
                  }
            });
      });
}

//區域遮罩層,area爲當前隻顯示的區域,别的全部不顯示
function Only_Display(area, color="#10102D") {
      var opts = {
            extensions: 'all', //返回行政區邊界坐标組等具體(tǐ)信息
            subdistrict: 1, //返回下(xià)一(yī)級行政區
            level: 'district' //設置查詢行政區級别:city 市,district 區/縣
      };
      //實例化DistrictSearch
      district = new AMap.DistrictSearch(opts);
      //行政區查詢
      district.search(area, function(status, result){
            //外(wài)多邊形坐标數組和内多邊形坐标數組
            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, //線大(dà)小(xiǎo)      
                  strokeOpacity:1, //線透明:取值範圍[0-1],0表示完全透明,1表示不透明。默認爲0.9            
                  //strokeStyle:'solid',//線樣式:實線:solid,虛線:dashed
                  /*勾勒形狀輪廓的虛線和間隙的樣式,此屬性在strokeStyle 爲dashed 時有效, 此屬性在ie9+浏覽器有效 取值:
                   實線:[0,0,0]
                   虛線:[10,10] ,[10,10] 表示10個像素的實線和10個像素的空白(bái)(如此反複)組成的虛線
                   點畫線:[10,2,10], [10,2,10] 表示10個像素的實線和2個像素的空白(bái) + 10個像素的實
                   線和10個像素的空白(bái) (如此反複)組成的虛線*/
                  //strokeDasharray:[0,0,0]
            });
            polygon.setPath(pathArray);
            map.add(polygon);
      });
}
</script>


商(shāng)德地圖樣式:amap://styles/859154f30ffaec4521b959815da8902d
分(fēn)享地圖樣式:lbs.amap.com/dev/mapstyle/mapshare/859154f30ffaec4521b959815da8902d
共享地圖樣式:lbs.amap.com/dev/mapstyle/clone?id=859154f30ffaec4521b959815da8902d
懂的人自己将樣式複制到您的帳号下(xià)即可,不懂的自己模拟創建。

運行展示效果如下(xià):
免責聲明:本站相關技術文章信息部分(fēn)來自網絡,目的主要是傳播更多信息,如果您認爲本站的某些信息侵犯了您的版權,請與我(wǒ)(wǒ)們聯系,我(wǒ)(wǒ)們會即時妥善的處理,謝謝合作!