javascript - OpenLayers 3 - 几何集合为空-6ren

javascript - OpenLayers 3 - 几何集合为空

转载作者：行者123 更新时间：2023-11-30 21:09:59

25

4

我对使用 Ol_3 编写几何图形有疑问。

当我使用 ol.interaction.Draw 时，我注意到在编写功能时出现了一些奇怪的行为。使用提到的交互我想添加矢量(点、线串、多边形等)但是在第一次尝试(或单击)时我得到 GEOMETRYCOLLECTION EMPTY 但是当我第二次使用相同的命令时我得到想要的结果有人可以解释这种行为吗？如何避免这种行为？

是否有可能在第一次尝试/点击时获得几何图形？

下面的示例片段:

var vector = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 12,
                fill: new ol.style.Fill()
            })
        })
});

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vector
    ],
    target: 'map',
    view: new ol.View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});

map.on('pointermove', function(e) {
    if (e.dragging) return;
    var
        pixel = map.getEventPixel(e.originalEvent),
        hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

var button = $('#pan').button('toggle');
var interaction;
var features = undefined;;
$('div.btn-group button').on('click', function(event) {
    var id = event.target.id;
    var features;
    var selectedFeatures = undefined;
    button.button('toggle');
    button = $('#' + id).button('toggle');
    map.removeInteraction(interaction);

    switch (id) {
        case "select":
            document.getElementById("export").innerHTML="";
            interaction = new ol.interaction.Select();
            map.addInteraction(interaction);
            features = interaction.getFeatures();

            dragBoxInteraction = new ol.interaction.DragBox({
                condition: ol.events.condition.platformModifierKeyOnly,
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: [12, 25, 25, 4]
                    })
                })
            });
            dragBoxInteraction.on('boxend', function(event) {
                selectedFeatures = interaction.getFeatures();
                selectedFeatures.clear();
                var extent = dragBoxInteraction.getGeometry().getExtent();
                vector.getSource().forEachFeatureIntersectingExtent(extent, function(feature) {
                    selectedFeatures.push(feature);
                });
            });
            map.addInteraction(dragBoxInteraction);

            break;
        case "point":
            interaction = new ol.interaction.Draw({
                type: 'Point',
                source: vector.getSource()
            });
            vector.getSource().on('addfeature', function(e) {
                var source = e.target;
                var writer = new ol.format.WKT();

                if (vector.getSource().getState() === 'ready') {
                    //https://gis.stackexchange.com/questions/179907/openlayers-3-geojson-save-and-load
                    var wkt = writer.writeFeatures(vector.getSource().getFeatures());
                    document.getElementById("export").innerHTML = wkt;
                }
            });
            map.addInteraction(interaction);
            break;


        default:
            break;
    }
    var snap = new ol.interaction.Snap({
        source: vector.getSource()
    });
    map.addInteraction(snap);
});

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol.css" type="text/css">
</head>

<body>
    <div class="container">
        <div id="map" class="map"></div>
        <br>
 
            <pre>
            <div id="export"></div>
            </pre>
        <!-- <button type="button" class="btn btn-outline-danger" id="js-remove">Izbriši</button> -->
        <div class="btn-group btn-group-sm" id="bar" role="group" aria-label="Draw">
            <button id="pan" type="button" class="btn btn-primary">Pan</button>
            <button id="select" type="button" class="btn btn-default active">Select</button>
            <button id="point" value="pointless" type="button" class="btn btn-success">Point</button>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol.js" type="text/javascript"></script>
        <script src="script.js" type="text/javascript"></script>
        <!-- <script src="functions_draw.js" type="text/javascript"></script> -->
</body>

</html>

更新

我根据JGH 答案编辑了代码片段，希望对您有所帮助:)

最佳答案

drawend 事件在功能实际添加到其源之前被触发。它(不明显)记录在案 here , 在 finishDrawing() 定义下。

因此，为了让您的代码正常运行，您可以在层源而不是交互上监听事件。

尝试更换线路

