`

OpenLayers.Layer.Vector及OpenLayers.Feature.Vector

FeatureVectorPopup 
阅读更多
<div class="iteye-blog-content-contain" style="font-size: 14px">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OpenLayer : Feature Select</title>
<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/Style/style.css" type="text/css">
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script  type="text/javascript">
     var map = null;
     var wms_url = "http://wms.jpl.nasa.gov/wms.cg";//http://wms.jpl.nasa.gov/wms.cg
     var wms_version = "1.3.0";
     var layer_name = 'country';

     var wms_layer = null;
     var vector_layer = null;
     var select_control = null;    // SelectFeature Control

     var wkt_reader = null;
     var point   = "POINT(-10 -10)";
     var line    = "LINESTRING(-180 90, 0 0)";
     var polygon = "POLYGON(0 0,0 90,180 90,180 0,0 0)";

     function init()
     {
         //创建map对象，
         map = new OpenLayers.Map("map");
         wms_layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
                             wms_url,
                             {layers: layer_name, version: wms_version},
                             {singleTile: true});
         vector_layer = new OpenLayers.Layer.Vector("Vector");

         // 添加图层
         map.addLayers([wms_layer, vector_layer]);       
         map.addControl( new OpenLayers.Control.LayerSwitcher() );

         // 在Vector图层上添加图元element
         addFeature(point  , vector_layer);
         addFeature(line   , vector_layer);
         addFeature(polygon, vector_layer);
        
         vector_layer.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(20,20)));

         addSelectControl(map, vector_layer);

         // 放大到全屏
         map.zoomToMaxExtent();
     }

     function addSelectControl(map, vector_layer)
     {
         if(select_control!=null)
         {
             return ;
         }
         select_control =  new OpenLayers.Control.SelectFeature(vector_layer,
                     {
                        hover: false,
                        onSelect: onFeatureSelect,
                        onUnselect: onFeatureUnselect
                      });
         map.addControl(select_control);
         select_control.activate();
     }

     function addFeature(wkt, layer)
     {
         var geometry = toGeometryFromWkt(wkt);
         if(wkt!=null)
         {
             layer.addFeatures(geometry);//geometry:OpenLayers.Feature.Vector类型
         }
     }
    
     function toGeometryFromWkt(wkt)
     {
         var geometry = null;
         if(wkt_reader==null)
         {
             wkt_reader = new OpenLayers.Format.WKT();
         }
         geometry = wkt_reader.read(wkt);//read方法返回OpenLayers.Feature.Vector类型
         return geometry;
     }

     // Feature 选中事件响应
     function onFeatureSelect(feature)
     {
         selectedFeature = feature;
        
         //feature代表Openlayers.Layer.Vector类型的对象，可以理解为一张画布
         //feature.geometry可以是：Point,line,polygon等几何图形的父类
         popup = new OpenLayers.Popup.FramedCloud("chicken",
                         feature.geometry.getBounds().getCenterLonLat(),
                         null,
                         "<div style='font-size:.8em'>Feature: " + feature.id+"<br/>点的lon: "
                         + feature.geometry.x+",点的lat: "+feature.geometry.y+"<br/>"+"<br />Area: "
                         + feature.geometry.getArea()+"<br>lat: "+feature.geometry.bounds.centerLonLat.lat+",lon: "
                         + feature.geometry.bounds.centerLonLat.lon+"</div>",
                         null, true, onPopupClose);
         feature.popup = popup;
         map.addPopup(popup);
        
     }

     // Feature取消选中事件响应
     function onFeatureUnselect(feature)
     {
         map.removePopup(feature.popup);
         feature.popup.destroy();
         feature.popup = null;
     }   

     function onPopupClose(evt) {
         select_control.unselect(selectedFeature);
     }


   </script>

  </HEAD>
  <BODY onload="init()">
     <div>
       <div id="map" class="smallmap"></div>
     </div>
  </BODY>
</HTML>
</div>
分享到：
| js获取服务端IP及端口及协议
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    openLayers_geoserver常见问题.

    OpenLayers 提供了多种方式来解决 Maker 一多，客户端就死掉问题，例如使用 `OpenLayers.Layer.Vector` 或 `OpenLayers.Layer.Markers`。以下代码示例使用 `OpenLayers.Layer.Markers` 解决问题： ```javascript var...

    最全最新的中文openLayers_api

    - WFS服务：用于获取矢量数据，通过`OpenLayers.Layer.Vector.WFS`类创建。 - GeoJSON数据：使用`OpenLayers.Format.GeoJSON`解析并加载到`OpenLayers.Layer.Vector`层。 4. **图层操作** - 添加图层：`map.add...

    OpenLayers动画效果显示路线

    var marker = new OpenLayers.Feature.Vector(points[index]); vectorLayer.addFeatures([marker]); if (index &gt; 0) { vectorLayer.removeFeatures([lastMarker]); } lastMarker = marker; index++; } else ...

    openLayers geoserver常见问题

    在OpenLayers中，删除Layer中的marker可以通过以下步骤实现：首先，获取到你想要删除的marker对象，这通常基于用户交互事件（如点击）来完成。然后，调用Layer的removeFeatures方法，传入marker对象即可将其从地图上...

    Openlayer 简单实例11

    ### Openlayer 简单实例11：添加Vector图层及测量功能 #### 一、OpenLayers简介 OpenLayers是一款开源的JavaScript库，用于显示基于矢量数据的地图和其他类型的地理信息。它支持多种数据源，如WMS（Web Map ...

    Openlayers经典例子.doc

    var vectorLayer = new OpenLayers.Layer.Vector("Editable Layer"); var modifyControl = new OpenLayers.Control.ModifyFeature(vectorLayer); map.addLayers([vectorLayer]); map.addControl(modifyControl);...

    OpenLayers中文API

    `OpenLayers.Layer.Vector`用于展示这些矢量特征，支持动态绘制、编辑和查询。 7. **事件处理（Events）** - OpenLayers 提供了丰富的事件处理机制，如mapMove、featureSelect等，允许开发者响应用户的交互行为。 ...

    用Openlayers实现实时定位

    var locationLayer = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ image: new ol.style.Circle({ fill: new ol.style.Fill({ color: '#ffcc33' }), stroke: new ol....

    OpenLayers地图重点属性摘录

    var vector = new OpenLayers.Layer.Vector("EditableVectors"); map.addLayers([vector]); map.addControl(new OpenLayers.Control.EditingToolbar(vector)); ``` - **Geolocate（地理定位）**：将W3C地理位置...

    OpenLayers_2.10_Beginners_Guide_Code

    `OpenLayers.Layer.Vector`类用于创建矢量图层，`OpenLayers.Geometry`类则提供了几何对象的构建。 7. WFS服务：OpenLayers可以与Web Feature Service (WFS)交互，用于读取和编辑地理空间数据。`OpenLayers....

    openlayers实现本地图片作为背景，添加marker标记

    为了将这个功能集成到你的应用中，你需要一个矢量图层（`ol.layer.Vector`）和一个矢量源（`ol.source.Vector`），并将`addMarker`函数调用多次以添加多个标记： ```javascript var vectorSource = new ol.source....

    openlayers3 热力图

    在OpenLayers 3中，热力图通常使用`ol.source.Heatmap`源和`ol.layer.Heatmap`层来实现。下面我们将深入探讨如何使用OpenLayers 3创建热力图以及涉及的相关知识点。 首先，你需要准备包含地理位置信息的数据，这...

    Openlayers测距测面积

    vlayer = new OpenLayers.Layer.Vector("控件层"); map.addLayer(vlayer); ``` 接着，我们创建一个Control.Panel，用于添加测距和测面积的控件。这两个控件分别基于OpenLayers.Handler.Path和OpenLayers.Handler....

    OpenLayers api

    例如，使用`OpenLayers.Geometry.Point()`创建一个点对象，然后通过`OpenLayers.Feature.Vector()`将其封装为特征，最后加入到图层中。 6. **事件处理**： 开发者可以监听地图上的各种事件，如点击、移动、缩放等...

    基于openLayers2所写的热力图

    var feature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(dataPoints[i].lon, dataPoints[i].lat), {weight: dataPoints[i].weight} ); vectorLayer.addFeatures([feature]); } // 定义...

    openlayers 态势箭头、进击箭头等

    首先，我们需要理解OpenLayers中的矢量图层（Vector Layer）和几何对象（Geometry）。矢量图层用于显示由点、线、面等几何对象组成的地理数据。在态势箭头或进击箭头的场景中，我们可以使用LineString几何对象来表示...

    openLayers-API中文

    5. **标记(Feature和Vector Layer)**：`OpenLayers.Feature`和`OpenLayers.Vector`用于在地图上添加点、线、面等矢量数据。这些标记可以具有样式、属性，并可以通过图层进行操作。 6. **事件(Event)**：OpenLayers...

    openlayers初学者指导

    var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer"); map.addLayer(vectorLayer); ``` 3. **设置中心点和缩放级别**： ```javascript map.setCenter(new OpenLayers.LonLat(-122.45, 37.75), 13);...

    OpenLayers 画点、线、及删除点、线 封装的js工具类

    1. **绘制点**：OpenLayers 提供了 `ol.source.Vector` 和 `ol.layer.Vector` 类来处理矢量数据。开发者可以创建一个新的 `ol.geom.Point` 对象，然后将其添加到矢量源，最后将矢量源添加到矢量图层。点的坐标通常以...

Magicbox
Global site tag (gtag.js) - Google Analytics