OpenLayers2---Features

来源：互联网发布：阿里云服务器做网站编辑：程序博客网时间：2024/05/17 19:59

有时我们需要在地图上标注一些特征点，在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;}

结果：
结果展示图片

阅读全文

0 0