【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'//加载图像的属性

})

巴特西

【06】openlayers 切片图层

最新文章

热门文章