【三维地图】开发攻略 —— 详解“GeoJSON”技术和应用场景

news/2024/4/26 8:36:54/文章来源:https://www.cnblogs.com/powertoolsteam/p/16628163.html

GeoJSON ，一个用于存储地理信息的数据格式。GoeJSON对象可以表示几何、特征或特征集合，支持：点、线、面、多点、多线、多面和几何集合。在基于平面地图，三维地图中都需要用到的一种数据类型。
由于这种格式在三维地图中的优秀属性，使用它我们不仅可以轻松实现地图类功能，更重要的是在3D效果展示上也具有不凡的表现。

GeoJSON数据结构图

念介绍：

  • GeoJSON是一种对各种地理数据结构进行编码的格式。
  • GeoJSON对象可以表示几何（Geometry）、特征（Feature）或者特征集合（FeatureCollection）。
  • GeoJSON支持下面几何类型：点（Point）、线（LineString）、面（Polygon）多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）和几何集合（GeometryCollection）。
  • GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

一个完整的GeoJSON数据结构可以称为一个对象。在GeoJSON里，对象由名/值对–也称作成员的集合组成。
了解了概念之后，我们对GeoJSON的神秘面纱更神秘了，它究竟可以做什么？上面我们提到，GeoJSON就是一个地理信息的数据结构，那么这个数据如何记录的？
接下来给大家详细介绍一下，GeoJSON的整个数据结构。

一个标准的GeoJSON结构：

{"type": "Feature","geometry": {"type": "Point","coordinates": [125.6, 10.1]},"properties": {"name": "Dinagat Islands"}
}

最外层：

  • type："Feature"表示一个特征要素，"FeatureCollection"表示为特征要素的集合
  • geometry：存储该特征要素的实际形状描述
  • properties：存储该要素的属性

geometry：

  • type：存储要素类型（Point(点),LineString,Polygon,MultiPoint(多点),MultiLineString(多线)和MultiPolygon(多面)）
  • coordinates：坐标（存储图形坐标）

GeoJSON的基础结构了解清楚，接下来就是如何在实际案例中用的。先看看其中的几个实现效果：
动画镜头

贴地点图

飞线

热力图

点图

立体面图

海量点图标

通过以上效果，可以看到基于地图实现非常多并且非常酷炫的显示效果。对于GeoJSON的应用领域有了新的了解。而这些特性是基于地图基础之上的。接下来就介绍一下从基础领域到显示领域的技术应用。
GeoJSON的基础应用：地图
GeoJSON的高级应用：webGL

技术应用解决方案

基于我们已经了解的基础知识，GeoJSON是由点线面组成，因此目前高德地图，百度地图等地图类软件也都推出了对应的api，用来解析GeoJSON。做的相对成熟。
这里就以高德地图为例，介绍一下技术人员基于高德地图应用GeoJSON的技术方案。
以上功能基于高德地图的Loca 数据可视化，是一个基于高德地图JS API 2.0的高性能地图数据可视化库。

高级可视化实现

Loca.GeoJSONSource：绑定geojson 格式的数据源，一个数据源可以给多个图层同时提供数据。一个geojson数据源可以同时拥有点、线、面的数据类型，每个图层绘制的时候会自动获取 合适的数据类型进行渲染。
显示效果：

示例代码：

<script>var map =  new AMap.Map('map', {zooms: [4, 8],zoom: 4.5,showLabel: false,viewMode: '3D',center: [105.425968, 35.882505],mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',});var loca = new Loca.Container({map,opacity:0,});var geo = new Loca.GeoJSONSource({url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/cuisine.json',});var pl = window.pl = new Loca.PointLayer({zIndex: 10,blend: 'lighter',});var style = {radius: 3.5,unit: 'px',color: '#3C1FA8',borderWidth: 0,blurWidth: 3.5,}pl.setSource(geo);pl.setStyle(style);loca.add(pl);var dat = new Loca.Dat();dat.addLayer(pl);</script>

通过示例代码可以看到：解析GeoJson，只需要调用 Loca. GeoJSONSource即可，是需要简单几句代码，就可以实现酷炫效果。已经大大降低了对于底层技术的了解。
接下来再看另一个示例：区域覆盖。

示例代码：

