OpenLayers2 --- Feature Event

超、凢脫俗 2022-06-09 08:25 131阅读 0赞

## 使用版本 ##

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>
        
        <link rel="stylesheet" href="006_feature_event.css">
    </head>
    <body>
    
    <div id="map" class="smallmap"></div>
    <div id="result"></div>
    
    <script type="text/javascript" src="../../Common/OpenLayers/OpenLayers.js"></script>
    
    <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; }

结果：  
![结果展示图片][SouthEast]

[SouthEast]: /images/20220609/03d4b30fd61b42e49b7907019184d81b.png