OpenLayers-2.13.1 要素的4个事件绑定featureclick nofeatureclick featureover featureout
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers 要素 事件 Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
#result {
height: 60px;
width: 514px;
font-size: smaller;
overflow: auto;
margin-top: 5px;
}
</style>
</head>
<body>
<h1 id="title">Feature Events Example</h1>
<div id="tags">
feature, select, hover
</div>
<div id="shortdesc">Feature hover and click events</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p id="result">在地图上悬停或者点击要素.</p>
<p>This example shows how to use the 'featureclick', 'nofeatureclick',
'featureover' and 'featureout' events to make features interactive.
Look at the <a href="feature-events.js">feature-events.js</a> source
code to see how this is done.</p>
<p>Note that these events can be registered both on the map and on
individual layers. If many layers need to be observed, it is
recommended to register listeners once on the map for performance
reasons.</p>
</div>
<script src="../lib/OpenLayers.js"></script>
<script src="feature-events.js"></script>
</body>
</html>
JS脚本的内容：
//声明图层监听事件
var layerListeners = {
featureclick: function(e) {
log(e.object.name + " says: " + e.feature.id + " clicked.");
return false;
},
nofeatureclick: function(e) {
log(e.object.name + " says: No feature clicked.");
}
};
//定义矢量图层中要素的样式
var style = new OpenLayers.StyleMap({
'default': OpenLayers.Util.applyDefaults(
{label: "${l}", pointRadius: 10},
OpenLayers.Feature.Vector.style["default"]
),
'select': OpenLayers.Util.applyDefaults(
{pointRadius: 10},
OpenLayers.Feature.Vector.style.select
)
});
//定义矢量图层1 样式style 和监听事件 layerListeners
var layer1 = new OpenLayers.Layer.Vector("Layer 1", {
styleMap: style,
eventListeners: layerListeners
});
//矢量图层1填充要素
layer1.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 -1)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 1)"), {l:1})
]);
//定义矢量图层2
var layer2 = new OpenLayers.Layer.Vector("Layer 2", {
styleMap: style,
eventListeners: layerListeners
});
//矢量图层2填充要素
layer2.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"), {l:2}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"), {l:2})
]);
var map = new OpenLayers.Map({
div: "map",
allOverlays: true,
layers: [layer1, layer2],
zoom: 6,
center: [0, 0],
eventListeners: {
//鼠标悬停在要素上面
featureover: function(e) {
e.feature.renderIntent = "select";
e.feature.layer.drawFeature(e.feature);
log("Map says: Pointer entered " + e.feature.id + " on " + e.feature.layer.name);
},
//鼠标离开要素
featureout: function(e) {
e.feature.renderIntent = "default";
e.feature.layer.drawFeature(e.feature);
log("Map says: Pointer left " + e.feature.id + " on " + e.feature.layer.name);
},
//鼠标点击要素
featureclick: function(e) {
log("Map says: " + e.feature.id + " clicked on " + e.feature.layer.name);
}
}
});
//记录函数
function log(msg) {
if (!log.timer) {
result.innerHTML = "";
log.timer = window.setTimeout(function() {delete log.timer;}, 100);
}
result.innerHTML += msg + "<br>";
}
转载自：https://blog.csdn.net/u010299411/article/details/73440888