interaction.on('drawend', function(e) {

通过

vector.getSource().on('addfeature', function(e){

关于javascript - OpenLayers 3 - 几何集合为空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46258252/

25

4

0

文章推荐： javascript - 刷新后使用 ng-click 在 html 中显示 session

文章推荐： c# - SQLServerCE 不能在 select 语句中使用 rtrim - SQLCEException

文章推荐： c# - WinForm ComboBox 在数据绑定(bind)后添加文本 "Select"

文章推荐： javascript - reactjs react 表不渲染表

mysql - WHERE(集合)IN(集合)
编辑:我似乎问错了这个问题。我正在尝试寻找一种方法来查询一个集合是否在另一个集合中可用。例如: SELECT * FROM something WHERE (1, 3) IN (1, 2, 3, 4
jquery - $.each([集合]) 与 $([集合]).each()
这两种方法似乎 produce the same results ，但我一直很难真正说服人们第二种方法有效，因为它显然并不为人所知。 // Create some data var foo = { '
kotlin - 为什么我们在Kotlin中仅使用[列表， map ，集合]集合？
我一直在学习Kotlin，并且遇到过Collections API。在Kotlin之前，我一直在学习Java，并且我知道Java中有很多不同类型的Collections API。例如，我们使用List
Java addAll(集合)与 new ArrayList(集合)
为什么我会得到不同的行为: Collection col2 = new ArrayList(col); 集合 col2 = new ArrayList(); col2.addAll(col) 我正在与
javascript: 集合[id][prop] = 集合[id][prop] || []//将空数组分配给对象时出现问题
所以我有一个代表专辑信息的 JSON 对象。给定“function updateRecords(id, prop, value)”我希望能够更新每个条目。正确的完成代码如下。我得到了指示，粗体部分，
java - 我需要哪种 Java 对象类型(集合/列表/集合/其他)？
我想存储一个对象集合，这些对象根据它们所代表的值进行键控。这些键可以重复。例如: [4] => Bob [5] => Mary [5] => Sue [9] => Steve [10] =>
collections - ArrayList(集合 c)VS HashSet(集合 c)
在检查 ArrayList API 时，我注意到一些看起来很奇怪的东西。确实，这里是 ArrayList 构造函数实现，其中 Collection 作为参数传递: public ArrayList(
collections - 如何在我的 YAML Swagger 定义中将属性类型定义为字符串列表(列表、集合、数组、集合)
我正在为 API 编写一个 swagger 定义文件。 API 是用于 GET 请求的 /path/to/my/api: get: summary: My Custom API d
java - 如何将 Scala 集合 Seq[(Int, Seq[String])] 转换为 Java 集合 List[(int, List[String])]？
我知道scala.collection包中有两个非常有用的对象，可以帮助我们实现这个目标: JavaConverters(如果我想明确说明并准确说明我要转换的内容) JavaConversions(如
Automapper 集合
我已经阅读了无数其他帖子，但似乎无法弄清楚发生了什么，所以是时候寻求帮助了。我正在尝试将包含集合的域实体映射到也包含集合的 dtos。这是一个原始示例； (我提前为代码墙道歉，我尽量保持简短):
Java:集合
我正在创建一个具有 ArrayList 的类，因此当我调用构造函数时，它会初始化该数组: public class ElementsList { private ArrayList list;
polymer this.$ 集合
我正在阅读事件指南和指南的开头，它说: You can also add an event listener to any element in the this.$ collection using
Python - 集合
我是 Python 新手，想知道如何使用键在字典中存储不同数据类型的列表例如 - {[Key1,int1,int1,String1] , [Key2,int2,int2,String2], [Key
C# 集合
int[] mylist = { 2, 4, 5 }; IEnumerable list1 = mylist; list1.ToList().Add(1); // why 1 does not get
Java 集合
我在 UI 表单中的每一行之后将以下内容添加到 HashMap 集合中声明 Map> map = new HashMap>(); List valSetOne = new ArrayList();
Java - 集合
我正在开发我的第一个 Java 项目，我有一个问题。问题应该很简单(虽然代码不是那么短，但没有理由被吓倒:))。我创建了一个基本的角色扮演游戏，并且有一个定义每个角色的抽象类“Character”。在
MongoDB 集合
我正在开发一款应用程序，可以为用户收集推文、Facebook 状态和 Facebook 照片。目前，用户确切地设定了他们希望这种收获发生的时间和时间，并且蜘蛛会在此期间拉取数据。 when 和 to
C# 集合？
有谁知道在 C# 中是否有与 Java 的 Set 集合等效的好方法？我知道您可以通过填充但忽略值来使用 Dictionary 或 HashTable 在某种程度上模仿集合，但这不是一种非常优雅的方式
oracle 集合
EXISTS 该函数返回集合中第一个元素的索引，如果集合为空，返回NULLNULLNULL Collecti
07、RDF 集合
RDF集合是通过属性 rdf:parseType="Collection" 来描述仅包含指定成员的组 rdf:parseType="Collection" 属

首页

博学

6Ren·AI

商城

javascript - OpenLayers 3 - 几何集合为空