openlayers基礎用例

http://weilin.me/ol3-primer/ch03/03-01.html#
http://weilin.me/ol3-primer/ //地址
http://openlayers.org/ //OpenLayers官網 css

vue安裝自定義座標系
npm install proj4
import * as proj4 from "proj4";
or//
import proj4 from "proj4";html

報"xp"錯誤就是對象用的不對vue

warningevFlag: true, //隱患圖標顯示標誌
constructonevFlag: true, //施工顯示標誌
allPolygonevFlag: true, //片區顯示標誌
insPointPointvFlag: true, //巡檢點點顯示標誌
insPointLinevFlag: true, //巡檢點線顯示標誌
carevFlages6

switch (true) {
case this.eventFlag.warningevFlag:
this.initWarning(); //隱患icon
clearInterval(this.blink);
this.warningIconBlink(); //隱患閃爍
// break;
case this.eventFlag.constructonevFlag:
this.initConstructon(); //施工icon
// break;
case this.eventFlag.allPolygonevFlag:
this.initAllPolygon(); //片區
// break;
case this.eventFlag.insPointPointvFlag:
this.initAllPointPoint(); //巡檢點
// break;
case this.eventFlag.insPointLinevFlag:
this.initAllPointLine(); //巡檢線
// break;
case this.eventFlag.carevFlag:
this.initCar(); // 車
// break;
}web

圖層load監聽
//建立圖層
createLayer() {
return new ol.layer.Vector({
source: new ol.source.Vector({
loader: function(extent, resolution, projection) {
console.log("load 1 = ");
},
strategy: ol.loadingstrategy.bbox
})
});
},npm

谷歌地圖
// source: new ol.source.TileImage({
// url:
// "http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G"
// }) //加載谷歌影像地圖api

//獲取修改多邊形的座標
that.pointLayer.getSource().getFeatures()[0].getGeometry().getCoordinates();
//修改繪畫的多邊形
updateLineLayer(){
var select=new ol.interaction.Select();
this.map.addInteraction(select);
this.draw.setActive(false);
var modify = new ol.interaction.Modify({
features: select.getFeatures()
});
this.map.addInteraction(modify);
modify.on("modifyend",function (e) {
let geometrys = that.pointLayer.getSource().getFeatures()[0].getGeometry().getCoordinates();

});
}, app

//雙擊事件
this.map.addEventListener('dblclick');
this.map.removeEventListener('dblclick');
that.map.on('dblclick', function () {
that.drawSourceClear();
that.mouseMove(0);
});dom

設置爲地圖中心
this.map.getView().getZoom() //獲取縮放比
ol.proj.transform(center, "EPSG:4326", "EPSG:3857")//座標轉換
setMapCenters(center, zoom) {
this.map.getView().animate({
center: center, //中心點座標
duration: 700, //動畫時長
zoom: zoom //縮放比
});
}ide

//獲取圖層中features 對象
XXXLayer.getSource().getFeatures();
//對象
//建立點圖標
//coordinates座標，identity圖片選擇標識，layer圖層
createIcons(coordinates, properties, imgSrc, layer) {
//設置圖標座標
let feature = new ol.Feature({
geometry: new ol.geom.Point(coordinates),
properties: properties
});
//設置圖標
feature.setStyle(
new ol.style.Style({
image: new ol.style.Icon({ src: imgSrc }) //基礎圖標對象
})
);
//吧圖標加入圖層
layer.getSource().addFeature(feature);
//根據圖層放大或者縮小
this.changeIconScale(feature);
},

.transform("EPSG:4326", "EPSG:3857")

獲取縮放級別，分辨率
map.getView().getZoom()
map.getView().getResolution()

// 4326 3857 座標系轉換

ol.proj.transform(coordCenter,'EPSG:4214','EPSG:4326')
ol.proj.fromLonLat([118,32]),//轉4326

new ol.geom.LineString(element.geometry.coordinates)
.transform("EPSG:4326", "EPSG:3857")
.getCoordinates(),//獲取轉換以後的座標

let geo = new ol.geom.LineString(lineString);
let route = geo.transform("EPSG:4326", "EPSG:3857");

//地圖比例尺默認3857座標系（4326受影響不許確）
var scaleLineControl = new ol.control.ScaleLine({
units: "metric"//單位有5種：degrees imperial us nautical metric
});

//scaleLineControl.setUnits('metric');
// this.map.addControl(scaleLineControl);

