概述
想写本文，主要是源于前两天有个老师找到我说让我录一个大概半个小时的视频，跟大家分享一下各webgis框架之间的区别以及在应用的过程中应该如何选择。其实之前也有学员问过类似的问题，当时只是针对他们的疑问做了回答。虽然各个框架都有用过，有几个还算比较熟悉，但并没有全面的对各个框架进行过比较，刚好借着这个机会，一方面重新对各个框架有一个比较全面的认识，另一方面对各个框架做一个比较，以便后面使用的时候有一个较好的选择。
框架介绍
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" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" 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" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<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 href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' 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" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
<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" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<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 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。目前 JS API 免费开放使用。JS API 提供了2D、3D地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。
示例代码
<!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端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。
示例代码
<!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>
框架比较
