四章-35-鼠标悬停查看矢量瓦片的信息
2020-04-21 本文已影响0人
彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1035.html ，对应的 官网示例 https://openlayers.org/en/latest/examples/vector-tile-info.html?q=feature
image.png
image.png
<!DOCTYPE html>
<html>
<head>
<title>鼠标悬停查看矢量瓦片的信息</title>
<link rel="stylesheet" href="../include/ol.css" type="text/css">
<script src="../include/ol.js"></script>
</head>
<style>
#map {
position: relative;
}
#info {
z-index: 1;
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
margin: 0;
background: rgba(0,60,136,0.7);
color: white;
border: 0;
transition: opacity 100ms ease-in;
}
</style>
<body>
<div id="map" class="map"></div>
<pre id="info"></pre>
<script>
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
}),
layers: [
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
})
})]
});
map.on('pointermove', showInfo);
var info = document.getElementById('info');
function showInfo(event) {
var features = map.getFeaturesAtPixel(event.pixel);
if (!features) {
info.innerText = '';
info.style.opacity = 0;
return;
}
var properties = features[0].getProperties();
info.innerText = JSON.stringify(properties, null, 2);
info.style.opacity = 1;
}
</script>
</body>
</html>
