怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)

简介: 怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)

原由


为什么会有这篇博客,因为我通过半天的查找没有在网上找到广州市白云区 24 镇街的边界 geojson 数据,要不不全,要不就是收费(能理解),并且自己第一次弄这个 geojson 数据确实感觉有点恶心心。希望这篇对同学有所帮助,减少一些不必要的弯路。


下面将我遇到的问题,找到的资源,以及实现 24 镇街边界 geojson 数据的过程简单梳理一下。



什么是 geojson 数据


GeoJSON 是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法(JavaScript Object Notation, 简称JSON)的地理空间信息数据交换格式。


   GeoJSON 使用地理坐标参考系统 World Geodetic 系统 1984,十进制度。


   GeoJSON 对象可以表示几何、特征或者特征集合。


   GeoJSON支持下面几何类型:点、线、面、多点、多线、多面和几何集合。


   GeoJSON里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。


   2015 年,互联网工程任务组 (IETF) 与原始规范作者一起组建了GeoJSON WG,以标准化 GeoJSON。 RFC 7946 于 2016 年 8 月发布,是 GeoJSON 格式的新标准规范,取代了 2008 年 GeoJSON 规范。


geojson.io:在线绘制GIS数据的工具网站


   一个在线生成 geojson、kml、Topojson 等数据格式的一个网站,http://geojson.io/,在上面可以通过画线、画面等方式生成geojson。在地图控件中绘制的图形数据,会实时以 GeoJson 的格式显示出来。对于多边形还可以通过点击进行属性修改。Save 命令可以保存成相应的格式。数据可保存在 GitHub。


在线绘制GIS数据的工具网站


先看个例子:


Example:A GeoJSON FeatureCollection:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "prop0": "value0"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0],
          [103.0, 1.0],
          [104.0, 0.0],
          [105.0, 1.0]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [100.0, 0.0],
            [101.0, 0.0],
            [101.0, 1.0],
            [100.0, 1.0],
            [100.0, 0.0]
          ]
        ]
      },
      "properties": {
        "prop0": "value0",
        "prop1": {
          "this": "that"
        }
      }
    }
  ]
}


然后打开网址,把 json 数据粘贴进去:显示如下

e24c4143f024480aadf1ae4421324f27.png



datav:数据可视化平台


数据可视化平台:范围选择器,定位到白云区,但是不能再向下面的镇街层级了,这个只能生成白云区的 geojson 数据,边界生层器跟层级生成器,感觉有点复杂,没有怎么研究,这里就不展开

比如:可以自己搜索 440111 定位到白云区


a110ee687df3431b83f51e1e0539e2f8.png


上图最右边那个复制的数据就是白云区的边界数据了,我们试一下,打开http://geojson.io/

c96a064b9f9744b6ad6c735f01dcbaec.png


POI数据:打造最专业POI数据


我请教了之前同事,问问他们之中有没有用过广州市白云区 24 镇街的 geojson 数据。他们提供了一个网站给我,没错就是POI数据:打造最专业POI数据,里面有高德跟百度的行政划分


052f4ac9a3c548318e11f2242b982a40.png


但是很可惜,里面我找到白云区的时候,发现只有 18 个镇街的数据

白云区边界地图

d73ce41cd3914672b8054c440a70c546.png


分别如下:


655e285c34104a24adf0b164a611119a.png


比如我们要下载钟落潭镇边界地图,点击按钮下载即可


9f3047244bdb41979c4b19f83359c439.png




BIGEMAP全能版:谷歌卫星地图下载器

1、下载 BIGEMAP 全能版

首先打开网址,下载 BIGEMAP 全能版


0a35f4dc669244289e9220d69aa67c3e.png



2、安装

解压 bmsetup.rar, 然后双击,按提示一步一步安装就行。


a2f6447de0df47f1babb2ec03b3388d2.png


3、打开 Bigemap GIS Office


74fc8431296a4751a006b4ae88482d69.png

然后进入画面,先关闭



f320a383736046e08b80d620e3a9f8b4.png



然后选择地图


a16f85a7c0ff4bc1a85e7c309f68518f.png



在切换到地图,选择到白云区,我们可以看到有 22 个镇街,我问了一下客户为什么没有 24 个,她说会定期同步的,但我等不及了,只能靠自己画其他几个了。


ba423c305aa1447987024eba51aa0dae.png


4、导出对应镇街的kml文件


   KML(Keyhole Markup Language,Keyhole 标记语言)最初是由Google 旗下的Keyhole 公司开发和维护的一种基于XML 的标记语言,利用XML 语法格式描述地理空间数据(如点、线、面、多边形和模型等),适合网络环境下的地理信息协作与共享。2008 年4月,KML的最新版本2.2 被OGC 宣布为开放地理信息编码标准,并改由OGC 维护和发展。


我们以钟落潭镇为例,我们选择导出边界。

be65e955ebf84e1f805dc311e007df14.png


然后我们就会得到 22 个镇街的 kml 文件。

ec808e081e424b6da13f588dfb374dbf.png


5、将 kml 文件导入 geojson.io 工具网站

我们打开在线绘制GIS数据的工具网站 geojson.io,点击 Open,选择 File,选择对应的 kml 文件。


014c088630b54c378f05cc8e7dc642ac.png


打开之后如下:


image.png


我们可以添加完 22 个,里面 FeatureCollection 里可以包含多个 Feature,而右边生成的数据正是我们需要的 22 镇街的 geojson 数据。



目录
相关文章
|
24天前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
107 1
|
2月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
127 23
echarts地图数据信息流向图效果
|
28天前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
50 2
|
24天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
331 0
|
28天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
48 1
|
24天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
150 0
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
3月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
450 1
微信小程序使用echarts图表(ec-canvas)
|
3月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作

热门文章

最新文章

下一篇
无影云桌面