this.map = new ol.Map({
controls: new ol.control.defaults({
attributionOptions: {
collapsible: false
}
}).extend([scaleLineControl]),

地圖渲染套路
對象的數據 data
1 建立featurenew ol.Feature({
//（此處）ol.Feature 根據渲染對象的不一樣選擇不一樣的對象類型
});
2 //設置feature樣式
feature.setStyle(
new ol.style.Style({
//（此處）ol.style.Style 根據渲染對象的不一樣選擇不一樣的對象類型
})
);
3 把feature添加到對應的圖層
this.MappingLayerXXX.getSource().addFeature(feature);
4 map中引用該圖層 this.MappingLayerXXX
this.MappingLayerXXX

// gis服務所用對象
var source = new ol.source.TileWMS({
url: config.url,
params: param,
projection: nariConfig.projection,
crossOrigin: 'Anonymous',
serverType: config.serverType,
});

var wmsLayer = new ol.layer.Tile({
visible: true,
minResolution:minRes,
maxResolution:maxRes,
source: source,
});

下載的瓦片地圖
initMap() {
this.map = {};
this.gaodeMapLayer = new ol.layer.Tile({
declutter: true,
source: new ol.source.XYZ({
tileUrlFunction: this.overlay_getTileURL,
type: "png"
// url: this.gaodeMapUrl,
// format: new ol.format.GeoJSON()
})
});
//比例尺控件添加
var scaleLineControl = new ol.control.ScaleLine({
units: "metric"
});
//初始化圖層
this.map = new ol.Map({
layers: [
this.gaodeMapLayer,
this.peoPolygonLayer, //我的片區
],
view: new ol.View({
center: ol.proj.transform(this.mapCenter, "EPSG:4326", "EPSG:3857"),
projection: "EPSG:3857",
zoom: 10
// resolution: 152.8740565703525
}),
target: "map"
});
this.map.addControl(scaleLineControl);
},
overlay_getTileURL(xyz) {
var z = xyz[0];
var x = xyz[1];
var y = Math.pow(2, z) + xyz[2];
var url =
"http://10.0.197.142:8080/TMS/" + z + "/" + x + "/" + y + ".png";
return url;
},
eg：基於geoserver 的地圖渲染
高德 url
"http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7", //新版
// "http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",//老版
// "http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=4&style=7&x={x}&y={y}&z={z}",
// "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7", //爲矢量圖（含路網、含註記）
// 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7',//爲矢量圖（含路網，不含註記）
// 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',//爲影像底圖（不含路網，不含註記）
// 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6',//爲影像底圖（不含路網、不含註記）
// 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',//爲影像路圖（含路網，含註記）
// 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8',//爲影像路網（含路網，不含註記）
// 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',//爲影像底圖（不含路網，不含註記）
// 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}',//爲矢量地圖（含路網，含註記）
// 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',//爲影像路網（含路網，含註記）
initMap() {
//設置地圖爲高德地圖
this.gaodeMapLayer = new ol.layer.Tile({
// source: new ol.source.XYZ({
// url: this.gaodeMapUrl,
// format: new ol.format.GeoJSON()
// })

source: new ol.source.TileWMS({
url: "http://10.0.197.142:8088/geoserver/china_osm/wms",
params: {
FORMAT: "image/png",
LAYERS: "china_osm:osm_china",
STYLES: "",
VERSION: "1.1.1",
tiled: true
},
projection: "EPSG:3857",
crossOrigin: "Anonymous",
serverType: "geoserver"
})
});

//初始化地圖
this.map = new ol.Map({
layers: [
this.gaodeMapLayer,
this.lineLayer,
this.stationLayer,
this.carLayer,
this.warningLayer,
this.inspectionLayer, //巡線點
this.inspectionLineLayer, //巡線線
this.peopleLayer,
this.constructonLayer
],
view: new ol.View({
center: this.mapCenter, //地圖中心
projection: "EPSG:4326",
zoom: 10
}),
target: "map"
});
},
// gis服務所用對象 end

初始化獲取地圖範圍座標轉換
var extent = this.map.getView().calculateExtent(this.map.getSize());
var dataExt = ol.proj.transformExtent(extent, that.srsNameMap_, that.srsNameDataSource_);
//console.log(dataExt);

if(dataExt[0] < -180){
dataExt[0] = -180
}
if(dataExt[1] < -80){
dataExt[1] = -80
}

if(dataExt[2] > 180){
dataExt[2] = 180
}
if(dataExt[3] > 80){
dataExt[3] = 80
}

//console.log(dataExt);

feature.setStyle(style);

// 監聽地圖層級變化
this.map.getView().on("change:resolution", function() {
//console.log(this.getZoom());
// 從新設置圖標的縮放率，基於層級12來作縮放
//當地圖層級愈來愈往上時（數字變小），圖標要變得更小
if (this.getZoom() > 10) {
style.getImage().setScale(this.getZoom() / 12);
} else {
style.getImage().setScale(this.getZoom() / 24);
}
feature.setStyle(style);
});
},
//設置文字根據圖層變化大小
changeTextScale(feature) {
//先初始化尺寸
let style = feature.getStyle();
// 從新設置圖標的縮放率，基於層級12來作縮放
//當地圖層級愈來愈往上時（數字變小），圖標要變得更小
if (this.map.getView().getZoom() > 10) {
style.getText().setScale(this.map.getView().getZoom() / 12);
} else {
style.getText().setScale(this.map.getView().getZoom() / 24);
}
feature.setStyle(style);
// 監聽地圖層級變化
this.map.getView().on("change:resolution", function() {
//console.log(this.getZoom());
// 從新設置圖標的縮放率，基於層級12來作縮放
//console.log(this.getZoom());
//當地圖層級愈來愈往上時（數字變小），圖標要變得更小
if (this.getZoom() > 10) {
style.getText().setScale(this.getZoom() / 12);
style.getText().setOffsetX(this.getZoom());
style.getText().setOffsetY(this.getZoom() - this.getZoom() / 3);
} else {
style.getText().setScale(this.getZoom() / 24);
style.getText().setOffsetX(4.2);
style.getText().setOffsetY(3.5);
}
feature.setStyle(style);
});
},

//建立一個帶文本的圖標的樣式對象
createIconAndTextObject(imgSrc, color, textStr) {
//建立文本對象樣式
let textStyleObj = new ol.style.Text({
text: textStr,
offsetX: 4.2,
offsetY: 3.5,
fill: new ol.style.Fill({ color })
});
return new ol.style.Style({
//基本樣式對象
image: new ol.style.Icon({ src: imgSrc }),
text: textStyleObj
});
}
//地圖字體樣式背景色 start
styleFun(pointName) {
let style = new ol.style.Style({
image: new ol.style.Icon({
src: "../../../../../../src/assets/map/img/icon/pointer.png"
}),
text: new ol.style.Text({
font: 'bold 12px 微軟雅黑,sans-serif',//字體佔用高度
fill: new ol.style.Fill({
color: 'rgba(237,63,20,1)'
}),
placement:'point',
backgroundStroke:new ol.style.Stroke({
color:'#feff2a',
width:1
}),
backgroundFill:new ol.style.Fill({
color:'#feff2a'
}),
textAlign:'right',
text:pointName
})
})
return style;
},
//地圖字體樣式背景色 end

//去掉圖層，添加圖層
this.map.removeLayer(this.peopleLayer);
this.map.addLayer(this.peopleLayer);
//圖層清除
this.lineLayer.getSource().clear();
//繪畫多邊形
initLine() {
this.lineLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: "darkgreen",
size: 3
})
})
});
this.map.addLayer(this.lineLayer);
var lineDraw = new ol.interaction.Draw({
type: "Polygon",
source: this.lineLayer.getSource(),
freehand: false,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: "green",
size: 2
})
})
});
lineDraw.on("drawend", function(event) {
document.getElementById("points").innerHTML = JSON.stringify(
event.feature.getGeometry().getCoordinates()
);
});
this.map.addInteraction(lineDraw);
},
//多邊形繪畫end
//建立線對象
if (element.geometry.type == "LineString") {
this.lineData.push(element);
}
//線信息
this.lineData.forEach(element => {
let feature = new ol.Feature({
geometry: new ol.geom.LineString(element.geometry.coordinates),//對應不一樣的類型的對象（括號內爲座標）
properties: element
});
feature.setStyle( //設置feature樣式
new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#ffcc33",
width: 2
})
})
);
this.lineLayer.getSource().addFeature(feature);
//建立線對象 END

