346 lines
12 KiB
Markdown
346 lines
12 KiB
Markdown
|
---
|
|||
|
|
title: 内容叠加层
|
|||
|
|
date: 2020-12-25
|
|||
|
|
author: ac
|
|||
|
|
tags:
|
|||
|
|
- Overlay
|
|||
|
|
- Openlayers
|
|||
|
|
categories:
|
|||
|
|
- GIS
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Overlay
|
|||
|
|
|
|||
|
|
`ol.Overlay`是一个用于在地图上展示信息的一个小部件（Widget），作为内容叠加层添加到`map`中，可以出现在地图上的任何位置。部件需要一个HTML模版，来展示需要显示的内容，`Overlay`部件控制出现的位置，像气泡一样，锚指向设置的位置上。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 构造参数Option
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
<!--创建叠加层-->
|
|||
|
|
var popup = new ol.Overlay({
|
|||
|
|
//设置该叠加层的标识，方便在map中获取该图层（map.getOverlayById）
|
|||
|
|
id:'bubble',
|
|||
|
|
//HTMLElement元素，也是叠加层内容（内容模版）
|
|||
|
|
element: document.getElementById('popup'),
|
|||
|
|
//设置偏移量[x,y]，像素为单位
|
|||
|
|
// offset:[200,200],
|
|||
|
|
//该叠加层的锚点 ，值为Coordinate
|
|||
|
|
position:ol.proj.fromLonLat([113.958334, 22.535640]),
|
|||
|
|
//设置锚点相对于叠加层内容的位置'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'.
|
|||
|
|
positioning:"center-center",
|
|||
|
|
//是否应该停止在viewport中的事件传播。默认true，图层会在ol-overlaycontainer-stopevent里面；false则会在ol-overlaycontainer中
|
|||
|
|
stopEvent:true,
|
|||
|
|
//是否替换第一个overlay容器
|
|||
|
|
insertFirst:false,
|
|||
|
|
autoPan: true,//当气泡显示在窗口边缘，存在气泡显示不完全时，view视图将移动到显示整个气泡的视图
|
|||
|
|
autoPanAnimation: {
|
|||
|
|
duration: 250
|
|||
|
|
},
|
|||
|
|
// className:"customClass"//添加自定义样式
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**应用**
|
|||
|
|
|
|||
|
|
### 场景一
|
|||
|
|
已知特定的点位，对其进行注记或说明。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!doctype html>
|
|||
|
|
<html >
|
|||
|
|
<head>
|
|||
|
|
<link rel="stylesheet" href="css/ol.css" type="text/css">
|
|||
|
|
<style>
|
|||
|
|
.map {
|
|||
|
|
height: 400px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.ol-popup {
|
|||
|
|
position: absolute;
|
|||
|
|
background-color: white;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border: 1px solid #cccccc;
|
|||
|
|
bottom: 12px;
|
|||
|
|
left: -50px;
|
|||
|
|
min-width: 280px;
|
|||
|
|
}
|
|||
|
|
.ol-popup:after, .ol-popup:before {
|
|||
|
|
top: 100%;
|
|||
|
|
border: solid transparent;
|
|||
|
|
content: " ";
|
|||
|
|
height: 0;
|
|||
|
|
width: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.ol-popup:after {
|
|||
|
|
border-top-color: white;
|
|||
|
|
border-width: 10px;
|
|||
|
|
left: 48px;
|
|||
|
|
margin-left: -10px;
|
|||
|
|
}
|
|||
|
|
.ol-popup:before {
|
|||
|
|
border-top-color: #cccccc;
|
|||
|
|
border-width: 11px;
|
|||
|
|
left: 48px;
|
|||
|
|
margin-left: -11px;
|
|||
|
|
}
|
|||
|
|
.ol-popup-closer {
|
|||
|
|
text-decoration: none;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 2px;
|
|||
|
|
right: 8px;
|
|||
|
|
}
|
|||
|
|
.ol-popup-closer:after {
|
|||
|
|
content: "✖";
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script src="lib/ol.js"></script>
|
|||
|
|
<title>OpenLayers example</title>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h2>Overlay 地图注记</h2>
|
|||
|
|
<div id="map" class="map"></div>
|
|||
|
|
<!--popup容器-->
|
|||
|
|
<div id="popup" class="ol-popup">
|
|||
|
|
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
|||
|
|
<div id="popup-content">
|
|||
|
|
叠加层的内容（模版）
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var map = new ol.Map({
|
|||
|
|
layers: [
|
|||
|
|
//加载瓦片图层
|
|||
|
|
new ol.layer.Tile({
|
|||
|
|
source:new ol.source.OSM(),
|
|||
|
|
name:"世界地图(OSM瓦片)",
|
|||
|
|
id:"osm"
|
|||
|
|
})
|
|||
|
|
],
|
|||
|
|
target: document.getElementById('map'),
|
|||
|
|
view: new ol.View({
|
|||
|
|
center: [12703928.421141896,2575539.5219027703],
|
|||
|
|
zoom: 11
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
//根据已知坐标点指定气泡位置
|
|||
|
|
var shenzhen = ol.proj.fromLonLat([114.05 ,22.55]);
|
|||
|
|
|
|||
|
|
<!--创建叠加层-->
|
|||
|
|
var popup = new ol.Overlay({
|
|||
|
|
//Overlay 的基本属性
|
|||
|
|
id:'pipe',//设置该叠加层的标识，方便在map中获取该图层（map.getOverlayById）
|
|||
|
|
element: document.getElementById('popup'),//HTMLElement元素，也是叠加层内容
|
|||
|
|
// offset:[200,200],//设置偏移量[x,y]，像素为单位
|
|||
|
|
position:shenzhen,//该叠加层的锚点 ，值为Coordinate
|
|||
|
|
positioning:"center-center",//
|
|||
|
|
stopEvent:true,//是否应该停止在viewport中的事件传播。默认true，图层会在ol-overlaycontainer-stopevent里面；false则会在ol-overlaycontainer中
|
|||
|
|
insertFirst:true,//是否替换第一个overlay容器
|
|||
|
|
autoPan: true,
|
|||
|
|
autoPanAnimation: {
|
|||
|
|
duration: 2500
|
|||
|
|
},
|
|||
|
|
// className:"abcclass"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
popup.setPosition(shenzhen);
|
|||
|
|
map.addOverlay(popup);
|
|||
|
|
|
|||
|
|
//绑定气泡的关闭按钮的点击事件，隐藏气泡
|
|||
|
|
document.getElementById('popup-closer').onclick = function() {
|
|||
|
|
popup.setPosition(undefined);
|
|||
|
|
clickPopup.setPosition(undefined);
|
|||
|
|
this.blur();
|
|||
|
|
return false;//取消a标签的默认行为（点击a标签的默认行为是会跳转页面的）
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 场景二
|
|||
|
|
|
|||
|
|
点击矢量要素，展示要素信息。获取要素信息的方法可以使用`map`中的`getFeaturesAtPixel()`方法获取`layers`集合中的矢量图层在该像素点处的要素集合，也可以使用矢量数据源`ol.source.Vector`中的`getFeaturesAtCoordinate`方法获取要素信息。当然也可以使用`select`控件选择要素。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!doctype html>
|
|||
|
|
<html >
|
|||
|
|
<head>
|
|||
|
|
<link rel="stylesheet" href="css/ol.css" type="text/css">
|
|||
|
|
<style>
|
|||
|
|
.map {
|
|||
|
|
height: 400px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.ol-popup {
|
|||
|
|
position: absolute;
|
|||
|
|
background-color: white;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border: 1px solid #cccccc;
|
|||
|
|
bottom: 12px;
|
|||
|
|
left: -50px;
|
|||
|
|
min-width: 280px;
|
|||
|
|
}
|
|||
|
|
.ol-popup:after, .ol-popup:before {
|
|||
|
|
top: 100%;
|
|||
|
|
border: solid transparent;
|
|||
|
|
content: " ";
|
|||
|
|
height: 0;
|
|||
|
|
width: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
.ol-popup:after {
|
|||
|
|
border-top-color: white;
|
|||
|
|
border-width: 10px;
|
|||
|
|
left: 48px;
|
|||
|
|
margin-left: -10px;
|
|||
|
|
}
|
|||
|
|
.ol-popup:before {
|
|||
|
|
border-top-color: #cccccc;
|
|||
|
|
border-width: 11px;
|
|||
|
|
left: 48px;
|
|||
|
|
margin-left: -11px;
|
|||
|
|
}
|
|||
|
|
.ol-popup-closer {
|
|||
|
|
text-decoration: none;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 2px;
|
|||
|
|
right: 8px;
|
|||
|
|
}
|
|||
|
|
.ol-popup-closer:after {
|
|||
|
|
content: "✖";
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script src="lib/ol.js"></script>
|
|||
|
|
<title>OpenLayers example</title>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h2>Openlayers 内容叠加层</h2>
|
|||
|
|
<div id="map" class="map"></div>
|
|||
|
|
<!--popup容器-->
|
|||
|
|
<div id="popup" class="ol-popup">
|
|||
|
|
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
|||
|
|
<div id="popup-content">
|
|||
|
|
叠加层的内容
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var vectorSource = new ol.source.Vector({
|
|||
|
|
format: new ol.format.GeoJSON({geometryName:"geom"}),
|
|||
|
|
loader: function (extent, resolution, projection) {
|
|||
|
|
var proj = projection.getCode();
|
|||
|
|
var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
|
|||
|
|
'version=1.1.0&request=GetFeature&typename=test:tiger_roads&' +
|
|||
|
|
'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 nyc = ol.proj.fromLonLat([-73.92722, 40.774221]);
|
|||
|
|
var map = new ol.Map({
|
|||
|
|
layers: [
|
|||
|
|
//加载瓦片图层
|
|||
|
|
new ol.layer.Tile({
|
|||
|
|
source:new ol.source.OSM(),
|
|||
|
|
name:"世界地图(OSM瓦片)",
|
|||
|
|
id:"osm"
|
|||
|
|
}),
|
|||
|
|
new ol.layer.Vector({
|
|||
|
|
source: vectorSource,
|
|||
|
|
id: "nyc"
|
|||
|
|
})
|
|||
|
|
],
|
|||
|
|
target: document.getElementById('map'),
|
|||
|
|
view: new ol.View({
|
|||
|
|
center: nyc,
|
|||
|
|
zoom: 11
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
<!--创建叠加层-->
|
|||
|
|
var popup = new ol.Overlay({
|
|||
|
|
//Overlay 的基本属性
|
|||
|
|
id:'bubble',//设置该叠加层的标识，方便在map中获取该图层（map.getOverlayById）
|
|||
|
|
element: document.getElementById('popup'),//HTMLElement元素，也是叠加层内容
|
|||
|
|
// offset:[200,200],//设置偏移量[x,y]，像素为单位
|
|||
|
|
position:nyc,//该叠加层的锚点 ，值为Coordinate
|
|||
|
|
positioning:"bottom-right",//设置锚点相对于叠加层内容的位置'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'.
|
|||
|
|
stopEvent:true,//是否应该停止在viewport中的事件传播。默认true，图层会在ol-overlaycontainer-stopevent里面；false则会在ol-overlaycontainer中
|
|||
|
|
insertFirst:false,//是否替换第一个overlay容器
|
|||
|
|
autoPan: true,//当气泡显示在窗口边缘，存在气泡显示不完全时，view视图将移动到显示整个气泡的视图
|
|||
|
|
autoPanAnimation: {
|
|||
|
|
duration: 2500
|
|||
|
|
},
|
|||
|
|
// className:"customClass"//添加自定义样式
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
popup.setPosition(nyc);
|
|||
|
|
map.addOverlay(popup);
|
|||
|
|
|
|||
|
|
//绑定气泡的关闭按钮的点击事件，隐藏气泡
|
|||
|
|
document.getElementById('popup-closer').onclick = function(e) {
|
|||
|
|
console.log("closer");
|
|||
|
|
popup.setPosition(undefined);
|
|||
|
|
this.blur();
|
|||
|
|
return false;//取消a标签的默认行为（点击a标签的默认行为是会跳转页面的）
|
|||
|
|
};
|
|||
|
|
map.on('click',function(e){
|
|||
|
|
var features = map.getFeaturesAtPixel(e.pixel,{
|
|||
|
|
//设置点击要素的容差
|
|||
|
|
'hitTolerance':5
|
|||
|
|
});
|
|||
|
|
if(features){
|
|||
|
|
var popupWidget = map.getOverlayById('bubble');
|
|||
|
|
popupWidget.setPosition(e.coordinate);
|
|||
|
|
var featurtesInfo = createInfoTemplate(features);
|
|||
|
|
var content = document.getElementById('popup-content');
|
|||
|
|
content.innerHTML = featurtesInfo;
|
|||
|
|
}else{
|
|||
|
|
popupWidget.setPosition(undefined);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
function createInfoTemplate(features) {
|
|||
|
|
var template = '<table>'+
|
|||
|
|
'<tr><th>gid</th><th>cfcc</th><th>name</th></tr>';
|
|||
|
|
for(var i=0;i<features.length;i++){
|
|||
|
|
var property = features[i].values_;
|
|||
|
|
template += '<tr><td>'+property["gid"]+'</td><td>'+property["cfcc"]+'</td><td>'+property["name"]+'</td></tr>';
|
|||
|
|
}
|
|||
|
|
return template;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|