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

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

dataV提供数据下载,http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.75386074913891&zoom=4.5

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

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

区域查询获取边界数据

行政区域查询官方文档:https://lbs.amap.com/api/webservice/guide/api/district

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

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

AMap.DistrictSearch插件查询

https://lbs.amap.com/api/javascript-api/reference/search#m_AMap.PlaceSearch

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数据,插件https://www.npmjs.com/package/geojson

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(行政区划浏览)官方文档:https://lbs.amap.com/api/javascript-api/reference-amap-ui/geo/district-explorer

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数据获取并绘制行政区域》,
请注明出处:https://www.zhoulujun.cn/html/GIS/WebGIS/8155.html

百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域的更多相关文章

  1. 百度&高德地图小区景点边界轮廓实现

    经常的我们在使用地图功能时,会发现在选择一个小区或者一个热门景点的时候,地图上面会给出其边界轮廓,能够方便我们知道其范围大小,有时候在我们使用地图组件的时候,也会面临着类似的需求.比如在地图上面标识出 ...

  2. 从高德采集最新的省市区三级坐标和行政区域边界,用js在浏览器中运行

    本文描述的是对国家统计局于2019-01-31发布的<2018年统计用区划代码和城乡划分代码(截止2018年10月31日)>中省市区三级的坐标和行政区域边界的采集. 本文更新(移步查阅): ...

  3. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  4. leaflet中如何优雅的解决百度、高德地图的偏移问题

    话不多说,先上效果图 以前在做项目时,经常会听到客户说,你们这个地图是哪来的,太丑了,能不能换成百度地图--高德也行-- 大家生活中,基本上都已经习惯了使用百度地图和高德地图,而在做项目时,用这两个地 ...

  5. GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样?

    GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样? 先了解一下 高德地图 采用: GCJ-02 (不可逆) 百度百科: http://baike.baidu.com/link?url ...

  6. iOS打开百度地图、高德地图导航

    1.判断手机里是否已经安装了百度地图或者高德地图: BOOL hasBaiduMap = NO; BOOL hasGaodeMap = NO; if ([[UIApplication sharedAp ...

  7. Android笔记:百度地图与高德地图坐标转换问题

    安卓项目使用了百度地图的定位SDK,web端使用的也是百度地图, 后来发现界面显示百度地图不如高德效果好,web改用高德地图,原本的百度地图坐标是可以直接使用的,由于高德和百度地图的坐标系不一致 要如 ...

  8. iOS 地图坐标系之间的转换WGS-84世界标准坐标、GCJ-02中国国测局(火星坐标,高德地图)、BD-09百度坐标系转换

    开发过程中遇到地图定位不准确,存在偏差.首先确认你获取到的坐标所在坐标系跟地图数据是不是相匹配的. 常用的地图SDK:高德地图使用的是GCJ-02(也就是火星坐标系),百度使用的是BD-09百度坐标系 ...

  9. iOS判断并使用百度地图 高德地图 导航 (使用URI,不集成sdk)

    [objc] view plaincopy  1. BOOL hasBaiduMap = NO;   2.         BOOL hasGaodeMap = NO;   3.            ...

  10. Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

    原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...

随机推荐

  1. QT(6)-QStandardItemModel

    @ 目录 1 说明 2 函数 2.1 构造函数 2.2 追加列\行 2.3 清除.删除并返回指定行或列 2.4 查找 2.5 设置水平\垂直表头项目 2.6 获得模型索引 2.7 插入 2.8 根项目 ...

  2. python代码签到学习同

    仅用于学习使用 import requests,json,time #填入Cookie headers={ "Cookie": "", "User-A ...

  3. Java Exception最佳实践(转)

    https://www.dubby.cn/detail.html?id=9033 1.异常介绍 2.Java中的异常介绍 3.自定义异常 4.几个建议 1)不要生吞异常 2)申明具体的异常 3)尽可能 ...

  4. Qt+FFmpeg播放mp4文件视频

    关键词:Qt FFmpeg C++ MP4 视频 源码下载在系列原文地址. 先看效果. 这是一个很简单的mp4文件播放demo,为了简化,没有加入音频数据解析,即只有图像没有声音. 音视频源的播放可以 ...

  5. 万字解析XML配置映射为BeanDefinition的源码

    本文分享自华为云社区<Spring高手之路16--解析XML配置映射为BeanDefinition的源码>,作者:砖业洋__. 1. BeanDefinition阶段的分析 Spring框 ...

  6. Netty源码学习5——服务端是如何读取数据的

    系列文章目录和关于我 零丶引入 在前面<Netty源码学习4--服务端是处理新连接的&netty的reactor模式>的学习中,我们了解到服务端是如何处理新连接的,即注册Serve ...

  7. 深度掌握TypeScript中的重载【函数重载、方法重载】

    深度掌握TypeScript中的重载[函数重载.方法重载] 1. 函数重载,方法重载的重要性 著名前端流行框架底层都用到函数重载,例如:Vue3 底层源码就多处使用到带泛型的函数重载.很多前端面试更是 ...

  8. Linux笔记03: Linux常用命令_3.2目录操作命令

    3.2 目录操作命令 3.2.1 ls命令 ●命令名称:ls. ●英文原意:list directory contents. ●所在路径:/usr/bin/ls. ●执行权限:所有用户. ●功能描述: ...

  9. 微服务项目-小Q视频网

    1.后台管理系统(更新中...) (1)讲师列表 (2)添加讲师 (3)导入课程分类 (4)课程分类列表 其他功能就不一一截图了,后台详细功能如下 2.前台会员系统(更新中...) (1)前台的技术栈 ...

  10. 最好用的AI换脸软件,rope下载介绍

    随着AI技术的广泛运用,市面上的换脸软件也多了起来,今天给各位介绍其中的王者Rope! 先上两个动图,给大伙看看效果 rope是如何实现这种自然的效果呢?这得益于机器学习技术的不断发展,rope经过深 ...