Question

我需要构建一个简单的在线地图编辑器，并且打算使用传单（但最终可以使用openlayers）。如何在传单（在地图顶部）中绘制图形元素（节点和边）。具体来说，我可以绘制线串（边）和圆（节点），但是它们没有任何关联，也就是说，线串不是点的边缘，因为它们是两个不同的几何形状。因此，如何绘制图形元素，节点和边缘，以及与边缘和节点相关的位置。

示例：

在这里，圆应该代表一个节点，而折线是边。但是，这两个几何形状没有任何关联，也就是说，我无法将边缘与节点关联。我想知道的是如何在这样的马赫数上绘制图形，在其中我可以添加，检索，删除边缘和节点。

Answer 1

我不确定为什么您不想直接创建折线，但是您可以按以下方式实现您的请求：

    // the given points array
    let points = [
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ];

    // iterate through the points to dynamically create the elements
    for(let i = 0; i < points.length; i++)
    {
        // every point creates a circle (node)
        L.circle(points[i], {radius: 20}).addTo(mymap)

        // every pair of adjacent points creates an edge, 
        // other logic can be implemented
        if(i + 1 < points.length){
            L.polyline([points[i], points[i+1]]).addTo(mymap);
        }
    };

结果如下：

如果您仍然想要一条完整的折线，并且没有节点和边的分离，请像这样使用L.polyline：

    // create a polyline from an array of points
    let polyline = L.polyline(points).addTo(map);

您可以找到有关折线和圆documentation和here的不同选项的进一步阅读。

一种用于您所要求的图形格式的API，用于添加，检索和删除节点和边元素，如下所示：

    // points represented by circles

    function addNode(lat, lng){
        L.circle([lat, lng], {radius: 20}).addTo(mymap);
    }


    function deleteNode(node){
        node.remove();
    }


    function retrieveNode(node){
        let latlng = node.getLatLng();
        return [latlng.lat, latlng.lng];
    }


    // edges represented by polylines

    function addEdge(nodeA, nodeB){
        L.polyline([retrieveNode(nodeA), retrieveNode(nodeB)]).addTo(mymap);
    }

    function deleteEdge(edge){
        edge.remove();
    }

    function retrieveEdge(edge)
    {
        let line = edge.getLatLngs();
        return [[line[0].lat, line[0].lng], [line[1].lat, line[1].lng]];
    }

通过添加Graph类，您可以继续此方向，并进一步抽象化地图构建。

如何在传单中绘制图形元素（节点和边）？

1 个答案: