OpenLayers2 — Feature Event
目录
使用版本
OpenLayers2.13
有时，我们需要为地图上添加的特征（Feature）绑定监听事件，下面代码简单的实现了这个操作：
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<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>特征点事件</title>
<comment>
特征点事件<br/>
</comment>
<!---导入CSS文件 -->
<link rel="stylesheet" href="006_feature_event.css">
</head>
<body>
<!-- map展示-->
<div id="map" class="smallmap"></div>
<div id="result"></div>
<!-- 引入OpenLayers库-->
<script type="text/javascript" src="../../Common/OpenLayers/OpenLayers.js"></script>
<!-- 引入自定义的JS-->
<script type="text/javascript" src="006_feature_event.js"></script>
</body>
</html>JS代码（006_feature_event.js）：
/**
* OpenLayers 带事件的特征点
* Created by echo on 2017/8/31.
*/
/**
* 监听事件
* @type {{featureclick: Function, nofeatureclick: Function}}
*/
var layerListeners = {
// 点击特征点
featureclick: function(e) {
log(e.object.name + "says: " + e.feature.id + "clicked.")
},
// 未点击特征点
nofeatureclick: function(e) {
log(e.object.name + "says: no feature clicked.")
}
};
/**
* 样式
*/
var style = new OpenLayers.StyleMap({
// 默认显示
'default': OpenLayers.Util.applyDefaults(
{label: "${name}", pointRadius: 10},
OpenLayers.Feature.Vector.style["default"]
),
// 鼠标选中时
'select': OpenLayers.Util.applyDefaults(
// 点会变大
{pointRadius: 20},
OpenLayers.Feature.Vector.style.select
)
});
/**
* 基础面板
*/
var basicLayer = new OpenLayers.Layer.WMS(
'Base Layer',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'basic'},
{isBaseLayer: true}
);
/**
* 图层1
*/
var layer1 = new OpenLayers.Layer.Vector('Layer 1', {
// 图层样式
styleMap: style,
// 监听事件
eventListener: layerListeners
}
)
// layer1 添加特征点
layer1.addFeatures([
// 画了一个多边形，这个是想知道WKT可以干什么做的一个小测试，改了官网Demo的代码
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POLYGON ((3 1, 4 4, 2 4, 1 2, 3 1))"),{'name':"YOU"}),
// 点
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 1)"),{'name':1})
]);
// layer2
var layer2 = new OpenLayers.Layer.Vector("Layer 2", {
styleMap: style,
eventListener: layerListeners
});
layer2.addFeatures([
// fromWKT:
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"),{'name':2}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"),{'name':2})
]);
// 生成一个map
var map = new OpenLayers.Map({
div: "map",
allOverlays: false,
layers: [basicLayer,layer1,layer2],
zoom: 6,
center: [0, 0],
eventListeners: {
// OpenLayers.Events.featureclick 中可以找到这些事件
featureover: function(e) {
// renderIntent : 从styleMap选用一个样式
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);
}
},
controls:[new OpenLayers.Control.LayerSwitcher({})]
});
// 和上面的 controls 效果相同
//map.addControl(new OpenLayers.Control.LayerSwitcher({}));
/**
* 页面上给出操作信息
* @param msg
*/
function log(msg) {
if (!log.timer) {
result.innerHTML = "";
log.timer = window.setTimeout(function() {delete log.timer;}, 100);
}
result.innerHTML += msg + "<br>";
}CSS（006_feature_event.css）:
#map {
width: 500px;
height: 500px;
}结果：
转载自：https://blog.csdn.net/qq_26710805/article/details/77763409
