概述
想寫本文甘邀，主要是源于前兩天有個老師找到我說讓我錄一個大概半個小時的視頻嗜傅，跟大家分享一下各webgis框架之間的區(qū)別以及在應用的過程中應該如何選擇。其實之前也有學員問過類似的問題，當時只是針對他們的疑問做了回答医清。雖然各個框架都有用過量蕊，有幾個還算比較熟悉铺罢，但并沒有全面的對各個框架進行過比較，剛好借著這個機會残炮，一方面重新對各個框架有一個比較全面的認識韭赘，另一方面對各個框架做一個比較，以便后面使用的時候有一個較好的選擇势就。
框架介紹
Openlayers
最新版本
簡介
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).
核心類
示例代碼
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css">
<style>
html, body, .map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
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
})
});
</script>
</body>
</html>
Leaflet
最新版本
簡介
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.
核心類
示例代碼
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" />
<style>
html, body, .map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<title>Leaflet example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([36.897, 103.572], 4);
L.tileLayer('https://b.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
</script>
</body>
</html>
MapboxGL
最新版本
簡介
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.
核心類
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel='stylesheet' />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<style>
html, body, .map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
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
});
</script>
</body>
</html>
Maptalks
最新版本
簡介
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.
核心類
示例代碼
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8" />
<title>Maptalks Quick Start</title>
<link rel="stylesheet" >
<style>
html, body, .map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
</head>
<body>
<div class="map" id="map"></div>
<script type="text/javascript">
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'
})
});
</script>
</body>
</html>
Arcgis for js
最新版本
簡介
ArcGIS API for JavaScript就是ESRI公司用JavaScipt語言編寫的一套程序接口泉瞻。用戶可以通過調用API獲取ArcGIS server提供的服務，例如瀏覽苞冯、編輯袖牙、渲染地圖，以及一些常用的空間分析功能舅锄。
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Intro to MapView - Create a 2D map</title>
<style>
html, body, .map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<link rel="stylesheet" />
<script src="https://js.arcgis.com/4.19/"></script>
<script>
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);
});
</script>
</head>
<body>
<div id="map" class="map"></div>
</body>
</html>
高德API
最新版本
簡介
高德地圖 JS API 是一套 JavaScript 語言開發(fā)的的地圖應用編程接口鞭达，移動端、PC端一體化設計皇忿，一套 API 兼容眾多系統(tǒng)平臺畴蹭。目前 JS API 免費開放使用。JS API 提供了2D鳍烁、3D地圖模式叨襟，滿足絕大多數(shù)開發(fā)者對地圖展示、地圖自定義幔荒、圖層加載糊闽、點標記添加、矢量圖形繪制的需求铺峭，同時也提供了 POI 搜索墓怀、路線規(guī)劃、地理編碼卫键、行政區(qū)查詢傀履、定位等眾多開放服務接口。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html, body, .map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=c002f8d098d53ba8815a61fd11b67627"></script>
</head>
<body>
<div class="map" id="map"></div>
<script>
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
});
</script>
</body>
</html>
百度API
最新版本
簡介
百度地圖JavaScript API GL v1.0是一套由JavaScript語言編寫的應用程序接口，可幫助您在網站中構建功能豐富钓账、交互性強的地圖應用碴犬，支持PC端和移動端基于瀏覽器的地圖應用開發(fā)，且支持HTML5特性的地圖開發(fā)梆暮。百度地圖JavaScript API支持HTTP和HTTPS服协，免費對外開放，可直接使用啦粹。接口使用無次數(shù)限制偿荷。
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style>
html, body, .map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=LSVyVW3OmR4NgINEsMc4QfgrfYXRnNfu">
</script>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new BMapGL.Map("map");
var point = new BMapGL.Point(103.572, 36.897);
map.centerAndZoom(point, 4);
map.enableScrollWheelZoom(true);
</script>
</body>
</html>
框架比較
