主流webgis框架介绍与对比

您所在的位置:网站首页 it系统的总体框架有哪些内容呢 主流webgis框架介绍与对比

主流webgis框架介绍与对比

#主流webgis框架介绍与对比| 来源: 网络整理| 查看: 265

概述

想写本文,主要是源于前两天有个老师找到我说让我录一个大概半个小时的视频,跟大家分享一下各webgis框架之间的区别以及在应用的过程中应该如何选择。其实之前也有学员问过类似的问题,当时只是针对他们的疑问做了回答。虽然各个框架都有用过,有几个还算比较熟悉,但并没有全面的对各个框架进行过比较,刚好借着这个机会,一方面重新对各个框架有一个比较全面的认识,另一方面对各个框架做一个比较,以便后面使用的时候有一个较好的选择。

框架介绍 Openlayers 最新版本

v6.5.0

简介

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

核心类

image.png

示例代码 html, body, .map { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } OpenLayers example var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 4 }) }); Leaflet 最新版本

Leaflet 1.7.1

简介

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

核心类

image.png

示例代码 html, body, .map { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } Leaflet example var map = L.map('map').setView([36.897, 103.572], 4); L.tileLayer('https://b.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); MapboxGL 最新版本

v2.2.0

简介

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. It is part of the Mapbox GL ecosystem, which includes Mapbox Mobile, a compatible renderer written in C++ with bindings for desktop and mobile platforms.

核心类

image.png

示例代码 Display a map on a webpage html, body, .map { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } var style = { "version": 8, "name": "Dark", "sources": { "XYZTile": { "type": "raster", "tiles": ['https://b.tile.openstreetmap.org/{z}/{x}/{y}.png'], "tileSize": 256 } }, "layers": [{ "id": "XYZTile", "type": "raster", "source": "XYZTile", "minzoom": 0, "maxzoom": 17 } ] }; var map = new mapboxgl.Map({ container: 'map', style: style, center: [103.572, 36.897], zoom: 3 }); Maptalks 最新版本

V0.49.3

简介

maptalks.js was born for a map-centric project to help YUM! China (the most successful food chain in China) manage and analyze spatial data all over the country for choosing locations of new KFC and PizzaHut restaurants. After verified in many projects of government depts and enterprises, we are glad to open source it, and hoping it can help you deliver better mapping projects.

核心类

image.png

示例代码 Maptalks Quick Start html, body, .map { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } var map = new maptalks.Map('map', { center: [103.572, 36.897], zoom: 4, baseLayer: new maptalks.TileLayer('base', { 'urlTemplate' : 'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png' }) }); Arcgis for js 最新版本

4.18

简介

ArcGIS API for JavaScript就是ESRI公司用JavaScipt语言编写的一套程序接口。用户可以通过调用API获取ArcGIS server提供的服务,例如浏览、编辑、渲染地图,以及一些常用的空间分析功能。

示例代码 Intro to MapView - Create a 2D map html, body, .map { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } require(["esri/layers/WebTileLayer", "esri/Map", "esri/views/SceneView"], function(WebTileLayer, Map, SceneView) { var map = new Map({ ground: "world-elevation" }); var view = new SceneView({ container: "map", map: map, zoom: 4, center: [103.572, 36.897] }); var tiledLayer = new WebTileLayer({ urlTemplate: "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png" }); map.add(tiledLayer); }); 高德API 最新版本

v2.0 

简介

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口,移动端、PC端一体化设计,一套 API 兼容众多系统平台。目前 JS API 免费开放使用。JS API 提供了2D、3D地图模式,满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求,同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。

示例代码 Title html, body, .map { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } var tile = new AMap.TileLayer({ getTileUrl: 'https://b.tile.openstreetmap.org/[z]/[x]/[y].png' }); var map = new AMap.Map('map', { center: [103.572, 36.897], layers: [ tile // new AMap.TileLayer.Satellite(), // new AMap.TileLayer.RoadNet() ], zooms: [2,18],//设置地图级别范围 zoom: 4 }); 百度API 最新版本

v1.0

简介

百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用。接口使用无次数限制。

示例代码 Hello, World html, body, .map { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } var map = new BMapGL.Map("map"); var point = new BMapGL.Point(103.572, 36.897); map.centerAndZoom(point, 4); map.enableScrollWheelZoom(true); 框架比较

image.png

如果你还想了解更多相关的内容,欢迎你进入我的直播课,我们一起聊聊。

image.png



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3