javascript - Openlayers2 : I want to Draw a buffer on openlayer2 according to user input length-6ren

javascript - Openlayers2 : I want to Draw a buffer on openlayer2 according to user input length

转载作者：行者123 更新时间：2023-12-03 04:51:53

24

4

我想在openlayer2中绘制一个缓冲区。它可以是多边形或圆形的形式，如圆形所示。我检查了所有绘制功能的官方示例，但没有找到任何有用的 Material 。我附上了一个示例

<!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>Modify Feature</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="style1.css" type="text/css">
    <style type="text/css">
        #controls {
            width: 512px;
        }
        #controlToggle {
            padding-left: 1em;
        }
        #controlToggle li {
            list-style: none;
        }
    </style>
    <script src="OpenLayers.js"></script>
    <script type="text/javascript">
        var map, vectors, controls;
        function init(){
            map = new OpenLayers.Map('map');
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); 
            OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';

            // allow testing of specific renderers via "?renderer=Canvas", etc
          

            vectors = new OpenLayers.Layer.Vector("Vector Layer", {
               
            });

            map.addLayers([wms, vectors]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            
            if (console && console.log) {
                function report(event) {
                    console.log(event.type, event.feature ? event.feature.id : event.components);
                }
                vectors.events.on({
                    "beforefeaturemodified": report,
                    "featuremodified": report,
                    "afterfeaturemodified": report,
                    "vertexmodified": report,
                    "sketchmodified": report,
                    "sketchstarted": report,
                    "sketchcomplete": report
                });
            }
            controls = {
                
              
                
                regular: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.RegularPolygon,
                            {handlerOptions: {sides: 5}}),
                modify: new OpenLayers.Control.ModifyFeature(vectors)
            };
            
            for(var key in controls) {
                map.addControl(controls[key]);
            }
            
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
            document.getElementById('noneToggle').checked = true;
        }
        
        function update() {
            // reset modification mode
            controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
          
            var resize = document.getElementById("resize").checked;
            if(resize) {
                controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
                var keepAspectRatio = document.getElementById("keepAspectRatio").checked;
                if (keepAspectRatio) {
                    controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
                }
            }
         
            controls.modify.createVertices = document.getElementById("createVertices").checked;
      
          
        }

        function toggleControl(element) {
            for(key in controls) {
                var control = controls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">OpenLayers 2 Modify Feature Example</h1>
    <div id="tags">
        vertices, digitizing, draw, drawing
    </div>
    <div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div>
    <div id="map" class="smallmap"></div>
    <div id="controls">
        <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="regular" id="regularToggle" onclick="toggleControl(this);" />
                <label for="regularToggle">draw regular polygon</label>
                <label for="sides"> - sides</label>
                <input id="sides" type="text" size="2" maxlength="2"
                       name="sides" value="5" onchange="update()" />
                <ul>
                    

                </ul>
            </li>
            <li>
                <input type="radio" name="type" value="modify" id="modifyToggle"
                       onclick="toggleControl(this);" />
                <label for="modifyToggle">modify feature</label>
                <ul>
                   
                   
                    <li>
                        <input id="resize" type="checkbox"
                               name="resize" onchange="update()" />
                        <label for="resize">allow resizing</label>
                        (<input id="keepAspectRatio" type="checkbox"
                               name="keepAspectRatio" onchange="update()" checked="checked" />
                        <label for="keepAspectRatio">keep aspect ratio</label>)
                    </li>
                 
                </ul>
            </li>
        </ul>
    </div>
  </body>
</html>

最佳答案

如果你想围绕一个点创建一个圆，你可以使用openlayers内置函数

OpenLayers.Geometry.Polygon.createRegularPolygon = function(origin, radius, sides, rotation)

，传递用户指定的radio。

否则，如果您想缓冲任意多边形，您可以使用 JSTS 库提供的缓冲功能。

您可以在此处找到 openlayers 的示例 http://bjornharrtell.github.io/jsts/examples/buffer.html

关于javascript - Openlayers2 : I want to Draw a buffer on openlayer2 according to user input length，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42622091/

24

4

0

文章推荐： c# - sql 选择顶部 X 到 X+N

文章推荐： firebase - 从实时Firestore文档中获取数据

javascript - 将文本从一个 INPUT 拖动到另一个 INPUT，而不从源 INPUT 中删除文本
我有两个文本输入元素 A 和 B。我希望用户能够从 A 中选择部分或全部文本并拖动到 B，但文本不会从 A 中消失。假设“A”包含“quick brown fox”，用户突出显示“fox”一词并将
JavaScript 无法将 input.min、input.max、input.value 识别为整数
我正在一个网站上工作，如果在提交表单之前数字不在最小值和最大值之间，我希望数字输入能够自行更正。我的代码如下: HTML: JavaScript: function CorrectOverUnder
php - Laravel 4:Input::has() + Input::get() vs. ($var = Input::get()) != null
在检查输入值是否存在并将其分配给变量时，我看到了两种实现此目的的方法: if(Input::has('id')) { $id = Input::get('id'); // do som
input - <input type ="submit"/> 和 <input type ="text"/> 之间的盒模型不一致
我意识到有一个 border-box盒子模型，而有一个 content-box盒子模型。此行为存在于 IE8 和 FF 中。不幸的是，这使我无法将这种样式应用于大小均匀的输入: input, tex
html - 在 Polymer 中，为什么要使用 `<input is="iron-input">` instead of ` `？
在 Polymer 文档 ( https://elements.polymer-project.org/elements/iron-input ) 中，我发现: 而在另一个官方文档(https://
PHP : multiple inputs into other multiple inputs
我使用 jquery 添加/删除输入我使用append为日期/收入添加多个Tr 我还使用另一个附加来添加多个 td 以获取同一日期 Tr 中的收入我添加多个日期输入，并在此表中添加多个收入输入我
python input() 在调用 input() 之前采用旧的标准输入
Python3 的 input() 似乎在两次调用 input() 之间采用旧的 std 输入。有没有办法忽略旧输入，只接受新输入(在 input() 被调用之后)？ import time a =
jquery - :input and input in Jquery 之间的区别
在一些教程中，我看到了这些选择器: $(':input'); 或 $('input'); 注意“:”。有什么不同吗？最佳答案 $('input') = 仅包含元素名称，仅选择 HTML 元素。 $
javascript - $(input).blur() & $(input).focusout
我有下一个 html 表单: Nombre: El nombre es obligatorio. Solo se pe
javascript - 为什么 `@input` 装饰器优先于 `inputs:[]`
有两种方法可以在组件上定义输入: @Component({ inputs: ['displayEntriesCount'], ... }) export class MyTable i
input: dynamic input is missing dimensions in profile
input: dynamic input is missing dimensions in profile onnx2trt代码报错： import numpy as np import tensor
python - 如何在 "two-input input"中允许单个输入？
所以，我有允许两个输入的代码: a, b = input("Enter a command: ").split() if(a == 'hello'): print("Hi") elif(a =
python - 如何在 input() 进行时访问 input() 函数
我有一个与用户交流的程序。我正在使用 input() 从用户那里获取数据，但是，我想告诉用户，例如，如果用户输入脏话，我想打印 You are swearing!立即删除它! 而用户正在输入。如您
Java input = ""与 input = null 不同吗？
我在运行 J2ME 应用程序时遇到了一些严重的内存问题。所以我建立了另一个步骤来清除巨大的输入字符串并处理它的数据并清除它。但直到我设置 input = null 而不是 input = "" 才解
安卓模拟器 : both soft input and hard keyboard input
我想在我的 android 虚拟设备中同时启用软输入和硬键盘。我知道如何两者兼得，但不会两者。同时想要BOTH的原因: 软输入:预览当键盘缩小屏幕时布局如何调整大小硬键盘:显然是快速输入。提前致
javascript - addClass "input-invalid"to input 在我点击输入元素外部之前不会显示
我有一个邮政编码字段，在 keyup 上我执行了一个 ajax 调用。如果没有可用的邮政编码，那么我想添加类“input-invalid”。但问题是，在我单击输入字段的外部某处之前，红色边框验证不会
Angular4 @Input() 与 Component.inputs 数组
根据我的理解使用 @Input() name: string; 并在组件装饰器中使用输入数组，如下所示 @Component({ ... inputs:
typescript - 如何将语法 "inputs"属性更改为 "@Input"属性装饰器
我有一段代码是这样的 @Component({ selector: 'control-messages', inputs: ['controlName: control'],
input - Angular 2 : What are @input and @output properties
在@component中， @input 和@output 属性代表什么以及它们的用途是什么？什么是指令，为什么我们必须把指令放在下面的结构中？ directives:[CORE_DIRECTIVE
input - 避免SAS错误消息: "NOTE: Invalid argument to function INPUT"
有没有一种方法可以测试变量是否会使SAS中的INPUT转换过程失败？或者，是否可以避免生成的“NOTE:无效参数”消息？ data _null_; format test2 date9.; inp

首页

博学

6Ren·AI

商城

javascript - Openlayers2 : I want to Draw a buffer on openlayer2 according to user input length