Как нарисовать элементы графа (узлы и ребра) в листовке? - PullRequest
Новая
       24

Как нарисовать элементы графа (узлы и ребра) в листовке?

0 голосов
/ 07 октября 2018

Мне нужно создать простой онлайн-редактор карт, и я собираюсь использовать листовку (но в конечном итоге могу использовать openlayers).Как нарисовать элементы графа (узлы и ребра) в листовке (поверх карты).В частности, я могу нарисовать линейные линии (ребра) и окружности (узлы), но они никак не связаны, то есть линейные линии не являются краем точки, поскольку они представляют собой две разные геометрии.Следовательно, как я могу нарисовать элементы графа, узлы и ребра, где ребра и узлы связаны.

Пример:

Здесь кружки должны представлять узел, а полилинии - это ребра.Однако эти две геометрии никак не связаны, то есть я не могу связать ребра с узлами.Я хочу знать, как нарисовать график поверх такого механизма, где я могу добавлять, извлекать, удалять ребра и узлы.

enter image description here

1 Ответ

0 голосов
/ 20 октября 2018

Я не уверен, почему вы не хотите напрямую создавать ломаную линию, но вы можете реализовать свой запрос следующим образом: 

    // 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);
        }
    };

Полученный результат выглядит так:

image

Если вам по-прежнему нужна целая ломаная линия, без разделения узлов и ребер, используйте L.polyline, например, так: 

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

Вы можете найти дополнительные сведения о различных параметрахполилиний и окружностей здесь и здесь .

Возможный 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, вы можете продолжить это направление и дополнительно абстрагировать здание своей карты.

...