【06】openlayers 切片图层
创建地图:
//OSM图层 let source = new ol.source.OSM() //切片图层tilelayer let layers = new ol.layer.Tile({ source: source,//图层来源 opacity:1,//透明度,默认为1 visible:true,//是不显示,默认true extent:[100,34,103,36],//可选参数,图层渲染范围,[minLon,minLat,maxLon,maxLat] zIndex:1,//图层渲染索引,默认是按加载顺序叠加 }) //创建地图 var map = new ol.Map({ layers: [layers], target: 'map', view: new ol.View({ projection: 'EPSG:4326', center: [108.83734703063968, 34.1994154197084], zoom: 13, }) });
切片图层关于map的方法:
//添加切片图层 map.addLayer(layer) //删除切片图层 map.removeLayer(layer)
切片图层的一些自身方法:
//获取-设置,图层的可见范围 layers.getExtent(); layers.setExtent([100,34,103,36]); //获取-设置,图层最大缩放级别 layers.getMaxZoom() layers.setMaxZoom(18) //获取-设置,图层最小缩放级别 layers.getMinZoom() layers.setMinZoom(2) //获取-设置,图层的不透明度 layers.getOpacity() layers.setOpacity(1) //获取-设置,图层源 layers.getSource() layers.setSource(new ol.source.OSM()) //获取-设置,图层的可见性 layers.getVisible() layers.setVisible(true) //获取-设置,图层的Z索引 layers.getZIndex() layers.setZIndex(2) //绑定事件-取消事件 type事件类型,listener函数体 layers.on(type,listener) layers.un(type,listener)
切片图层的source:
OSM
//OSM let source = new ol.source.OSM({ wrapX:false,//是否水平包装世界 默认为true attributions:new ol.control.Attribution({//地图版权信息 html: '© <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors' }) })
BingMaps
//BingMaps //图像类型 let type = { Aerial:'Aerial', CanvasDark:'CanvasDark', RoadOnDemand:'RoadOnDemand', AerialWithLabelsOnDemand:'AerialWithLabelsOnDemand' } let source = new ol.source.BingMaps({ wrapX:false,//是否水平包装世界 默认为true key:'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',//API密钥 imagerySet:type.Aerial, //图像类型 })
XYZ
//XYZ let source = new ol.source.XYZ({ wrapX:false,//是否水平包装世界 默认为true attributions:new olAttribution({//地图版权信息 html: '' }), url:'',//图层地址 tileSize:256,//图层瓦片大小 默认256 }) //百度地图(矢量底图,矢量注记) let url_A = 'http://t1.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b0b6f6127490e1226b057bf3e90dfa45' let url_B = 'http://t2.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b0b6f6127490e1226b057bf3e90dfa45' //百度底图(影像底图,影像注记) let url_C = 'http://t2.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b0b6f6127490e1226b057bf3e90dfa45' let url_D = 'http://t2.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=b0b6f6127490e1226b057bf3e90dfa45' //高德地图 function gaode({ lang='cn',//中英文,cn或 en scl=1,//是否需要标准,1需要,2不需要 type=7,//设置影像和路网,style=6为影像图,style=7为矢量路网,style=8为影像路网。 }){ let gaodeURL = 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_'+lang+'&size=1&scl='+scl+'&style='+type+'' return gaodeURL } //谷歌地图 let url_E = 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0' //雅虎地图 let url_F = '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'
WMS
//WMS let source = new ol.source.TileWMS({ wrapX:false,//是否水平包装世界 默认为true attributions:new olAttribution({//地图版权信息 html: '' }), url:'',//图层地址 params:{//wms 所需参数 'VERSION':'1.3.0',//版本 'CRS':'EPSG:4326',//坐标规范,如果版本小于1.3.0 则用CRS改为SRS } })
ArcGIS
//ArcGIS let source = new ol.source.ArcGIS({ wrapX:false,//是否水平包装世界 默认为true attributions:new olAttribution({//地图版权信息 html: '' }), url:'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer',//图层地址 })
WMTS
//WMTS var projection = ol.proj.get("EPSG:3857"); var projectionExtent = projection.getExtent(); var size = ol.extent.getWidth(projectionExtent) / 256; var resolutions = new Array(14); var matrixIds = new Array(14); for (var z = 0; z < 14; ++z) { resolutions[z] = size / Math.pow(2, z); matrixIds[z] = z; } let source = new ol.source.WMTS({ attributions://地图版权信息 'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/' + 'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>', url://图层地址 "https://services.arcgisonline.com/arcgis/rest/" + "services/Demographics/USA_Population_Density/MapServer/WMTS/", layer: "0",//WMTS功能中公布的层名称 matrixSet: "EPSG:3857",//矩阵集 format: "image/png",//图像格式,默认为'image / jpeg' projection: projection,//投影方式 tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent),//瓷砖网格的原点 resolutions: resolutions,//每个分辨率的数组索引都需要匹配缩放级别 matrixIds: matrixIds//矩阵ID }), style: "default", wrapX: true })
TileJSON
//TileJSON let source = new ol.source.TileJSON({ url:'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',//路径 crossOrigin: 'anonymous'//加载图像的属性 })