zoukankan      html  css  js  c++  java
  • OpenLayersVector图层上添加Feature

    调用Vector Layer的addFeatures方法可以在Vector Layer上添加新Feature

    1. 定义WKT Geometry

    var wkt  = "POLYGON((0 0,0 90,180 90,180 0,0 0))”;

    2. 创建Vector图层

    var vlayer = new OpenLayers.Layer.Vector("Vector Layer");
    map.addLayer(vlayer);

    3. 创建Geometry

    var wkt_c = new OpenLayers.Format.WKT();
    var geometry = wkt_c.read(wkt);

    4.将geometry添加到vlayer上

    vlayer.addFeatures(geometry);

    完整代码

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
     2 <HTML>
     3  <HEAD>
     4   <TITLE> OpenLayers : Add Feature </TITLE>
     5   <link rel="stylesheet" href="./OpenLayers-2.10/theme/default/style.css" type="text/css" />
     6   <link rel="stylesheet" href="./css/style.css" type="text/css" />
     7   <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script>
     8   <script  type="text/javascript">
     9     
    10     var wms_url = "http://192.168.111.156:8080/geoserver/wms?";
    11     var wms_version = "1.3.0";
    12 
    13     var vlayer = null;
    14 
    15     function init()
    16     {
    17         //创建map对象,
    18         map = new OpenLayers.Map("map");
    19         var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
    20                                              wms_url,
    21                                              {layers: 'country'},
    22                                              {singleTile: true});
    23 
    24         // 创建Vector图层
    25         vlayer = new OpenLayers.Layer.Vector("Vector Layer");
    26 
    27         // 添加图层
    28         map.addLayers([layer,vlayer]);
    29         map.addControl(new OpenLayers.Control.LayerSwitcher());
    30 
    31         map.zoomToMaxExtent();
    32     }
    33 
    34     function onAddFeatureClick()
    35     {
    36         // 获取输入WKT
    37         var geomt = document.getElementById("geomtext");
    38         var wkt = geomt.value;
    39 
    40         // 由WKT转换为geometry对象
    41         var wkt_parser = new OpenLayers.Format.WKT();
    42         var geometry = wkt_parser.read(wkt);
    43         // 将geometry添加到图层上
    44         vlayer.addFeatures(geometry);
    45     }
    46   </script>
    47 
    48  </HEAD>
    49 
    50  <BODY onload="init()">
    51   <div>
    52         <div><input type="button" value="addFeature(WKT)" onClick="onAddFeatureClick();"></div>
    53       <!--POINT(0 0)-->
    54       <!--LINESTRING((-180 -90,180 90))-->
    55       <!--POLYGON((0 0,0 90,180 90,180 0,0 0))-->
    56       <div><textarea type="text" id="geomtext" rows="5" cols="80">POLYGON((0 0,0 90,180 90,180 0,0 0))</textarea></div>
    57       <div id="map" class="smallmap"></div>
    58   </div>
    59  </BODY>
    60 </HTML>
  • 相关阅读:
    MySQL插入数据慢解决办法
    java的 System.currentTimeMillis() 与时区
    单元测试断言系统 类似于 生活中如何说话
    IDEA、Eclipse 默认常用快捷键对比总结,visual studio快捷键总结
    使用过的正则匹配的例子
    filters的this问题
    vuex的使用
    offset/scroll/clien系列知识点
    promise对象的理解
    语义化标签的理解
  • 原文地址:https://www.cnblogs.com/marsprj/p/2915905.html
Copyright © 2011-2022 走看看