高德地图获取行政区域以及中心点

高德地图设置行政区域以及自定义文本内容，文本内容能够自动放置到中心位置，如果位置有偏差支持手动调整。(ps: turf.js地理空间分析库，处理各种地图算法)

/*** type，显示级别district 、 province、city* areaname ,行政区名字* labePosition,文字位置，没有手动设置中心点，自动设置* */
drawBounds('district','越秀区',[113.28637,23.127901]);

在这个方法功能里面，耗费点时间的是获取文本的中心点，设置自定义的文本样式之后，文本的位置设定耗费了一点点时间，通过设置最初点+中间点计算平均不理想，然后又通过turfjs库处理(ps: turf.js地理空间分析库，处理各种地图算法)进行处理，由于还需要进行处理入参的处理，所以又找了找高德返回的数据，发现 result.districtList[0] 返回的变量中含有中心点：

var bounds_center = result.districtList[0].center;

尝试后发现部分坐标有点便宜，然后增加手动调整，当文字位置没有手动设置中心点时，自动设置文字中心点，源代码如下

<!doctype html>
<html>
<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><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/><style>html,body,#container{margin:0;height:100%;}.input-item-text{width:7rem;}</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="visibility: hidden"><label style='color:grey'>行政区边界查询</label><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" >行政级别</span></div><select id="level"><option value="district">district</option><option value="city">city</option><option value="province">province</option></select></div><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" >名称/adcode</span></div><input id='district' type="text" value='朝阳区'></div><input id="draw" type="button" class="btn" value="查询" />
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=改成自己key&plugin=AMap.DistrictSearch"></script>
<script type="text/javascript" src="turfjs/turf.min.js"></script>
<script type="text/javascript">//初始化地图对象，加载地图var map = new AMap.Map("container", {resizeEnable: true,center: [113.259952,23.136613],//地图中心点zoom: 9.5, //地图显示的缩放级别mapStyle: 'amap://styles/35bcbfacdd429dfe3d4fc5848ffa392e',showBuildingBlock: false});var district = null;var polygons=[];/*** type，显示级别district 、 province、city* areaname ,行政区名字* labePosition,文字位置* */function drawBounds(type,areaname,labePosition) {//加载行政区划插件if(!district){//实例化DistrictSearchvar opts = {subdistrict: 0,   //获取边界不需要返回下级行政区extensions: 'all',  //返回行政区边界坐标组等具体信息level: 'district'  //查询行政级别为 市};district = new AMap.DistrictSearch(opts);}//行政区查询district.setLevel(type);district.search(areaname, function(status, result) {console.log("---document.getElementById('level').value:",document.getElementById('level').value);var bounds = result.districtList[0].boundaries;var bounds_center = result.districtList[0].center;if (bounds) {for (var i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonvar polygon = new AMap.Polygon({strokeWeight: 3,path: bounds[i],fillOpacity: 0,fillColor: '#80d8ff',strokeColor: '#80d8ff'});polygons.push(polygon);}}map.add(polygon);//计算中心点var centroid =bounds_center;console.log("centroid,",centroid);let polygonsCenter = bounds_center;if(labePosition!=null&&labePosition!=''){//如果手动设置了中心点polygonsCenter = labePosition;}// 创建纯文本标记var text = new AMap.Text({text:areaname,anchor:'center', // 设置文本标记锚点draggable:true,cursor:'pointer',angle:0,style:{'padding': '.75rem 1.25rem','margin-bottom': '1rem','border-radius': '.25rem','background-color': 'rgba(255,255,255,0)','width': '15rem','border-width': 0,'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, 0)','text-align': 'center','font-size': '12px','color': 'rgba(255,255,255,1)'},position: polygonsCenter});text.setMap(map);});}/*** 画行政区*/function initArea(){map.remove(polygons)//清除上次结果polygons = [];drawBounds('district','越秀区',[113.28637,23.127901]);//没有手动设置中心点，自动设置drawBounds('district','天河区',[113.36117,23.155445]);//没有手动设置中心点，自动设置drawBounds('district','白云区',[113.272712,23.25706]);//没有手动设置中心点，自动设置drawBounds('district','从化区');//没有手动设置中心点，自动设置drawBounds('district','荔湾区',[113.218969,23.067025]);//没有手动设置中心点，自动设置drawBounds('district','黄埔区',[113.481006,23.180997]);//没有手动设置中心点，自动设置drawBounds('district','花都区');//没有手动设置中心点，自动设置drawBounds('district','番禺区');//没有手动设置中心点，自动设置drawBounds('district','南沙区',[113.566774,22.706145]);//没有手动设置中心点，自动设置drawBounds('district','海珠区',[113.316774,23.086145]);//没有手动设置中心点，自动设置drawBounds('district','增城区',[113.716774,23.286145]);//没有手动设置中心点，自动设置map.setFitView(polygons);//视口自适应}initArea();
</script>
</body>
</html>

高德地图获取行政区域以及中心点相关推荐

高德地图获取当前屏幕中心点的经纬度
公司有个需求就是要随着屏幕的改变而加载附近的商户信息. 那么高德地图获取当前屏幕中心点的经纬度呢? 核心方法:aMap.setOnCameraChangeListener(this); 实现接口: @ ...
从高德地图获取行政区域数据
import requests key='' #从高德开发平台获取自己的key值 def get_districts(key,adcode): #adcode 字符串格式url='https://re ...
vue 获取当前位置高德_vue高德地图获取当前位置
一:安装依赖 npm install vue-amap --save 二:main.js中的配置 import VueAMap from 'vue-amap'; Vue.use(VueAMap); V ...
android 高德地图 sh1,百度、高德地图获取发布版（Release）SHA1
一.简介: 在百度.高德地图开发中,申请key的时候,要两个版本的sha1值.一个是开发版(debug),一个是发布版(release). debug版本的sha1比较好获取,网上资料一堆,这里引用一 ...
flutter集成高德地图获取位置
flutter集成高德地图获取位置准备工作在创建安卓应用获取SHA1 获取当前位置添加依赖文件配置 build.gradle文件配置 AndroidManifest.xml配置获取定位准 ...
高德地图获取可视区域内四角坐标（东北，东南，西南，西北）
高德地图获取可视区域内四角坐标(东北,东南,西南,西北) 场景:当需要实现查询某坐标区域内的所有共享单车,那么常规操作就是把所选区域内的左上和右下两点经纬度给到后端.获取方法如下: // 初始化地图m ...
java api从高德地图获取某个位置的经纬度
1.代码展示 import com.fasterxml.jackson.databind.JsonNode; import com.ning.http.client.AsyncHttpClient; ...
Java从高德地图获取全国地铁站数据
Java从高德地图获取全国地铁站数据. 数据来源(高德地图):http://map.amap.com/subway/index.html?&4401 采集代码 /*** 从高德地图地铁线路同步 ...
微信小程序整合高德地图获取定位经纬度信息
1.登录高德地图https://lbs.amap.com/ a.创建新应用这个key后边整合的时候会用到,精彩继续 b.下载SDK https://lbs.amap.com/api/wx/down ...

高德地图获取行政区域以及中心点

高德地图获取行政区域以及中心点相关推荐

最新文章

热门文章