本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1034.html ，对应的 官网示例
https://openlayers.org/en/latest/examples/box-selection.html?q=feature
https://openlayers.org/en/latest/examples/translate-features.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>
</style>
<body>
<div id="info"> </div>
<div id="map" class="map"></div>
<script>
//实现思路：准备两组样式，一组常规样式，一组高亮样式
// 当有要素需要被高亮显示时，将其加入一个临时矢量图层，并使用高亮样式进行样式化
// 因为这个临时图层加入了要素之后，就会被立即刷新，所以它会在所有图层之上显示，
// 也就是说高亮样式的要素就会显示在常规样式的要素上面。
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: "rgba(255, 255, 255, 0.6)"
}),
stroke: new ol.style.Stroke({
color: "#319FD3",
width: 1
}),
text: new ol.style.Text({
font: "12px Calibri,sans-serif",
fill: new ol.style.Fill({
color: "#000"
}),
stroke: new ol.style.Stroke({
color: "#fff",
width: 3
})
})
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url:
"../data/lands.geojson",
format: new ol.format.GeoJSON()
}),
style: function (feature) {
style.getText().setText(feature.get("name"));
return style;
}
});
var map = new ol.Map({
layers: [vectorLayer],
target: "map",
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
//定义高亮样式
var highlightStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#f00",
width: 1
}),
fill: new ol.style.Fill({
color: "rgba(255,255,0,0.1)"
}),
text: new ol.style.Text({
font: "12px Calibri,sans-serif",
fill: new ol.style.Fill({
color: "#000"
}),
stroke: new ol.style.Stroke({
color: "#f00",
width: 3
})
})
});
//定义高亮图层
//注意这里的图层并没有加入到map之中
var featureOverlay = new ol.layer.Vector({
//这里的source是一个空的，没有任何要素
source: new ol.source.Vector(),
map: map,
style: function (feature) {
highlightStyle.getText().setText(feature.get("name"));
return highlightStyle;
}
});
console.log(map)
var highlight;//保存最后一次高亮的要素集
var displayFeatureInfo = function (pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
//在地图的下方空间显示要素的信息
var info = document.getElementById("info");
if (feature) {
info.innerHTML = feature.getId() + ": " + feature.get("name");
} else {
info.innerHTML = " ";
}
//当前要素并非标记的高亮要素
if (feature !== highlight) {
//如果原来存在高亮要素，需要从高亮图层中删除
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
//如果当前要素存在，将该要素添加到高亮图层中
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
//更新高亮要素的记录
highlight = feature;
}
};
map.on("pointermove", function (evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on("click", function (evt) {
displayFeatureInfo(evt.pixel);
});
</script>
</body>
</html>
网友评论