<!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_popups");
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:900913"
});
map.addLayer(pointLayer);
//创建一些随机的要素
var icons = [
"alligator.png",
"chicken-2.png",
"elephants.png",
"pets.png",
"snakes.png",
"wildlifecrossing.png",
"animal-shelter-export.png",
"cow-export.png",
"frog-2.png",
"pig.png",
"spider.png",
"zoo.png",
"ant-export.png",
"deer.png",
"lobster-export.png",
"rodent.png",
"tiger-2.png",
"bats.png",
"dolphins.png",
"monkey-export.png",
"seals.png",
"turtle-2.png",
"birds-2.png",
"duck-export.png",
"mosquito.png",
"shark-export.png",
"veterinary.png",
"butterfly-2.png",
"eggs.png",
"penguin-2.png",
"snail.png",
"whale-2.png"
];
// 创建一些随机的要素点
var pointFeatures = [];
for(var i=0; i< 150; i++) {
var icon = Math.floor(Math.random() * icons.length);
var px = Math.random() * 360 - 180;
var py = Math.random() * 170 - 85;
// Create a lonlat instance and transform it to the map projection.
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, null, {
pointRadius: 16,
fillOpacity: 0.7,
externalGraphic: 'http://localhost:8080/openlayers-cookbook/recipes/data/icons/'+icons[icon]
});
pointFeatures.push(pointFeature);
}
pointLayer.addFeatures(pointFeatures);
// 添加到触发矢量图层上的事件需要选择功能控制
var selectControl = new OpenLayers.Control.SelectFeature(pointLayer, {
hover: true,
onSelect: function(feature) {
var layer = feature.layer;
feature.style.fillOpacity = 1;
feature.style.pointRadius = 20;
layer.drawFeature(feature);
var content = "<div><strong>Feature:</strong> <br/>" + feature.id +
"<br/><br/><strong>Location:</strong> <br/>" + feature.geometry +"</div>";
var popup = new OpenLayers.Popup.FramedCloud(
feature.id+"_popup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(250, 100),
content,
null,
false,
null);
feature.popup = popup;
map.addPopup(popup);
},
onUnselect: function(feature) {
var layer = feature.layer;
feature.style.fillOpacity = 0.7;
feature.style.pointRadius = 16;
feature.renderIntent = null;
layer.drawFeature(feature);
map.removePopup(feature.popup);
}
});
map.addControl(selectControl);
selectControl.activate();
}
</script>
</head>
<body onload="init()">
<!-- 地图 DOM 元素 -->
<div id="ch3_popups" style="width: 100%; height: 100%;"></div>
</body>
</html>
