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]),//转4326new 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 }); }//地图 字体 样式 背景色 startstyleFun(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
layerlayer: 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