//建立一個圖層 this.deviveData 取到的數據點對象
this.deviveData.forEach(element => {
給地圖添加圖標
let feature = new ol.Feature({
geometry: new ol.geom.Point(element.geometry.coordinates),
properties: element
});
//設置圖標
feature.setStyle(
new ol.style.Style({
image: new ol.style.Icon({
src: "../../../../src/assets/map/img/icon/people1.png"
}) //基礎圖標對象
})
);

//把圖標加入圖層
this.deviveLayer.getSource().addFeature(feature);
//根據圖層放大或者縮小
// this.changeIconScale(feature);
});

//coordinates座標，identity圖片選擇標識，layer圖層
createIconAndText(coordinates, properties, imgSrc, color, textStr, layer) {
//設置線座標
let feature = this.createFeaturePoint(coordinates, properties);
//設置圖標
feature.setStyle(this.createIconAndTextObject(imgSrc, color, textStr));
//把圖標加入圖層
layer.getSource().addFeature(feature);
//根據圖層放大或者縮小
this.changeIconScale(feature);
},

//設置文字根據圖層變化大小
changeTextScale(feature) {
//先初始化尺寸
let style = feature.getStyle();
// 從新設置圖標的縮放率，基於層級12來作縮放
//當地圖層級愈來愈往上時（數字變小），圖標要變得更小
if (this.map.getView().getZoom() > 10) {
style.getText().setScale(this.map.getView().getZoom() / 12);
} else {
style.getText().setScale(this.map.getView().getZoom() / 24);
}

feature.setStyle(style);

// 監聽地圖層級變化
this.map.getView().on("change:resolution", function() {
//console.log(this.getZoom());
// 從新設置圖標的縮放率，基於層級12來作縮放
//console.log(this.getZoom());
//當地圖層級愈來愈往上時（數字變小），圖標要變得更小
if (this.getZoom() > 10) {
style.getText().setScale(this.getZoom() / 12);
style.getText().setOffsetX(this.getZoom());
style.getText().setOffsetY(this.getZoom() - this.getZoom() / 3);
} else {
style.getText().setScale(this.getZoom() / 24);
style.getText().setOffsetX(4.2);
style.getText().setOffsetY(3.5);
}
feature.setStyle(style);
});
},

