以编程方式将顶点添加到Leaflet折线

时间:2018-04-24 12:12:37

标签: javascript leaflet

我使用Leaflet和Leaflet PM及其折线工具创建折线。单击并向地图添加新点时,一切正常。然后我将这些数据用于存储在其他地方并用它做一些其他的东西。事情是。

我将有一个功能,可以按下' e'钥匙和' d'使用DOM Eventlisteners向地图添加点的关键。这是因为我需要改变楼层高度。如果我在与之前添加的点相同的位置使用鼠标,则会关闭折线。它也很棒。我在地图上使用鼠标悬停,存储lat long,然后在keydown上我使用我的workingLayer来添加laLng(latlng)。它挽救了纬度和经度,它划出了界限。但是,当我点击时,没有添加任何顶点。我需要顶点添加函数才能将我的其他元数据添加到它。我以后也会使用这些顶点进行自定义。

我一整天都花在这上面,现在我真的需要一些帮助,无法找到任何相关信息。

我也尝试过直接在图层上添加一个标记但是没有用。

总而言之。当我点击制作折线时,一切正常。但是以编程方式调用layer.addLatLng(latlng);不会添加顶点。只有latlng和它在哪里,如图所示。因此pm:从不调用vertexadded。

我错过了什么?

我的代码中的一个例子:

lmap.on('pm:drawstart', function(e){
    //Layer is now the workingLayer
    let layer = e.workingLayer;

    //Will hold coordinates from map
    let pointFromMouse;
    lmap.addEventListener('mousemove', function(e){
        //Assigning current position lat/long 
        pointFromMouse = e.latlng;
    })

    document.addEventListener('keydown', function(e){
        if(e.keyCode == '69'){
            //When pressing 'e', adds it to the polyline
            layer.addLatLng(pointFromMouse);
            //I also tried setLatLngs(); and redraw(); no sucess
        }
    })


    layer.on('pm:vertexadded', function(e){
        //Here I'm calling some other stuff. I stuff another array along
        //with other meta-data, other than lat/long.
    })   
})

图片1:我点击时的样子(一切正常,添加了顶点)。

Image2 :按键添加点时的外观。没有添加顶点,因此pm:从不调用vertexadded。

How it looks when I'm clicking(Everything works fine, vertexes are added)

How it looks when I'm adding a point pressing the key. No vertextes are added, Therefore pm:vertexadded is never called.

0 个答案:

没有答案