zoukankan      html  css  js  c++  java
  • 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_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=" 100%; height: 100%;"></div>
    </body>
    </html>
  • 相关阅读:
    [转]Spring.NET企业架构实践之 NHibernate + Spring.NET + WCF + Windows服务 + Silverlight 中小企业应用架构完整Demo
    [转]用EA 建模设计Blog全过程
    下载页面
    Expression Studio 4 ultimate x86 下载含序列号
    ACS.NET缓存技术
    Case
    再谈C#中的委托,匿名方法和Lambda表达式
    代理服务器的设置
    软件架构师之职责范围和高级软件工程师的职责范围
    WPF博客
  • 原文地址:https://www.cnblogs.com/Jeely/p/11175651.html
Copyright © 2011-2022 走看看