OpenLayers 选中元素弹框

标签： openlayers 元素 | 发表时间：2014-05-25 23:26 | 作者：老糊涂
出处：http://www.iteye.com
写道
http://www.openlayers.org/dev/examples/select-feature-openpopup.html
 <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Open Popup on Layer.Vector</title> 
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        #controlToggle li {
            list-style: none;
        }
    </style>
    <script src="../OpenLayers.js"></script>
    <script type="text/javascript">
        var map, drawControls, selectControl, selectedFeature;
        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>",
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }    
        function init(){
            map = new OpenLayers.Map('map');
            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); 

            var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");

            map.addLayers([wmsLayer, polygonLayer]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            
            selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
            drawControls = {
                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
                            OpenLayers.Handler.Polygon),
                select: selectControl
            };
            
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }

            
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);

        }

        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Open Popup on Layer.Vector</h1> 
    <div id="tags">
        vector, feature, selecting, selection, popup
    </div>    
    <p id="shortdesc">
      Using a Control.SelectFeature, open a popup on click.
    </p>
    <div id="map" class="smallmap"></div>
    <ul id="controlToggle">
        <li>
            <input type="radio" name="type" value="none" id="noneToggle"
                   onclick="toggleControl(this);" checked="checked" />
            <label for="noneToggle">navigate</label>
        </li>
        <li>
            <input type="radio" name="type" value="polygon" id="polygonToggle"
                   onclick="toggleControl(this);" />
            <label for="polygonToggle">draw polygon</label>
        </li>
        <li>
            <input type="radio" name="type" value="select" id="selectToggle"
                   onclick="toggleControl(this);" />
            <label for="selectToggle">select polygon on click</label>
        </li>
    </ul>       
    <p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
       to do fun things -- like open a popup.
    </p>   
  </body>
</html>

 



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [openlayers 元素] 推荐：

OpenLayers 选中元素弹框

- - Web前端 - ITeye博客
已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

Openlayers中热力图的实现

- - CSDN博客推荐文章
本文讲述结合heatmap.js，在Openlayers中如何实现热力图. heatmap.js简介：. Heatmap 是用来呈现一定区域内的统计度量，最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示. Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页，帮助您研究和可视化用户的行为.

基于OpenLayers的地图封装Javascript类定义

- - CSDN博客推荐文章
基于OpenLayers的地图封装Javascript类定义. //web地图封装类 //MapCwgisClass类的定义 //vp:hsg,myk //create date:2013-07-26 //类 原型定义 var Person = function () {. } } //类 原型定义 var MapCwgisClass=function() {.

逃走的元素

- Zoe - 玩意儿
艺术家将寻常东东让它们部分元素像是往外逃走的样子，营造一种3D错觉感，很创意深刻，这里有他更多的作品，点此访问. 本文原始链接：http://www.cngadget.cn/tao-zou-de-yuan-su.html.

伪类元素之美

- Kings - 收集分享互联网资源!
通过使用:before和:after，你能创作出让人称奇的视觉效果. 对页面中的每个元素，你都有两个额外的可以控制的元素，本来这些是需要额外的元素来实现. 他们给设计带来了更多的趣味性的空间，而不是增加无语义的有负面影响的标签. 这里给大家整理了一堆让人称奇的东西. 因为你可以相对于他们的父元素绝对定位伪类元素，你可以把他们想象他们是每个元素的两个额外层.

jQuery操作HTML元素

- - CSDN博客推荐文章
JQuery 获取、设置input的值$("#txtID").val();. JQuery 获取、设置label的值$("#labelID").text(); $("#labelID").html(buildName); . 获取一组radio被选中项的值. 获取select被选中项的文本. select下拉框的第二个元素为当前选中值.

元素周期表再添“新丁”：超重元素114和116

- wu - cnBeta.COM
据美国《连线》杂志网站6月6日报道，元素周期表家族再添两名“新丁”：超重元素114和116，原子量分别为289和292. 它们现在是元素周期表中最重的元素，取代了以前的“霸主”――原子量为285的第112号元素“”和原子量为272的第111号元素“”.

元素周期表新增两种新元素

- Niclau - Solidot
元素周期表新增了两种新元素：超重元素114和116，原子量分别为289和292. 此前最重的元素是鎶（copernicium，原子序数112，原子量285)和錀（roentgenium，原子序数111，原子量272). 两种新元素都带放射性，会在不到一秒时间内衰减成更轻的原子，元素116会快速衰减为114，然后再转变为鎶.

html 关于块级元素和行内元素

- - CSDN博客推荐文章
内联元素(inline element). * acronym - 首字. * b - 粗体(不推荐). * code - 计算机代码(在引用源码的时候需要). * dfn - 定义字段. * font - 字体设定(不推荐). * input - 输入框. * kbd - 定义键盘文本. * label - 表格标签.

Script 元素的异步加载属性

- jungledrum - 岁月如歌
进入正题之前，先考大家一个问题：defer 属性现在有哪些浏览器支持. 除了 defer 属性，script 还新增了一个 async 属性，请看 MDC：. If the script cannot be executed asynchronously, or the browser doesn’t support this attribute, the script is executed synchronously (and loading the content blocks until the script finishes running).