百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域

highcharts 是提供地图数据包的:https://www.highcharts.com/docs/maps/map-collection

echart矢量地图或者地图绘制矢量图层,GeoJSON哪里提供呢?

dataV提供数据下载,DataV.GeoAtlas地理小工具系列

这些数据也是从高德上面来的,翻了下高德地图的api,其实可以直接获取

高德地图获取地图边界数据

区域查询获取边界数据

行政区域查询官方文档:行政区域查询-API文档-开发指南-Web服务 API | 高德地图API

restapi.amap.com/v3/config/district?key=您的key&keywords=山东&subdistrict=2&extensions=all

返回的polyline为坐标边界数据,用;分隔点坐标数组,在用,分隔出坐标数组即可。

AMap.DistrictSearch插件查询

搜索服务-参考手册-地图 JS API | 高德地图API

let opts = {

  // 设置显示下级行政区级数 可选值:0、1、2、3等数字

  subdistrict: 2,

  // base:不返回行政区边界坐标点;all:只返回当前查询district的边界值,不返回子节点的边界值目前不能返回乡镇/街道级别的边界值

  extensions: 'all',

  level: data.level

}

var district = new AMap.DistrictSearch(opts);

district.search('河北省', function (status, result) {result.districtList[0].boundaries})

官方demo 

获取的数据,需要自己转GeoJSON数据,插件geojson - npm

var GeoJSON = require('geojson')
var data = [{name: 'Location A', category: 'Store', street: 'Market', lat: 39.984, lng: -75.343}]
var data2 = { name: 'Location A', category: 'Store', street: 'Market', lat: 39.984, lng: -75.343 }

GeoJSON.parse(data, {Point: ['lat', 'lng']})
GeoJSON.parse(data2, {Point: ['lat', 'lng'], include: ['name']})
var data3 = [
  {
    x: 0.5,
    y: 102.0,
    prop0: 'value0'
  },
  {
    line: [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]],
    prop0: 'value0',
    prop1: 0.0
  },
  {
    polygon: [
      [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
    ],
    prop0: 'value0',
    prop1: {"this": "that"}
  }
]
GeoJSON.parse(data3, {'Point': ['x', 'y'], 'LineString': 'line', 'Polygon': 'polygon'});

推荐阅读《GIS坐标系:WGS84,GCJ02,BD09,火星坐标,大地坐标等解析说与转换

此方法只能获取当前行政区域边界,无法获取子区域边界。

行政区划浏览获取边界数据

DistrictExplorer(行政区划浏览)官方文档:概述-地图 JS API | 高德地图API

Feature直接取自GeoJSON。AreaNode之中无论父级区划(ParentFeature)还是子级区划(SubFeature),都可以获取地图坐标边界数据,但是 parentFeature 不是标准GeoJSON格式,需要自己转换。

//创建一个实例
var districtExplorer = new DistrictExplorer({
  map: map //关联的地图实例
})
var adcode = 100000 //全国的区划编码
districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

  if (error) {
    console.error(error)
    areaNode.Feature 
    return
  }
  //Feature直接取自GeoJSON
  var subFeatures = areaNode.getSubFeatures()
  var parentFeature = areaNode.getParentFeature()
})

方法很简单。

百度地图获取行政区域边界

通过BMap.Boundary(),获取地图边界数据。

var bdary = new BMap.Boundary();

bdary.get(name, function(rs){rs.boundaries})

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom();

function getBoundary(){
  var bdary = new BMap.Boundary();
  var name = document.getElementById("districtName").value;
  bdary.get(name, function(rs){       //获取行政区域
    map.clearOverlays();        //清除地图覆盖物
    var count = rs.boundaries.length; //行政区域的点有多少个
    for(var i = 0; i < count; i++){
      var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"});
      //建立多边形覆盖物
      console.log(rs.boundaries)
      map.addOverlay(ply);  //添加覆盖物
      map.setViewport(ply.getPath());    //调整视野
    }
  });
}

百度地图的数据是 火星坐标 再加密的,个人不推荐使用百度地图上的数据获取到的经纬度。

转载本站文章《百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域》,
请注明出处:百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域 - WebGIS网页地图开发笔记手札 - 周陆军的个人网站

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
GeoJSON是一种用于表示地理空间数据的开放标准格式。利用GeoJSON工具可以在地图上绘制行政区边界。而基于百度地图GeoJSON工具,就是为了在百度地图上使用GeoJSON格式的数据绘制行政区边界。 使用百度地图GeoJSON工具首先需要获取到行政区边界GeoJSON数据。这可以通过百度地图开放平台提供的行政区边界查询接口来获取。根据所需要的行政区域,通过接口查询并获取到对应的GeoJSON数据获取GeoJSON数据后,可以使用百度地图提供的JavaScript API来在地图上绘制行政区边界。通过将GeoJSON数据传入地图的overlay对象中,可以动态地在地图上绘制出行政区边界边界线和填充色。 绘制行政区边界的过程中,可以根据需求来对绘制样式进行自定义。例如,可以设置边界线的颜色、粗细、透明度等属性,还可以设置填充色的颜色、透明度等属性,以实现不同的视觉效果。 绘制完成后,可以通过交互操作来对已绘制的行政区边界进行展示和控制。例如,可以通过添加鼠标事件,实现鼠标悬浮显示行政区名称,点击区域展示详情等功能,提供更好的用户体验。 综上所述,基于百度地图GeoJSON工具能够方便地在地图上绘制行政区边界。通过获取GeoJSON数据并利用百度地图JavaScript API进行绘制,可以实现自定义样式、交互操作等功能,为用户提供更加直观、灵活的地图展示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值