map
layer

layer: new ol.layer.Vector({
source: new ol.source.Vector()
});

雅虎
url:'https://{0-3}.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/512/png8?lg=ENG&ppi=250&token=TrLJuXVK62IQk0vuXFzaig%3D%3D&requestid=yahoo.prod&app_id=eAdkWGYRoc4RfxVo0Z4B'

VUE中的地圖
import ol from "openlayers";
import "openlayers/dist/ol.css";

瓦片地圖 oms
//初始化地圖
initMap() {
this.map = {};
let oms = new ol.layer.Tile({
source: new ol.source.OSM()
});
this.gaodeMapLayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: "http://10.0.197.142:8088/geoserver/china_osm/wms",
params: {
FORMAT: "image/png",
LAYERS: "china_osm:osm_china",
STYLES: "",
VERSION: "1.1.1",
tiled: true
},
projection: "EPSG:3857",
crossOrigin: "Anonymous",
serverType: "geoserver"
})
});
//比例尺控件添加
var scaleLineControl = new ol.control.ScaleLine({
units: "metric"
});
//初始化圖層
this.map = new ol.Map({
layers: [
oms,
this.gaodeMapLayer
],
view: new ol.View({
center: ol.proj.transform(this.mapCenter, "EPSG:4326", "EPSG:3857"), //3857地圖中心
projection: "EPSG:3857", //3857
zoom: 10
// resolution: 152.8740565703525
}),
target: "map"
});
this.map.addControl(scaleLineControl);
},

data() {
return {
//高德地圖的地址
gaodeMapUrl:
"http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
map: {}, //地圖對象
mapCenter: [118.766667, 32.05] //地圖初始中心點的位置（經緯度）
};
},

//初始化地圖
initMap() {
//設置地圖爲高德地圖
var gaodeMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: this.gaodeMapUrl,
format: new ol.format.GeoJSON()
})
});
this.map = new ol.Map({
layers: [gaodeMapLayer],
view: new ol.View({
// 設置成都爲地圖中心

center: [104.06, 30.67],
projection: "EPSG:4326",// 指定投影使用EPSG:4326
zoom: 10
}),
target: "map"
});
}

this.peoLocusPointLayer

warningFlag

圖層的顯示隱藏
var layers = this.map.getLayers().getArray(); //地圖的全部圖層 layers
setInterval(() => {
this.tureFlag = !this.tureFlag;
that.teturnFlag(layers);
}, 2000);

teturnFlag(layers) {
layers[11].setVisible(this.tureFlag);
layers[12].setVisible(!this.tureFlag);
},

離線瓦片地圖替換的是source的url:
source: new ol.source.XYZ({
// 設置本地離線瓦片所在路徑
url: '../src/05-04/offlineMapTiles/{z}/{x}/{y}.png'
})

