OpenLayers使用点要素作为标记

最新推荐文章于 2024-02-19 16:38:54 发布

weixin_30401605

最新推荐文章于 2024-02-19 16:38:54 发布

阅读量361

点赞数

原文链接：http://www.cnblogs.com/Jeely/p/11175651.html

版权

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