openlayers基础用例

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

vue安装自定义坐标系
npm install proj4
import * as proj4 from "proj4";
or//
import proj4 from "proj4";

 

报"xp"错误就是对象用的不对

warningevFlag: true, //隐患图标显示标志
constructonevFlag: true, //施工显示标志
allPolygonevFlag: true, //片区显示标志
insPointPointvFlag: true, //巡检点 点 显示标志
insPointLinevFlag: true, //巡检点 线 显示标志
carevFlag

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;
}

图层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
})
});
},

谷歌地图
// 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"
// }) //加载谷歌影像地图

//获取修改多边形的坐标
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();

});
},

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

设置为地图中心
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 //缩放比
});
}

//获取 图层 中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);

var bbox = [dataExt[0], dataExt[1], dataExt[0], dataExt[3], dataExt[2], dataExt[3], dataExt[2], dataExt[1]];
//地图展示区域变化监听
this.map.getView().on("change",()=>{
let dataExt = this.map.getView().calculateExtent(this.map.getSize());//获取区域的四个点
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;
}
var bbox = [
dataExt[0],
dataExt[1],
dataExt[0],
dataExt[3],
dataExt[2],
dataExt[3],
dataExt[2],
dataExt[1]
];
})
//设置图标根据图层变化大小
changeIconScale(feature) {
//先初始化尺寸
let style = feature.getStyle();
// 重新设置图标的缩放率，基于层级12来做缩放
//当地图层级越来越往上时（数字变小），图标要变得更小
if (this.map.getView().getZoom() > 10) {
style.getImage().setScale(this.map.getView().getZoom() / 12);
} else {
style.getImage().setScale(this.map.getView().getZoom() / 24);
}

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

转载于:https://www.cnblogs.com/sx00/p/10913878.html