qiusj
/
meface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
meface/docs/article/gis/openlayers/34layerscontrol.md

350 lines
14 KiB
Markdown
Raw Normal View History

init project
2023-11-17 10:54:23 +08:00
---
title: 图层控制
date: 2020-10-20
author: ac
tags:
- OpenLayers
categories:
- GIS
---
## 1. 简述
在`ol`中对图层显隐性的控制可以通过修改图层的`visible`属性或设置不透明度`opacity`属性来实现。
与且它地图`API`对比，获取图层的方法比较繁琐，比如在`ArcGIS for JS`中使用`map.getLayerById()`就可直接获得对应的图层了，但在`ol`中添加到`map`中的图层都存储在一个图层集合`layers`中的，需要使用`map.getLayers()`方法先获得该集合，再循环遍历筛选才能得到想要的图层。
> 图层集合中先添加进来的图层在底部，会被后加入的图层遮挡。所以通常将瓦片底图放在底部，上面的图层依次按面、线、点要素添加，这样有利于各图层的显示。如果想当前图层不被遮挡可以设置后续加入图层的`opacity`不透明度属性。
核心代码：
```javascript
function changeLayerVisibility(layerId,prop) {
//获取图层数组
var layers = map.getLayers();
for(var i=0;i<layers.getLength();i++){
if(layers.item(i).get("id") === layerId){
layers.item(i).setVisible(prop);
}
}
}
```
相关API：
<img src="./images/image-20201110143812069.png" alt="image-20201110143812069"/>
`map.getLayers()`返回的是图层（`BaseLayer`）集合对象。
`ol.Collection`是对`JS`中数组的扩展，添加许多方便的方法，如`item(index)`方法获取相应index位置的数组元素。`BaseLayer`是`Layer`的基类。
**在构建`Layer`时，传入的`option`都会有相应的`get/set`访问器，所以可以拿到初始化图层时自定义的`id`属性。**
## 2. 示例
这里使用了一个很久很久以前比较流行的`js`树形插件`ztree`。
<img src="./images/image-20201214112707035.png" alt="image-20201214112707035" style="zoom: 50%;" />
下面我们使用`ztree`树形插件来创建图层控制示例（完整代码）：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<link rel="stylesheet" href="css/ol.css" type="text/css">
<link rel="stylesheet" href="lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="lib/ol.js"></script>
<script src="lib/jquery-3.1.1.js"></script>
<script src="lib/zTree_v3/js/jquery.ztree.all.min.js"></script>
<title>Layer</title>
</head>
<body>
<h2>ztree图层控制</h2>
<p>zTree 是一个依靠 jQuery 实现的多功能 “树插件”。</p>
<div id="map" class="map"></div>
<div id="treeDemo" class="ztree"></div>
<script type="text/javascript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
check: {
enable: true,
nocheckInherit: false
},
data: {
simpleData: {enable: true}
},
view:{
showIcon:false
},
callback:{
//配置复选框点击事件的处理函数
onCheck:handleCheck
}
};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [
{
Id:1,pid:0,name:"矢量数据", open:true, checked:true,children:
[
{id:11,pId:1,name:"GeoJson数据",id:"GeoJsonData", checked:true},
{id:12,pId:1,name:"kml数据",id:"kmlData", checked:true},
{id:13,pId:1,name:"gpx数据",id:"gpxData", checked:true},
{id:14,pId:1,name:"loader函数加载的数据",id:"load", checked:true},
{id:15,pId:1,name:"已知坐标添加的图层",id:"pointLayer", checked:true},
]
},
{
id:2,pId:0,name:"栅格数据", open:true, checked:true,children:
[
{id:21,pId:2,name:"OpenStreetMap",id:"osm", checked:true},
{id:22,pId:2,name:"ArcGIS MapServer瓦片",id:"arcgis_tile", checked:true},
{id:23,pId:2,name:"ArcGIS online瓦片服务",id:"arcgis_online", checked:true},
{id:24,pId:2,name:"Bing影像 Aerial",id:"bing_Aerial", checked:true},
{id:25,pId:2,name:"Bing影像 AerialWithLabelsOnDemand",id:"bing_AerialWithLabelsOnDemand", checked:true},
{id:26,pId:2,name:"Bing影像 RoadOnDemand",id:"bing_RoadOnDemand", checked:true},
{id:27,pId:2,name:"Bing影像 CanvasDark",id:"bing_CanvasDark", checked:true},
]
},
{
id:3,pId:0,name:"公共网络地图服务",open:true,checked:true,children:
[
{id:31,pId:3,name:"百度地图",id:"BMap", checked:true},
{id:32,pId:3,name:"天地图矢量图层",id:"tdt_vec", checked:true},
{id:33,pId:3,name:"天地图矢量注记图层",id:"tdt_cva", checked:true},
{id:34,pId:3,name:"Mapbox",id:"mapbox_tile", checked:true},
]
}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//ztree复选框点击事件处理函数
function handleCheck(e,treeId,treeNode){
if(treeNode.level !== 0){
//叶子节点时
changeLayerVisibility(treeNode.id,treeNode.checked)
}else{
//非叶子节点时
if(treeNode.children !== null){
for(var j=0;j<treeNode.children.length;j++){
changeLayerVisibility(treeNode.children[j].id,treeNode.checked);
}
}
}
}
function changeLayerVisibility(layerId,prop) {
var layers = map.getLayers();
for(var i=0;i<layers.getLength();i++){
if(layers.item(i).get("id") === layerId){
layers.item(i).setVisible(prop);
}
}
}
//初始化地图，加载图层
var map;
function initMap() {
var shenzhen = [113.958334, 22.535640];
var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer';
var onlineTileUrl = 'http://server.arcgisonline.com/arcgis/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}'
var bingKey = 'AmosL5A0GtVryl4sXNZm6U5EQMD6brAd5E8AJPGJf8AUU1saDYXDkb5CwQFijans';
var key = "bf156eb3c72350d62b008dc8a4ae1016";
var mapboxkey = "pk.eyJ1IjoicWl1c2hpamllIiwiYSI6ImNrYTYzNmlhdDAzb2YydG13YjZic2t2M3AifQ.XiCKl8HOEAy0MBo5v2yjvA";
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function (extent, resolution, projection) {
var proj = projection.getCode();
var url = 'http://gisserver.tianditu.gov.cn/TDTService/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=LRRL&' +
'outputFormat=application/json&srsname=' + proj + '&' +
'bbox=' + extent.join(',') + ',' + proj;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function () {
vectorSource.removeLoadedExtent(extent);
}
xhr.onerror = onError;
xhr.onload = function () {
if (xhr.status == 200) {
vectorSource.addFeatures(
vectorSource.getFormat().readFeatures(xhr.responseText));
} else {
onError();
}
}
xhr.send();
},
strategy: ol.loadingstrategy.bbox
})
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point([12703928.421,2575539.521]),
name: '点要素'
});
var resolutions = [];
for(var i=0;i<19;i++){
resolutions[i] = Math.pow(2,18 - i)
}
map = new ol.Map({
target:"map",
view: new ol.View({
center:ol.proj.fromLonLat(shenzhen),
zoom:8
}),
layers:[
//加载矢量Vector服务图层
new ol.layer.Vector({
source:new ol.source.Vector({
url:'data/geojson/countries.geojson',
format:new ol.format.GeoJSON()
}),
name:"国界(JSON格式的矢量图层)",
id:"GeoJsonData"
}),
//加载矢量Vector服务图层
new ol.layer.Vector({
source:new ol.source.Vector({
url:'data/kml/2012_Earthquakes_Mag5.kml',
format:new ol.format.KML({
extractStyles:false
})
}),
name:"点(KML格式的矢量图层)",
id:"kmlData"
}),
new ol.layer.Vector({
source:new ol.source.Vector({
url:'data/gpx/fells_loop.gpx',
format:new ol.format.GPX()
}),
name:"GPX数据",
id:"gpxData"
}),
new ol.layer.Vector({
source: vectorSource,
name: "天地图中的道路数据",
id: "load"
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features:[pointFeature]
}),
id:"pointLayer"
}),
//加载瓦片图层
new ol.layer.Tile({
source:new ol.source.OSM(),
name:"世界地图(OSM瓦片)",
id:"osm"
}),
new ol.layer.Tile({
// extent:[-13884991, 2870341, -7455066, 6338219],
source:new ol.source.TileArcGISRest({
url:url
}),
name:"ArcGIS瓦片服务",
id:"arcgis_tile"
}),
new ol.layer.Tile({
// extent:[-13884991, 2870341, -7455066, 6338219],
source:new ol.source.XYZ({
url:onlineTileUrl
}),
name:"ArcGIS online瓦片服务",
id:"arcgis_online"
}),
new ol.layer.Tile({
source:new ol.source.BingMaps({key:bingKey,imagerySet:"Aerial"}),
name:"BingMaps(Aerial)",
id:"bing_Aerial"
}),
new ol.layer.Tile({
source:new ol.source.BingMaps({key:bingKey,imagerySet:"AerialWithLabelsOnDemand"}),
name:"BingMaps(AerialWithLabelsOnDemand)",
id:"bing_AerialWithLabelsOnDemand"
}),
new ol.layer.Tile({
source:new ol.source.BingMaps({key:bingKey,imagerySet:"RoadOnDemand"}),
name:"BingMaps(RoadOnDemand)",
id:"bing_RoadOnDemand"
}),
new ol.layer.Tile({
source:new ol.source.BingMaps({key:bingKey,imagerySet:"CanvasDark"}),
name:"BingMaps(CanvasDark)",
id:"bing_CanvasDark"
}),
new ol.layer.Tile({
id:"BMap",
source:new ol.source.TileImage({
//设置坐标参考
projection:ol.proj.get('EPSG:3857'),
//设置分辨率
tileGrid:new ol.tilegrid.TileGrid({
origin:[0,0],
resolutions:resolutions
}),
//设置百度地图的瓦片地图请求地址
tileUrlFunction:function (tileCoord,pixelRatio,proj) {
if(!tileCoord){
return "";
}
var z = tileCoord[0];
var x = tileCoord[1];
var y = tileCoord[2];
if(x < 0){
x = "M" + (-x);
}
if(y < 0){
x = "M" + (-y);
}
return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&style=pl&udt=20151021&scale=1&p=1";
}
})
}),
new ol.layer.Tile({
id:"tdt_vec",
title:"天地图矢量图层",
source:new ol.source.XYZ({
// url:"http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk="+key,
url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk='+key,
crossOrigin:"anonymous",
wrapX:false
})
}),
new ol.layer.Tile({
id:"tdt_cva",
title:"天地图矢量注记图层",
source:new ol.source.XYZ({
url:"https://t2.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk="+key,
crossOrigin:"anonymous",
wrapX:false
})
}),
new ol.layer.Tile({
id:"mapbox_tile",
source: new ol.source.XYZ({
url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}?access_token='+mapboxkey
})
}),
]
});
}
window.onload = initMap();
</script>
</body>
</html>
```