当前位置:网站首页>WebGIS框架---kalrry
WebGIS框架---kalrry
2022-07-04 21:16:00 【kalrry】
WebGIS框架---kalrry
一、简介
首先了解,WebGL是一种3D绘图协议,只是一个标准,基于此标准,你可以写出MapBox-GL,也可以写出three-GL等框架,它们都是关于web端渲染三维图形的(渲染)引擎
论难度,thingjs(框架)<threejs(引擎)<webgl(接口)
基于WebGL的3D技术在网页中的运用 ThingJS常通过arcgis发布二维地图或者三维地图,然后在客户端调用json实现webgl渲染。
二、为什么我们需要WebGL?
因为html5虽然支持Canvas,但是只能在上面绘制二维图形,所以需要WebGL来绘制三维图形。
三、为什么有了WebGL还需要mapbox-gl和three-gl?
因为WebGL基础类库就像C++里面的基础函数一样,还需要再封装一层,才能提供给各种用途的3D用户使用。
四、WebGIS框架
1、OpenLayers----开源-2D
2、Leaflet----开源-2D
官网
Leaflet 是一个为移动设备地图地图而开发的现代的、开源的JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 38 KB,但它具有开发人员开发在线地图的大部分功能。常用于2D地图渲染
3、Arcgis----收费
- 简介
官网
ArcGIS 是一个全面的系统,用户可用其来收集、组织、管理、分析、交流和发布地理信息。作为世界领先的地理信息系统 (GIS) 构建和应用平台,ArcGIS 可供全世界的人们将地理知识应用到政府、企业、科技、教育和媒体领域。ArcGIS 可以发布地理信息,以便所有人都可以访问和使用。本系统可以在任何地点通过 web 浏览器、移动设备(例如智能手机和台式计算机)来使用。 - 参考
参考1
4、Cesium----开源—优先选择这个
简介
介绍
官网
第三方中文网
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。如何使用
//1、npm方式安装
npm install cesium
//2、或者直接官网下载
[官网下载](https://cesium.com/downloads/)
5、Mapbox----开源
- 简介
中文官网
官网
Mapbox致力于打造全球最漂亮的个性化地图。
在一次偶然的地图相关资料搜索过程中发现了一个很神奇又很漂亮的地图,这个地图支持高度自定义各种地图元素,比如,道路,水系,绿地,建筑物,背景色,等等。Mapbox打造的Mapbox studio地图制作虚拟工作室,就是一个很完美的地图元素个性化编辑器。另外,我们也可以把自己项目的地理信息数据上传到Mapbox云端,然后在自己项目的客户端展现出来。
Mapbox地图数据来源于Open Street Map(OSM)等其他地图数据供应商,和Google Map、Apple Map等地图厂商的地图数据来源差不多。 - 参考
教程参考
五、环境搭建
1、前言
WebGIS开发的形式有很多,比如有人用的是Arcgis for JS api开发,有人用的是OpenLayers进行开发,有人用MapboxGL开发,有人用Cesium进行开发。看看吧,这些开发形式都是不同的,但是都属于WebGIS开发,都是使用接口进行开发,里边有封装好的类的属性和方法,只需要我们学会去调用做这些属性和方法就行了。
WebGIS框架
这些地图开发平台,其中Arcgis for JS api不是开源的地图开发平台,而OpenLayers,MapboxGL,Cesium都是开源的地图开发平台。关于二三维地图的开发,其中Cesium主要用于三维地图开发,它在这方面的功能是比较强大的,当然它也可以做二维地图的开发。而OpenLayers不支持三维地图的开发,它只支持二维地图的开发,MapboxGL和Arcgis for JS api 都是二维和三维都支持的,学习难度做对比起来的话,如果五颗星为满级,学习Arcgis for JS api可以说有4星级别的难度,学习MapboxGL和OpenLayers应该有3星级的难度吧,学习Cesium是比较简单的,网上有很多案例来供我们学习,学习起来两颗星难度级别吧,但是只要掌握其中的门道,学习起来都是相对快的,而这也只是我们了解到的冰山一角。总结一下,需要学习和掌握的程度:
了解主流WebGIS框架,包括Openlayers, Cesium, MapboxGL, Leaflet, ArcGIS API for js
尝试安装1-2种框架。
2、环境搭建
配置参考----通过 leaflet、cesium、mapBox 创建地图
六、扩展
1、QGIS----基于QT
2、了解Three.js
边栏推荐
- Redis 排查大 key 的3种方法,优化必备
- Delphi soap WebService server-side multiple soapdatamodules implement the same interface method, interface inheritance
- 学习突围3 - 关于精力
- gtest从一无所知到熟练使用(2)什么是测试夹具/装置(test fixture)
- Delphi SOAP WebService 服务器端多个 SoapDataModule 实现相同的接口方法,接口继承
- 刘锦程荣获2022年度中国电商行业创新人物奖
- Maya lamp modeling
- Redis transaction
- Golang interview finishing three resumes how to write
- 【活动早知道】LiveVideoStack近期活动一览
猜你喜欢
【LeetCode】17、电话号码的字母组合
Redis 排查大 key 的3种方法,优化必备
Daily question-leetcode556-next larger element iii-string-double pointer-next_ permutation
redis03——Redis的网络配置与心跳机制
El tree combined with El table, tree adding and modifying operations
Three or two things about the actual combat of OMS system
创客思维在高等教育中的启迪作用
[wechat applet] collaborative work and release
Enlightenment of maker thinking in Higher Education
Lambdaquerywrapper usage
随机推荐
Open3D 曲面法向量计算
WGCNA analysis basic tutorial summary
MYSQL 用!=查询不出等于null的数据,解决办法
Jerry's ad series MIDI function description [chapter]
Redis has three methods for checking big keys, which are necessary for optimization
创客思维在高等教育中的启迪作用
解析steam教育中蕴含的众创空间
Numpy vstack and column_ stack
Go语言循环语句(第10课中3)
历史最全混合专家(MOE)模型相关精选论文、系统、应用整理分享
Jerry's ad series MIDI function description [chapter]
Shutter textfield example
VS2019 C# release下断点调试
Case sharing | integrated construction of data operation and maintenance in the financial industry
How was MP3 born?
【微信小程序】协同工作与发布
Super detailed tutorial, an introduction to istio Architecture Principle and practical application
EhLib 数据库记录的下拉选择
How to remove the black dot in front of the title in word document
Use of redis publish subscription