OpenLayers使用弹出窗口 

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

 

posted @ 2019-07-12 13:54  DarJeely  阅读(1890)  评论(0)    收藏  举报