【06】openlayers 切片图层

2024-02-20 08:29:40

创建地图：

//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 olAttribution({//地图版权信息
        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.WMS({
    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'//加载图像的属性
})

码农公寓

相关文章