【06】openlayers 切片图层

2020-03-14 23:02:46 阅读：256 来源： 互联网

标签：layers ol 06 source openlayers new 图层 let

创建地图：

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

标签：layers,ol,06,source,openlayers,new,图层,let
来源： https://www.cnblogs.com/MaShuai666/p/12494947.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【06】openlayers 切片图层