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
