OpenLayers2—Features


有时我们需要在地图上标注一些特征点,在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>
    <!---导入CSS文件 -->
    <link rel="stylesheet" href="vector_features_with_text.css">
</head>
<body onload="init()">
<div id="map"></div>
<!-- 引入OpenLayers库-->
<script type="text/javascript" src="../../Common/OpenLayers/OpenLayers.js"></script>
<!-- 引入自定义的JS-->
<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;
}

结果:

转载自:https://blog.csdn.net/qq_26710805/article/details/77714187

You may also like...

退出移动版