<!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>