OpenLayers2 --- Feature Event

来源：互联网发布：mac默认英文字体编辑：程序博客网时间：2024/06/06 01:40

使用版本

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})]);// layer2var 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})]);// 生成一个mapvar 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;}

结果：
结果展示图片

阅读全文

0 0