<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用点要素作为标记</title>
<link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
<script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
var map = new OpenLayers.Map("ch3_feature_markers");
var layer = new OpenLayers.Layer.OSM("OpenStreetMap");
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
var pointLayer = new OpenLayers.Layer.Vector("Features", {
projection: "EPSG:933913"
});
map.addLayer(pointLayer);
// 新建一些随机的要素点
var pointFeatures = [];
for(var i=0; i< 150; i++) {
var px = Math.random() * 360 - 180;
var py = Math.random() * 170 - 85;
// 将经纬度坐标转换为地图工程.
var lonlat = new OpenLayers.LonLat(px, py);
lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
var pointFeature = new OpenLayers.Feature.Vector(pointGeometry);
pointFeatures.push(pointFeature);
}
// 将要素添加到图层中
pointLayer.addFeatures(pointFeatures);
// 当要素选中之后的事件控制
pointLayer.events.register("featureselected", null, function(event){
var layer = event.feature.layer;
event.feature.style = {
fillColor: '#ff9900',
fillOpacity: 0.7,
strokeColor: '#aaa',
pointRadius: 12
};
layer.drawFeature(event.feature);
});
// 当要素未选中之后的事件控制
pointLayer.events.register("featureunselected", null, function(event){
var layer = event.feature.layer;
event.feature.style = null;
event.feature.renderIntent = null;
layer.drawFeature(event.feature);
});
// 添加到触发矢量图层上的事件需要选择功能控制。
var selectControl = new OpenLayers.Control.SelectFeature(pointLayer);
map.addControl(selectControl);
selectControl.activate();
}
</script>
</head>
<body onload="init()">
<!-- 地图 DOM 元素 -->
<div id="ch3_feature_markers" style="width: 100%; height: 100%;"></div>
</body>
</html>