OpenLayers2---Features

墨蓝 2022-06-09 06:48 246阅读 0赞

有时我们需要在地图上标注一些特征点，在OpenLayers中，我们可以使用Vector来实现这些功能。具体可查看代码实现（使用版本OpenLayers2.13）：  
参考示例（examples）：vector-features-with-text

### 代码 ###

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>Vector 特征点（带文本）</title>
        <comment>
            使用vector标记带文本的特征点<br/>
        </comment>
        
        <link rel="stylesheet" href="vector_features_with_text.css">
    </head>
    <body onload="init()">
    <div id="map"></div>
    
    <script type="text/javascript" src="../../Common/OpenLayers/OpenLayers.js"></script>
    
    <script type="text/javascript" src="vector_features_with_text.js"></script>
    </body>
    </html>

JS代码：

/** * Created by echo on 2017/8/29. */
    
    /** * 页面载入完成时调用此函数，对地图进行初始化 * 1. 创建一个map * var map = new OpenLayers.Map('map',{}); * 2. 创建一个基础图层 * 3. 将基础图层加入到map中 * map.addLayer(basic_layer); * 4. 创建一个显示特征点的图层vectorLayer * 4. 创建需要的特征点 * 5. 将特征点加入到vectorLayer图层中 * 6. 设置地图显示的中心 * map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4); */
    function init() {
        // 新建一个map对象
        var map = new OpenLayers.Map('map',{});
        // 创建一个基础图层
        var basic_layer = new OpenLayers.Layer.WMS(
            'basic Layer',
            'http://vmap0.tiles.osgeo.org/wms/vmap0',
            {
                layers: 'basic'
            },
            {
                isBaseLayer: true
            }
        );
        // 将基础图层添加到map中
        map.addLayer(basic_layer);
    
        // 添加地图空间 Layer Switcher,图层选择器
        map.addControl(new OpenLayers.Control.LayerSwitcher({}));
    
        // 渲染器
        var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
        renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
    
        // 采用 ${} 来获取特征点 attribute 中的值
        var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
            styleMap: new OpenLayers.StyleMap({
               'default' : {
                   strokeColor : "#00FF00",
                   strokeOpacity : 1,
                   StrokeWidth : 3,
                   fillColor : "#FF5500",
                   fillOpacity : 0.5,
                   pointRadius : 6,
                   pointEvents : "visiblePainted",
                   label : "name: ${name}\n\nage: ${age}",
    
                   fontColor : "${favColor}",
                   fontSize : "12px",
                   fontSize : "12px",
                   fontFamily : "Courier New, monospace",
                   fontWeiht : "bold",
                   labelAlign : "${align}",
                   labelXOffset : "${xOffset}",
                   labelYOffset: "${yOffset}",
                   labelOutlineColor: "white",
                   labelOutlineWidth: 3
               } ,
            }),
            renderers : renderer
        });
    
        // 创建特征点
        var point = new OpenLayers.Geometry.Point(-111.04, 45.68); // 创建一个Point
        var pointFeature = new OpenLayers.Feature.Vector(point);
        pointFeature.attributes = {
            name : "toto",
            age : 20,
            favColor : 'red',
            align : "cm"
        };
    
        // 创建多边形特征点
        var pointList = [];
        // 随机生成多边形的点
        for(var p = 0; p < 9; p++) {
            var a = p * (2 * Math.PI) / 7;
            var r = Math.random(1) + 1;
            var newPoint = new OpenLayers.Geometry.Point(
                point.x + 5 + (r * Math.cos(a)),
                point.y + 5 + (r * Math.sin(a)));
            // 在这里将第0个点添加到List中是因为
            pointList.push(newPoint);
        }
        pointList.push(pointList[0]);
        // 使用LinearRing来生成闭环的多边形
        var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
        var polygonFeature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Polygon([linearRing]));
                polygonFeature.attributes = {
                    name: "dude",
                    age: 21,
                    favColor: 'purple',
                    align: 'lb'
                };
    
        // 线
        multiFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Collection([
                new OpenLayers.Geometry.LineString([
                    new OpenLayers.Geometry.Point(-105,40),
                    new OpenLayers.Geometry.Point(-95,45)
                ]),
                new OpenLayers.Geometry.Point(-105,40)
            ]), {
                name: "ball-and-chain",
                age: 30,
                favColor: 'black',
                align: 'rt'
            }
        );
    
        // 文本可移动
        var labelOffsetPonit = new OpenLayers.Geometry.Point(-101.04, 35.68);
        var labelOffsetFeature = new OpenLayers.Feature.Vector(labelOffsetPonit);
        labelOffsetFeature.attributes = {
            name: "offset",
            age: 22,
            favColor: 'blue',
            align: "cm",
            // 左右移动，- 为左
            xOffset: 50,
            // 上下移动，- 为下
            yOffset: -15
        }
    
        // 空的？？？
        var nullFeature = new OpenLayers.Feature.Vector(null);
        nullFeature.attributes = {
            name: "toto is some text about the world",
            age: 20,
            favColor: 'red',
            align: "cm"
        }
    
        // 添加图层vectorLayer到地图中
        map.addLayer(vectorLayer);
        // 在vectorLayer中添加特征点
        vectorLayer.drawFeature(multiFeature);
        vectorLayer.addFeatures([pointFeature,polygonFeature,labelOffsetFeature,nullFeature]);
        // 设置显示中心
        map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4);
        //map.zoomToMaxExtent();
    }

CSS代码：

bdoy { width: 100%; height: 100%; padding: 0; margin: 0; }
    
    #map { width: 900px; height: 600px; }

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

[SouthEast]: /images/20220609/a119d07d80df433c9b2fc3e031af92e9.png