OpenLayers2.13
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; }结果：
