【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 切片图层的更多相关文章
- 【07】openlayers 矢量图层
创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ center: [0, 0],//义地图显示中心于经度0度,纬度 ...
- openlayers自定义图层控制的实现
好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...
- ArcGIS api for javascript——图层-创建定制的切片图层类型的图层
描述 本例展示了如何创建一个定制图层,该图层访问来自WEB服务器的地图切片.这种方式最通用的用途是检索ArcGIS Server 9.2切片缓存或web上的其他地图切片服务.尽管本例使用的是一个Arc ...
- openlayers筛选图层
很多时候需要筛选图层,例如选择交互(ol.interaction.Select). 图片来自官方:https://openlayers.org/en/v4.6.5/apidoc/ol.interact ...
- Openlayers 3 图层探查功能
<body> <div id="map"></div> <script> var map=new ol.Map({ target:& ...
- openlayers 各种图层,持续更新
/*高德地图*/ var vectorLayerLine = new ol.layer.Tile({ source: new ol.source.XYZ({ urls: [ "http:// ...
- 【05】openlayers 网格图层
效果: 创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection: 'EPSG:4326', //投 ...
- 【09】openlayers 图片图层
效果: 创建地图: var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection:'EPSG:4326',//投影方式 cent ...
- ArcGIS api for javascript——合并切片和动态图层
描述 这个示例加入一个通过ArcGISTiledMapServiceLayer表示的cachedArcGIS Server地图服务,和一个通过ArcGISDynamicMapServiceLayer表 ...
随机推荐
- Spring Boot集成全局唯一ID生成器
流水号生成器(全局唯一 ID生成器)是服务化系统的基础设施,其在保障系统的正确运行和高可用方面发挥着重要作用.而关于流水号生成算法首屈一指的当属 Snowflake雪花算法,然而 Snowflake本 ...
- getline的使用
函数定义: getline(istream &in, string &s) 作用: 在C++中用 string 类型进行终端输入字符串时,解决无法输入带有空格的字符串的问题. 功能: ...
- C#获取代码执行时间(精确到毫秒)
private void Time(int i) { Stopwatch sw = new Stopwatch(); sw.Start(); Thread.Sleep(i); sw.Stop(); C ...
- container/injection简介以及发展历史
一:什么是Container?Container的作用? 容器是一个标准的软件单元,它将代码及其所有依赖关系打包,以便应用程序从一个计算环境快速可靠地运行到另一个计算环境.container的主要作用 ...
- Appium移动自动化测试实例-基于python
一.环境搭建 安装Android 环境变量.SDK.Android API.ADT等. 步骤1 安装SDK:下载地址为https://pan.baidu.com/s/1mi6PT9m.如提示错误:' ...
- Docker容器时间同步问题
具体操作: 为了保证容器和宿主机之间的时间同步,采用如下参数:-v /etc/localtime:/etc/localtime:ro但是在页面访问的时候时间依然相差8个小时: 该怎么破解! 回复: 1 ...
- PHPExcel之蛋疼
限制了内存,处理个80+K的表就会GG,所以还要尽量删空行,选中某一行如A3,ctrl+shift+↓然后ctrl+小键盘的减号最后需要ctrl+s
- C++扬帆远航——14(求两个数的最大公约数)
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:gongyueshu.cpp * 作者:常轩 * 微信公众号:W ...
- async/await实现图片的串行、并行加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring常见注解
@Autowired @Resource @Component:类加上@Component注解,即表明此类是bean @Aspect 注解表示这是一个切面 @Around(value = " ...