OpenLayers是一個用于開發WebGIS用戶端的JavaScript包。OpenLayers 支援的地圖來源包括Google Maps、Yahoo、 Map、微軟Virtual Earth 等，使用者還可以用簡單的圖檔地圖作為背景圖，與其他的圖層在OpenLayers 中進行疊加，在這一方面OpenLayers提供了非常多的選擇。
簡介
OpenLayers是一個用于開發WebGIS用戶端的JavaScript包。OpenLayers 支援的地圖來源包括Google Maps、Yahoo、 Map、微軟Virtual Earth 等，使用者還可以用簡單的圖檔地圖作為背景圖，與其他的圖層在OpenLayers 中進行疊加，在這一方面OpenLayers提供了非常多的選擇。
除此之外，OpenLayers實作通路地理空間資料的方法都符合行業标準。OpenLayers 支援Open GIS 協會制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等網絡服務規範，可以通過遠端服務的方式，将以OGC 服務形式釋出的地圖資料加載到基于浏覽器的OpenLayers 用戶端中進行顯示。OpenLayers采用面向對象方式開發，并使用來自Prototype.js和Rico中的一些元件。
在操作方面，OpenLayers 除了可以在浏覽器中幫助開發者實作地圖浏覽的基本效果，比如放大（Zoom In）、縮小（Zoom Out）、平移（Pan）等常用操作之外，還可以進行選取面、選取線、要素選擇、圖層疊加等不同的操作，甚至可以對已有的OpenLayers 操作和資料支援類型進行擴充，為其賦予更多的功能。
簡單示例
官網位址
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- 加載OpenLayers 類庫 -->
<link rel="stylesheet" href="./libs/ol.css" type="text/css">
<style>
.map {
height: 500px;
width: 100%;
}
</style>
<!-- 加載OpenLayers 類庫 -->
<script src="./libs/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
<!-- 綁定 DIV 元素 -->
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: 1
})
});
</script>
</body>
</html> 簡單介紹
通過上面例子可以看出 openlayers 使用很簡單，首先定義一個 Map，這是 openlayers 的核心，它是一個容器，所有動作、設定等都在 Map 中展開。下面對上面 DEMO 所簡要說明：
1、将 Map 容器與 HTML 元素（這裡是 DIV 元素 rcp1_map）做綁定，Map 提供有 target 屬性來綁定；
2、将圖層 Layer 添加到 Map 中，這裡是一個瓦面圖層 ol.layer.Tile；
3、圖層是一個包裝盒，需要給圖層添加具體的資料源：new ol.source.OSM()，資料源表示一個服務，可以了解為是一個 URL；
4、最後設定 Map 容器的視圖視窗：new ol.View，就是我們初始化能看到的地圖樣子。
openlayers 其核心元件是
Map
、
Layer
、
Source
、
View
、
Control
、
Interaction
幾乎所有的動作都是圍繞這幾個核心類展開。
Map：
它是 openlayers 的使用的基礎，所有的圖層、地圖控件、地圖工具等必須添加 Map 中才能使用。往 Map 中添加圖層、地圖控件、地圖工具等可以在初始化 Map 時就添加（如上 DEMO），可以調用 Map 相關的方法添加 addControl(control)、addInteraction(interaction)、addLayer(layer)。Map 還提供了很多事件，如點選地圖（click）、輕按兩下地圖（dbclick）等。
Layer：
Layer 圖層。單單一個 Map 是沒有什麼用的，隻用綁定圖層才能顯示資料。Layer 作用能控制資料是否顯示，以及地圖可顯示的最大或最小比例尺（即放大或縮小到某個級别不顯示地圖），這裡特别說明下，圖層主要是根據資料源的不同來選擇，不同的資料源選擇不同的圖層，使用：
this.map.addLayer(new ol.layer.Vector({
source: new TileWMS({
url: "http://127.0.0.1:8086/geoserver/sf/wms",
params: {
LAYERS: "sf:streams"
}
})
})) Source：
這是整個 openlayers 的靈魂，source 分為矢量資料源和影像資料源。資料源的使用如下：
this.map.addLayer(new ol.layer.Tile({
//加載資料
source: new ol.source.OSM()
})); 其它
vL.source.BingMaps = gd,
vL.source.BingMaps.quadKey = bd,
vL.source.CartoDB = kd,
vL.source.Cluster = zd,
vL.source.DataTile = Ld,
vL.source.GeoTIFF = ab,
vL.source.IIIF = Mb,
vL.source.Image = Ib,
vL.source.Image.ImageSourceEvent = Rb,
vL.source.Image.defaultImageLoadFunction = Pb,
vL.source.ImageArcGISRest = zb,
vL.source.ImageCanvas = Lb,
vL.source.ImageMapGuide = Db,
vL.source.ImageStatic = qb,
vL.source.ImageWMS = Yb,
vL.source.OGCMapTile = eg,
vL.source.OGCVectorTile = cg,
vL.source.OSM = lg,
vL.source.OSM.ATTRIBUTION = fg,
vL.source.Raster = Xg,
vL.source.Raster.Processor = zg,
vL.source.Raster.RasterSourceEvent = Ug,
vL.source.Raster.newImageData = Pg,
vL.source.Source = ud,
vL.source.Stamen = Zg,
vL.source.Tile = ld,
vL.source.Tile.TileSourceEvent = fd,
vL.source.TileArcGISRest = Qg,
vL.source.TileDebug = nx,
vL.source.TileImage = md,
vL.source.TileJSON = rx,
vL.source.TileWMS = ox,
vL.source.UTFGrid = ux,
vL.source.UTFGrid.CustomTile = ax,
vL.source.UrlTile = dd,
vL.source.Vector = Id,
vL.source.Vector.VectorSourceEvent = Pd,
vL.source.VectorTile = sg,
vL.source.VectorTile.defaultLoadFunction = ag,
vL.source.WMTS = lx,
vL.source.WMTS.optionsFromCapabilities View：
view 用來設定地圖的展示位置範圍、地圖中心位置以及目前地圖使用的投影坐标系等，也可以設定地圖旋轉等，使用：
this.map.setView(new ol.View({
center: [117.604, 26.218], //坐标
zoom: 15,
projection: 'EPSG:4326' //使用的坐标，這裡是 WGS84 坐标系
}))
### Control：
Control 控件，就是與地圖相關操作的工具。如下圖：
!
### Interaction：
互動操作就是我們與地圖的互相操作，比如在地圖上繪制要素、選擇、修改、移動、拉伸等等操作。使用如下：
## 進階還得多多參考以下連結内容
[官方代碼示例](https://openlayers.org/en/latest/examples/)
[官方API文檔](https://openlayers.org/en/latest/apidoc/) ![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)