OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。官方介绍: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).
这是下载文件:点击打开链接
这是api说明文档:http://openlayers.org/en/latest/apidoc/
这是从一个扯淡大叔那看的图,从<WebGIS之OpenLayers全面解析>这本书看了下
下面是官方给的最开始代码,osm就是开放街道图。
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({ //初始化map对像,这是基础, ol.Map
target: 'map', //地图div的ID
layers: [ //核心组件 ol.Layers.Base
new ol.layer.Tile({ //瓦片图层
source: new ol.source.OSM() //数据源,老版本会见mapquest,但收费了,所以openlayers移除了
})
],
view: new ol.View({ //同样是地图显示的基础,view, ol.View
center: ol.proj.fromLonLat([37.41, 8.82]), //中心点
zoom: 4 级别
})
});
</script>
</body>
</html>
source format geometry feature overlay interaction style projection renderer 这些都是核心类和组件
ol.js ol.css ol-debug.js 是三个库
我用的是Visual studio 和 webstorm还有chrome和火狐开发版