ol.source.Tile（TileImage）做爲ol.source.XYZ的父類，能夠轉換座標，修改分辨率

vue es6定時器 this.map.addLayer is not a function
setTimeout(function(){
this.map.addLayer(this.gaodeMapLayer);
}, 1500);
改成
setTimeout(() => {//ES6 優勢
this.map.addLayer(this.gaodeMapLayer);
}, 1500);

動態地圖加載切花圖層實現
this.map.removeLayer(this.map.getLayers().item(0));//or
this.map.removeLayer(this.gaodeMapLayer);
this.map.addLayer(this.gaodeMapLayer);//去掉以後加上新圖層

地圖圖層
//設置地圖爲高德地圖
this.gaodeMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
format: new ol.format.GeoJSON()
})
});

// 放大縮小地圖（API）
function zoomIn() {
var view = map.getView();
// 讓地圖的zoom增長1，從而實現地圖放大
view.setZoom(view.getZoom() + 1);
}

// 移動到成都
function moveToChengDu() {
var view = map.getView();
// 設置地圖中心爲成都的座標，便可讓地圖移動到成都
view.setCenter([104.06, 30.67]);//成都座標
map.render();
}
自適應區域
function fitToChengdu() {
// 讓地圖最大化徹底地顯示區域[104, 30.6, 104.12, 30.74]
this.map.getView().fit([104, 30.6, 104.12, 30.74], this.map.getSize());
}

點擊事件移動地圖展現
moveToLeft() {
var view = this.map.getView();
var mapCenter = view.getCenter();
mapCenter[0] += 1;//x值增長，便可使得地圖向左右移動
mapCenter[1] -= 1;//上下移動
view.setCenter(mapCenter);
this.map.render();
},

//實現兩個地圖聯動,兩個ol.Map使用了同一個view（vue環境中測試不行）
//<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'
});
</script>

//地圖單機事件
map.on('singleclick',mapClick);

function mapClick(e){
var pixel = map.getEventPixel(e.originalEvent);
var featureInfo = map.forEachFeatureAtPixel(pixel,
function (feature, layer) {
return {feature:feature,layer:layer};
});
if (featureInfo!==undefined&&featureInfo!==null
&&featureInfo.layer!==null)
{
console.log('打印選擇要素');
console.log(featureInfo .feature);
console.log('打印選擇要素所屬Layer');
console.log(featureInfo .layer);
}
}

瓦片地圖是很是大的地圖的解決方案一整塊很是大的地圖進行切片，分紅不少相同大小的小塊地圖，在用戶訪問的時候，再一塊一塊小地圖加載，拼接在一塊兒，從而還原成一整塊大的地圖若是一次加載整個大地圖，會致使加載很慢，且不可用的問題。這對於在線服務來講，是很是致命的

Source和Layer是一對一的關係，有一個Source，必然須要一個Layer，而後把這個Layer添加到Map上，就能夠顯示出來
官網的API搜索ol.source有不少
概括起來共三種：ol.source.Tile，ol.source.Image和ol.source.Vector
ol.layer.Base(一級)
ol.layer.Group(二級)
ol.layer.Layer(二級)對應ol.source.Source
ol.layer.Image (三級)對應ol.source.Image
ol.layer.Tile (三級)對應ol.source.Tile
ol.layer.Vector (三級)對應ol.source.Vector
ol.layer.Heatmap (四級)對應ol.source.Vector
ol.layer.VectorTile (四級)對應ol.source.Vector

限制地圖縮放級別
<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>

限制地圖範圍
只能在經度29度到31度，緯度在102到104度之間顯示
<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>

墨卡託投影
普遍用於網頁地圖。目前OpenLayers3支持兩種投影，一個是EPSG:4326，等同於WGS84座標系，參見詳情。另外一個是EPSG:3857，等同於900913，由Mercator投影而來，常常用於web地圖。

動態交換地圖
function swapMap() {
// 改變兩個地圖的容器
map1.setTarget('map2');
map2.setTarget('map1');
}

// 建立地圖
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'
});

參數layers
多個圖層是疊加的，在最上面的會覆蓋下面的，以此類推
參數view
地圖定義顯示窗口，對應ol.View類，能夠自定義地圖顯示的中心點，縮放層級等
參數target
指定地圖在頁面中具體哪一個位置進行顯示，爲此要記住地圖顯示仍是離不開使用dom來實現

核心組成部分
地圖 ol.Map
視圖 ol.View
圖層 ol.Layer
數據源 ol.source
控件地圖交互的入口 ol.control
交互 ol.interaction

多個layers 只能一個views