Как нарисовать строку строки в Openlayers6

#javascript #openlayers #openlayers-6

#javascript #openlayers #openlayers-6

Вопрос:

У меня есть карта, которая использует источник WMTS и использует EPSG: 25832 для проекции. Я не понимаю, почему мне так сложно добавить строку между 2 маркерами. Это должна быть строка с несколькими координатами, но я не могу найти никакой документации о том, как добавить строку. Я предполагаю, что это должен быть новый векторный слой с линейной строкой, которую я буду добавлять, но документация настолько сложна для понимания. Может кто-нибудь указать мне правильное направление?

Я смотрел на этот пример, но я не думаю, что очень ясно, что происходит. И я буду использовать данные, не позволяя пользователю рисовать линию.

 var map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            opacity: 0.7,
            source: new WMTS({
                crossOrigin: 'Anonymous',
                url: `https://kortforsyningen.kms.dk/topo_skaermkort_daempet?TICKET=${TOKEN}`,
                layer: 'dtk_skaermkort_daempet',
                matrixSet: 'View1',
                format: 'image/jpeg',
                tileGrid: tileGrid,
                style: 'default',
                size: SIZE
            })
        }),
        new VectorLayer({
            source: new VectorSource({
                features: [originMarker]
            }),
            style: new Style({
                image: new Icon({
                    anchor: [0.5, 1],
                    src: A_ICON,
                })
            })
        }),
        new VectorLayer({
            source: new VectorSource({
                features: [destinationMarker]
            }),
            style: new Style({
                image: new Icon({
                    anchor: [0.5, 1],
                    src: B_ICON,
                })
            })
        })
    ],
    view: new View({
        center: fromLonLat(centerPoint, 'EPSG:25832'),
        zoom: 3,
        resolutions: tileGrid.getResolutions(),
        projection: projection,
        extent: EXTENT
    })
});
  

Ответ №1:

Чтобы создать объект LineString, объединяющий два точечных объекта

 new Feature(new LineString([
  originMarker.getGeometry().getCoordinates(),
  destination.getGeometry().getCoordinates()
]))
  

затем добавьте его в новый слой или в существующий векторный источник.

Комментарии:

1. Это для строки только с 2 точками? Мне нужно добавить строку со многими координатами, может ли LineString справиться с этим?

2. Спасибо. Я считаю, что документация OpenLayers очень сложна для понимания. Из всех проектов, с которыми я работал, это, безусловно, самая крутая кривая обучения.