<script type="text/javascript">var map = new AMap.Map('container', {center: [107.943579, 30.131735],zoom: 7});ajax('../chongqing.json', function(err, geoJSON) {if (!err) {var geojson = new AMap.GeoJSON({geoJSON: geoJSON,getPolygon: function(geojson, lnglats) {return new AMap.Polygon({path: lnglats,fillOpacity: 1,	strokeColor: 'white',fillColor: 'red'});}});map.add(geojson);log.success('GeoJSON 数据加载完成')} else {log.error('GeoJSON 服务请求失败')}})
</script>
其中加载GeoJson关键代码部分为：
var geojson = new AMap.GeoJSON({geoJSON: geoJSON,getPolygon: function(geojson, lnglats) { return new AMap.Polygon({path: lnglats,fillOpacity: 1,	// 透明度strokeColor: 'white',fillColor: 'red'});}});map.add(geojson);

示例中，已经将代码量降到了最低，只需要了解基础的前端代码，就可以实现。
此案例中所引用的GeoJson代码摘取：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"id": "500242","name": "酉阳土家族苗族自治县","cp": [108.8196,28.8666],"childNum": 1},"geometry": {"type": "Polygon","coordinates": [[[108.3142,28.9984],[108.3252,29.0039],[108.3142,28.9984]………………………]]}}]
}

这段代码的自述：我是一段区域代码，其中包括了好几个子项集合，作为顶头上司的我，type为 FeatureCollection ，我的小兄弟都在features 节点中，这里定义着每个人的个性，他们的头标签包括一下几个type为 Feature ，properties 节点中，有他们的身份证，名称，以及位置信息，当然也包括他们有几个手下。基础地图中的GeoJson基本内容就是这么简单。

每个小兄弟的geometry节点，为他们的活动区域， type 为 Polygon ，coordinates 这里就代表着活动区域。
所以按照方法，绑定GeoJson，就可以显示在地图中。
地图，是GeoJson的战场，目前市面上所有的地图都是基于GeoJson的格式来完成的。
通过解析，发现其实GeoJson也不是那么神秘。

前面介绍的，都是基于二维层面的地图，接下来介绍一下GeoJson的高级用法，带有高度的格式如何实现和应用。
3D效果示例

代码示例：

var geo = new Loca.GeoJSONSource({url: 'geo.json',});
var pl = new Loca.PolygonLayer({zIndex: 120,shininess: 10,hasSide: true,cullface: 'back',depth: true,});
pl.setSource(geo);对应GeoJson格式：
{"type": "FeatureCollection","name": "sh_building_center","crs": {"type": "name","properties": {"name": "urn"}},"features": [{"type": "Feature","properties": {"mainKey": 50001,"h": 18},"geometry": {"type": "Polygon","coordinates": [[[121.480519,31.250787],[121.480127,31.250616],[121.480132,31.25061],[121.480374,31.25061],[121.480578,31.250707],[121.480519,31.250787]]]}}]
}

在features 节点中的properties
看了代码后，发现3D跟平面地图处理过程几乎一致，这也从侧面反应了，其实在目前阶段的GeoJson使用中，都是基于地图所开放的api来实现的。技术的革新，让我们基础开发者，也可以实现高级的地图应用功能。总是一句话，GeoJson的诞生，就是为了让地图应用开发更加简单易用。

应用场景

我们基于GetJSON 开发地图插件往往不是独立的去显示一个地图动效就结束了，而是需要实现“地图可视化”， 将地理数据转换成可视化形态，通过将具有地域特征的数据或者数据分析结果形象地表现在地图上，使得用户可以更加容易理解数据规律和趋势。地图可视化可以将业务数据显示在相关地理数据中，更直白地展现出业务数据。

很多BI 工具解决数据可视化大屏展示的功能，但在地图可视化展示时提供的原生样式会有很多样式，功能的限制，因此也BI工具开放了可视化的插件开发，供开发人员基于插件开发机制，来实现满足项目需求的可视化插件开发。

此外大家如果感兴趣可以尝试体验在线demo：
https://www.grapecity.com.cn/solutions/wyn/demo

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_2926.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JavaScript设计模式及代码实现——单例模式

JavaScript设计模式及代码实现——单例模式

单例模式1 定义保证一个类仅有一个实例，并提供一个访问它的全局访问点。2 应用时机当一个类的实例被频繁使用，如果重复创建这个实例，会无端消耗资源。比如 dialog 弹窗会被全局重复使用 业务功能本身决定了全局只能有唯一的实例。比如 redux 管理的数据，只能有唯一的一份3 …
阅读更多...
ubuntu18.04屏幕录制Vokoscreen

ubuntu18.04屏幕录制Vokoscreen

Vokoscreen 可被视为具有良好分类菜单的简单屏幕录制机的更好 UI 版本。- 除了在simplescreenrecorder中包含的所有功能，Vokoscreen 还支持外部网络摄像头以及内置网络摄像头。 然而，它不支持在simplescreenrecorder中可用的 JACK 音频。 下载命令：sudo apt install vokoscr…
阅读更多...
磁共振成像原理

磁共振成像原理

目录1. 原子核的自旋2. 进动3. 磁共振现象4. 射频脉冲1. 原子核的自旋 原子有原子核和绕核运动的电子组成。 原子核的自旋：质子数和中子数一个为奇数、一个为偶数； 两者都为奇数这两种情况的原子核就会自旋。原子核是带正电，绕自旋轴旋转，效应相当于环形电流，周围会产生磁…
阅读更多...
业务流程可视化-让你的流程图Run起来(7.运行状态持久化轻量工作流支持)

业务流程可视化-让你的流程图Run起来(7.运行状态持久化轻量工作流支持)

前言 感谢大家阅读本项目系列文章和对项目的支持。分享一下我对这个项目的新的改进。 之前项目做到了流程设计可视化和流程运行结果可视化。 本期发布的版本中实现了中间的运行过程的实时可视化，和流程状态持久化问题。 大家可以根据项目提供的接口自由扩展自己的工作流实现。…
阅读更多...
DataGrip连接Mysql报08S01解决方案

DataGrip连接Mysql报08S01解决方案

以前正常使用的GataGrip，突然在某天报下面的错误提示:08S01 [08S01]Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server. No appropriate protocol (protocol is…
阅读更多...
数据结构面试总结【第一弹】

数据结构面试总结【第一弹】

数据结构面试总结 目录数据结构面试总结1.数据结构基本概念1.1 数据结构三要素2.线性表2.1 数组与链表有什么关系2.2 线性表的存储结构2.3 头指针和头节点的区别2.4 栈和队列的区别3.树3.1 度数为2的树与二叉树有什么区别3.2 唯一确定一棵二叉树3.3 二叉排序树3.4 最小生成树有…
阅读更多...
优爱酷模拟点击自动翻页_自动展开所有批量网页转mhtml单网页保存

优爱酷模拟点击自动翻页_自动展开所有批量网页转mhtml单网页保存

优爱酷模拟点击自动翻页_自动展开所有批量网页转mhtml#涨知识# 终于可以解放双手了! 1、页面有很多“折叠”的需要“展开”的内容，例如：点击查看全文，展开 等的网页，1个还好，多个“展开”如何解决？如果能#自动展开#岂不美哉？ 2、普通网页翻页后链接会变化成不一样的，遇…
阅读更多...
Ps 2022在M1 mac上导出 PNG 格式发生未知错误如何解决？

Ps 2022在M1 mac上导出 PNG 格式发生未知错误如何解决？

Photoshop 2022 for mac 在M1上导出 PNG 时，会提示“发生了未知错误”，即使点击“导出”按钮，导出的图片也是一个空白文件。小编教给大家 Ps 2021在 M1 mac上导出 PNG 格式发生未知错误的解决方法。1.打开 PhotoShop 的首选项 >常规，如下图所示：（也可以通过快捷键 Com…
阅读更多...
图数据库入门教程（二）认识tinkerpop与gremlin

图数据库入门教程（二）认识tinkerpop与gremlin

上一篇文章我们对图数据库有了一个简单的理解，对于关系的计算优雅而快速，适用与一些关系计算的场景，比如社交网络、金融反欺诈、商机发现、智能推荐等，想了解更多可以看一下阿里云gdb的文档https://help.aliyun.com/document_detail/112465.html。 当前图数据库天下的形式 …
阅读更多...
设计模式之（3）——抽象工厂方法模式

设计模式之（3）——抽象工厂方法模式

定义：抽象工厂模式简单地讲，就是提供一个超级工厂，围绕这个超级工厂创建其他工厂；抽象工厂模式提供一个创建一些列相关或者相互依赖对象的接口；在此之前我们先来讲一下产品等级和产品族的概念；相同的产品等级就是相同的同一类的产品，比如美的冰箱、格力冰箱、海尔冰箱，…
阅读更多...
Mysql----事务

Mysql----事务

《需求》 《操作》 《细节》
阅读更多...
分类数据展示功能_缓存优化_分析

分类数据展示功能_缓存优化_分析

分类数据展示功能_缓存优化_分析 对数据进行一个缓存优化，分析发现：分类的数据在每一次页面加载后会重新请求数据库来加载，对数据库的压力比较大，而且这数据不会经常发送变化，可使用redis来缓存这个数据 分类数据展示功能_缓存优化_代码实现public class CategoryServiceI…
阅读更多...
日常问题： 上线确认

日常问题： 上线确认

作为开发，手头没事的时候，担心自己没参与大项目，年终没产出。而真正需求到来的时候，却是狂风暴雨一般，密集且时间紧迫。在紧锣密鼓996之后，终于迎来了上线。 但这一天不太顺利。背景 xxx正式上线。上线前，方案强调要开发把所有配置都给到他，他要确认下。当时觉得有问题…
阅读更多...
第一个代码Hello World!

第一个代码Hello World!

HelloWorld新建一个文件夹，存放代码新建一个Java文件 文件后缀为.java名为Hello.java[注意]要显示系统后缀名编写代码 public class Hello{ public static void main(String[] arge){ System.out.print("Hello,World!"); }} 打开cmd 路径需要是Hello.j…
阅读更多...
Linux

Linux

1、关机命令命令 说明sync 将数据由内存同步到硬盘中shutdown 关机shutdown -h 10 10分钟后关机shutdown -h now 立马关机shutdown -h 20:25 指定时间关机shutdown -h +10 10分钟后关机shutdown -r now 系统立马重启shutdown -r +10 10分钟后重启reboot 重启，等于shutdown -r …
阅读更多...
线性布局LinearLayout

线性布局LinearLayout

线性布局中的下级视图有两种排列方式当orientation属性为horizontal时，线性布局中的下级视图在水平方向上从左往右排列 当orientation属性为vetical时，线性布局中的下级视图在垂直方向上从上往下排列线性布局的权重 概念：线性布局的权重，用来表示线性布局中各视图所占比例大…
阅读更多...
NC50439 tokitsukaze and Soldier

NC50439 tokitsukaze and Soldier

在一个游戏中，tokitsukaze需要在n个士兵中选出一些士兵组成一个团去打副本。 第i个士兵的战力为v[i]，团的战力是团内所有士兵的战力之和。 但是这些士兵有特殊的要求：如果选了第i个士兵，这个士兵希望团的人数不超过s[i]。(如果不选第i个士兵，就没有这个限制。) tokitsukaz…
阅读更多...
Dos命令

Dos命令

打开cmdwin+r ->cmd 以管理员身份运行win->windows系统->命令提示符->右键->更多->以管理员身份运行 常用的Dos命令 盘符切换 输入D: 切到D盘 查看当前目录下的所有文件 dir 切换目录 cd (change directory) cd msicheng 从Users文件夹进入其子文件夹msiche…
阅读更多...
个人网盘搭建——搭建Cloudreve并对接onedrive

个人网盘搭建——搭建Cloudreve并对接onedrive

前言 搭建这个主要是为了方便自己备份，顺便可以水一下文章（bushi） 其次是自己有好几个微软的全局账号吃灰，还是想稍微利用一下的，如果有人要子号可以来联系哦，好心的我应该会给你的吧 由于个人使用，不会介绍很难的安装方法。下面会介绍宝塔简单快速的安装方法。后续也许…
阅读更多...
Spring学习笔记（三）——Spring依赖注入

Spring学习笔记（三）——Spring依赖注入

1.Spring Bean属性注入的几种方式 1.1构造函数注入 使用构造函数实现属性注入大致步骤如下：在 Bean 中添加一个有参构造函数，构造函数内的每一个参数代表一个需要注入的属性； 在 Spring 的 XML 配置文件中，通过 <beans> 及其子元素 <bean> 对 Bean 进行定义； …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业