openlayers3教材詳解及demo（完整）
openlayers3教材詳解及demo（完整）
OpenLayers 3對OpenLayers網絡地圖庫進行了根本的從新設計。版本2雖然被普遍使用，但從JavaScript開發的早期發展階段開始，已日益現實出它的落後。 OL3已運用現代的設計模式從底層重寫。
最初的版本旨在支持第2版提供的功能，提供大量商業或免費的瓦片資源以及最流行的開源矢量數據格式。與版本2同樣，數據能夠被任意投影。最初的版本還增長了一些額外的功能，如可以方便地旋轉地圖以及顯示地圖動畫。
OpenLayers 3同時設計了一些主要的新功能，如顯示三維地圖，或使用WebGL快速顯示大型矢量數據集，這些功能將在之後的版本中加入。
首先須要明白的一點是，Source和Layer是一對一的關係，有一個Source，必然須要一個Layer，而後把這個Layer添加到Map上，就能夠顯示出來了。經過官網的API搜索ol.source能夠發現有不少不一樣的Source，但概括起來共三種：ol.source.Tile，ol.source.Image和ol.source.Vector。
- ol.source.Tile對應的是瓦片數據源，如今網頁地圖服務中，絕大多數都是使用的瓦片地圖，而OpenLayers 3做爲一個WebGIS引擎，理所固然應該支持瓦片。
- ol.source.Image對應的是一整張圖，而不像瓦片那樣不少張圖，從而無需切片，也能夠加載一些地圖，適用於一些小場景地圖。
- ol.source.Vector對應的是矢量地圖源，點，線，面等等經常使用的地圖元素(Feature)，就囊括到這裏面了。這樣看來，只要這兩種Source就能夠搞定80%的需求了。
咱們先了解最爲複雜的ol.source.Tile，其葉子節點類有不少，大體能夠分爲幾類：
- 在線服務的Source，包括ol.source.BingMaps(使用的是微軟提供的Bing在線地圖數據)，ol.source.MapQuest(使用的是MapQuest提供的在線地圖數據)(注: 因爲MapQuest開始收費，ol v3.17.0就移除了ol.source.MapQuest)，ol.source.OSM(使用的是Open Street Map提供的在線地圖數據)，ol.source.Stamen(使用的是Stamen提供的在線地圖數據)。沒有本身的地圖服務器的狀況下，可直接使用它們，加載地圖底圖。
// 建立地圖
new ol.Map({
// 設置地圖圖層
layers: [
// 建立一個使用Open Street Map地圖源的瓦片圖層
new ol.layer.Tile({source: new ol.source.OSM()})
],
// 設置顯示地圖的視圖
view: new ol.View({
center: [0, 0], // 定義地圖顯示中心於經度0度，緯度0度處
zoom: 2 // 而且定義地圖顯示層級爲2
}),
// 讓id爲map的div做爲地圖的容器
target: 'map'
});
//地圖聯動效果
<p>地圖1</p><div id="map1" style="width: 100%"></div><p>地圖2</p><div id="map2" style="width: 100%"></div><script>
// 建立一個視圖
var view = new ol.View({
center: [0, 0],
zoom: 2
});
// 建立第一個地圖
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: view,
target: 'map1'
});
// 建立第二個地圖
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: view,
target: 'map2'
});
代碼只有一點不一樣，即兩個ol.Map使用了同一個view，就是這麼神奇。
view部分
<body>
<div id="map" style="width: 100%, height: 400px"></div>
<div id="navigate-container">
<input type="button" onClick="moveToLeft();" value="左移" />
<input type="button" onClick="moveToRight();" value="右移" />
<input type="button" onClick="moveToUp();" value="上移" />
<input type="button" onClick="moveToDown();" value="下移" />
<input type="button" onClick="moveToChengDu();" value="移到成都" />
<input type="button" onClick="zoomIn();" value="放大" />
<input type="button" onClick="zoomOut();" value="縮小" />
</div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 設置成都爲地圖中心，此處進行座標轉換， 把EPSG:4326的座標，轉換爲EPSG:3857座標，由於ol默認使用的是EPSG:38 57座標
center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
}),
target: 'map'
});
// 向左移動地圖
function moveToLeft() {
var view = map.getView();
var mapCenter = view.getCenter();
// 讓地圖中心的x值增長，便可使得地圖向左移動，增長的值根據效果可自由設定
mapCenter[0] += 50000;
view.setCenter(mapCenter);
map.render();
}
// 向右移動地圖
function moveToRight() {
var view = map.getView();
var mapCenter = view.getCenter();
// 讓地圖中心的x值減小，便可使得地圖向右移動，減小的值根據效果可自由設定
mapCenter[0] -= 50000;
view.setCenter(mapCenter);
map.render();
}
// 向上移動地圖
function moveToUp() {
var view = map.getView();
var mapCenter = view.getCenter();
// 讓地圖中心的y值減小，便可使得地圖向上移動，減小的值根據效果可自由設定
mapCenter[1] -= 50000;
view.setCenter(mapCenter);
map.render();
}
// 向下移動地圖
function moveToDown() {
var view = map.getView();
var mapCenter = view.getCenter();
// 讓地圖中心的y值增長，便可使得地圖向下移動，增長的值根據效果可自由設定
mapCenter[1] += 50000;
view.setCenter(mapCenter);
map.render();
}
// 移動到成都
function moveToChengDu() {
var view = map.getView();
// 設置地圖中心爲成都的座標，便可讓地圖移動到成都
view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));
map.render();
}
// 放大地圖
function zoomIn() {
var view = map.getView();
// 讓地圖的zoom增長1，從而實現地圖放大
view.setZoom(view.getZoom() + 1);
}
// 縮小地圖
function zoomOut() {
var view = map.getView();
// 讓地圖的zoom減少1，從而實現地圖縮小
view.setZoom(view.getZoom() - 1);
}
</script></body>
限制地圖範圍
<body>
<div id="map" style="width: 100%"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 設置地圖中心範圍
extent: [102, 29, 104, 31],
// 設置成都爲地圖中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
</script></body>
就只是添加了 extent: [102, 29, 104, 31],這行代碼就實現了功能（仔細看extent參數的說明）。
extent參數類型爲[minX, minY, maxX, maxY]的ol.Extent，很容易記住。
限制地圖縮放級別
<body>
<div id="map" style="width: 100%"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 設置成都爲地圖中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10,
// 限制地圖縮放最大級別爲14，最小級別爲10
minZoom: 10,
maxZoom: 14
}),
target: 'map'
});
</script></body>
自適配區域
<body>
<div id="map" style="width: 100%"></div>
<input type="button" value="顯示成都" onclick="fitToChengdu();" />
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 設置成都爲地圖中心
center: [104.06, 30.67],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
function fitToChengdu() {
// 讓地圖最大化徹底地顯示區域[104, 30.6, 104.12, 30.74]
map.getView().fit([104, 30.6, 104.12, 30.74], map.getSize());
}
</script></body>
source和Layer部分
// 建立地圖
new
ol.Map({
// 設置地圖圖層
layers: [
// 建立一個使用Open Street Map地圖源的瓦片圖層
new
ol.layer.Tile({source:
new
ol.source.OSM()})
],
// 設置顯示地圖的視圖
view:
new
ol.View({
center: [
0
,
0
],
// 定義地圖顯示中心於經度0度，緯度0度處
zoom:
2
// 而且定義地圖顯示層級爲2
}),
// 讓id爲map的div做爲地圖的容器
target:
'map'
});
//地圖聯動效果
<
p
>
地圖1
</
p
>
<
div
id
=
"map1"
style
=
"width: 100%"
>
</
div
>
<
p
>
地圖2
</
p
>
<
div
id
=
"map2"
style
=
"width: 100%"
>
</
div
>
<
script
>
// 建立一個視圖
var
view =
new
ol.View({
center: [
0
,
0
],
zoom:
2
});
// 建立第一個地圖
new
ol.Map({
layers: [
new
ol.layer.Tile({source:
new
ol.source.OSM()})
],
view: view,
target:
'map1'
});
// 建立第二個地圖
new
ol.Map({
layers: [
new
ol.layer.Tile({source:
new
ol.source.OSM()})
],
view: view,
target:
'map2'
});
代碼只有一點不一樣，即兩個
ol.Map
使用了同一個
view
，就是這麼神奇。
view部分
<
body
>
<
div
id
=
"map"
style
=
"width: 100%, height: 400px"
>
</
div
>
<
div
id
=
"navigate-container"
>
<
input
type
=
"button"
onClick
=
"moveToLeft();"
value
=
"左移"
/>
<
input
type
=
"button"
onClick
=
"moveToRight();"
value
=
"右移"
/>
<
input
type
=
"button"
onClick
=
"moveToUp();"
value
=
"上移"
/>
<
input
type
=
"button"
onClick
=
"moveToDown();"
value
=
"下移"
/>
<
input
type
=
"button"
onClick
=
"moveToChengDu();"
value
=
"移到成都"
/>
<
input
type
=
"button"
onClick
=
"zoomIn();"
value
=
"放大"
/>
<
input
type
=
"button"
onClick
=
"zoomOut();"
value
=
"縮小"
/>
</
div
>
<
script
>
var
map =
new
ol.Map({
layers: [
new
ol.layer.Tile({source:
new
ol.source.OSM()})
],
view:
new
ol.View({
// 設置成都爲地圖中心，此處進行座標轉換， 把EPSG:4326的座標，轉換爲EPSG:3857座標，由於ol默認使用的是EPSG:38 57座標
center: ol.proj.transform([
104.06
,
30.67
],
'EPSG:4326'
,
'EPSG:3857'
),
zoom:
10
}),
target:
'map'
});
// 向左移動地圖
function
moveToLeft
()
{
var
view = map.getView();
var
mapCenter = view.getCenter();
// 讓地圖中心的x值增長，便可使得地圖向左移動，增長的值根據效果可自由設定
mapCenter[
0
] +=
50000
;
view.setCenter(mapCenter);
map.render();
}
// 向右移動地圖
function
moveToRight
()
{
var
view = map.getView();
var
mapCenter = view.getCenter();
// 讓地圖中心的x值減小，便可使得地圖向右移動，減小的值根據效果可自由設定
mapCenter[
0
] -=
50000
;
view.setCenter(mapCenter);
map.render();
}
// 向上移動地圖
function
moveToUp
()
{
var
view = map.getView();
var
mapCenter = view.getCenter();
// 讓地圖中心的y值減小，便可使得地圖向上移動，減小的值根據效果可自由設定
mapCenter[
1
] -=
50000
;
view.setCenter(mapCenter);
map.render();
}
// 向下移動地圖
function
moveToDown
()
{
var
view = map.getView();
var
mapCenter = view.getCenter();
// 讓地圖中心的y值增長，便可使得地圖向下移動，增長的值根據效果可自由設定
mapCenter[
1
] +=
50000
;
view.setCenter(mapCenter);
map.render();
}
// 移動到成都
function
moveToChengDu
()
{
var
view = map.getView();
// 設置地圖中心爲成都的座標，便可讓地圖移動到成都
view.setCenter(ol.proj.transform([
104.06
,
30.67
],
'EPSG:4326'
,
'EPSG:3857'
));
map.render();
}
// 放大地圖
function
zoomIn
()
{
var
view = map.getView();
// 讓地圖的zoom增長1，從而實現地圖放大
view.setZoom(view.getZoom() +
1
);
}
// 縮小地圖
function
zoomOut
()
{
var
view = map.getView();
// 讓地圖的zoom減少1，從而實現地圖縮小
view.setZoom(view.getZoom() -
1
);
}
</
script
>
</
body
>
限制地圖範圍
<
body
>
<
div
id
=
"map"
style
=
"width: 100%"
>
</
div
>
<
script
>
new
ol.Map({
layers: [
new
ol.layer.Tile({source:
new
ol.source.OSM()})
],
view:
new
ol.View({
// 設置地圖中心範圍
extent: [
102
,
29
,
104
,
31
],
// 設置成都爲地圖中心
center: [
104.06
,
30.67
],
projection:
'EPSG:4326'
,
zoom:
10
}),
target:
'map'
});
</
script
>
</
body
>
就只是添加了
extent: [102, 29, 104, 31],
這行代碼就實現了功能（
仔細看
extent
參數的說明
）。
extent
參數類型爲
[minX, minY, maxX, maxY]
的
ol.Extent
，很容易記住。
限制地圖縮放級別
<
body
>
<
div
id
=
"map"
style
=
"width: 100%"
>
</
div
>
<
script
>
new
ol.Map({
layers: [
new
ol.layer.Tile({source:
new
ol.source.OSM()})
],
view:
new
ol.View({
// 設置成都爲地圖中心
center: [
104.06
,
30.67
],
projection:
'EPSG:4326'
,
zoom:
10
,
// 限制地圖縮放最大級別爲14，最小級別爲10
minZoom:
10
,
maxZoom:
14
}),
target:
'map'
});
</
script
>
</
body
>
自適配區域
<
body
>
<
div
id
=
"map"
style
=
"width: 100%"
>
</
div
>
<
input
type
=
"button"
value
=
"顯示成都"
onclick
=
"fitToChengdu();"
/>
<
script
>
var
map =
new
ol.Map({
layers: [
new
ol.layer.Tile({source:
new
ol.source.OSM()})
],
view:
new
ol.View({
// 設置成都爲地圖中心
center: [
104.06
,
30.67
],
projection:
'EPSG:4326'
,
zoom:
10
}),
target:
'map'
});
function
fitToChengdu
()
{
// 讓地圖最大化徹底地顯示區域[104, 30.6, 104.12, 30.74]
map.getView().fit([
104
,
30.6
,
104.12
,
30.74
], map.getSize());
}
</
script
>
</
body
>
source和Layer部分
相關文章
- 1. Log4j詳解及demo
- 2. openlayers3入門教程
- 3. RabbitMQ demo及其詳解
- 4. dubbo詳解及demo實例
- 5. 完整的RSA開發流程以及加解密Demo
- 6. Spring Cloud組件完整demo
- 7. spring完整demo實例
- 8. webpack-dev-server完整demo
- 9. vuex入門 完整demo
- 10. 微信分享完整demo
- 更多相關文章...
- • PHP 完整表單實例 - PHP教程
- • 免費ARP詳解 - TCP/IP教程
- • Flink 數據傳輸及反壓詳解
- • Java 8 Stream 教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Log4j詳解及demo
- 2. openlayers3入門教程
- 3. RabbitMQ demo及其詳解
- 4. dubbo詳解及demo實例
- 5. 完整的RSA開發流程以及加解密Demo
- 6. Spring Cloud組件完整demo
- 7. spring完整demo實例
- 8. webpack-dev-server完整demo
- 9. vuex入門 完整demo
- 10. 微信分享完整demo