Как мне взаимодействовать со слоем листов WMS, обслуживаемым GeoServer, с помощью Vuelayers? - PullRequest
Новая
       16

Как мне взаимодействовать со слоем листов WMS, обслуживаемым GeoServer, с помощью Vuelayers?

7 голосов
/ 27 мая 2019

Я занимаюсь разработкой веб-картографического приложения с использованием библиотеки Vuelayers, которая является Компонентами веб-карты Vue с мощью OpenLayers .

У меня естьследующий код в моем шаблоне: 

<vl-map @singleclick="hideOverlay" @postcompose="onMapPostCompose"
 :load-tiles-while-animating="true" ref="map"
:load-tiles-while-interacting="true" data-projection="EPSG:4326"
style="height: 900px" @mounted="onMapMounted">
 ....

  <component v-for="layer in layers" :ref="layer.id" overlay
    :is="layer.cmp"
    :key="layer.id" v-bind="layer">
        <component :is="layer.source.cmp" v-if="layer.visible" v-bind="layer.source">
        </component>
    </component>
     ....
</vl-map>

А в объекте данных у меня есть следующее свойство: 

     layers: [

            {
                id: 'sections',
                title: 'Sections',
                cmp: 'vl-layer-tile',
                visible: true,

                source: {
                    cmp: 'vl-source-wms',
                    url: 'http://localhost:8080/geoserver/sager/wms',
                    layers: 'sections',
                    tiled: true,
                    format: 'image/png',
                    serverType: 'geoserver',
                },
            },
     ....
    ]

Итак, как мне получить свойства слоя, когда я нажимаю на него?Зная, что vl-tile-layer не имеет события @click, как упомянуто здесь .

1 Ответ

3 голосов
/ 03 июня 2019

Просто поместите обработчик кликов на компонент карты верхнего уровня, например: 

<vl-map @click="mapClick" @singleclick="hideOverlay" @postcompose="onMapPostCompose"
 :load-tiles-while-animating="true" ref="map"
:load-tiles-while-interacting="true" data-projection="EPSG:4326"
style="height: 900px" @mounted="onMapMounted">

</vl-map>

Затем в событии click используйте функцию forEachLayerAtPixel , которая работает на каждом слое, отображаемом в этом пикселе экрана, и предоставляет вам объект ol.Layer.Layer , который вы можете вызвать getProperties () on: 

 methods: {
  mapClick: function(evt){
    evt.map.forEachLayerAtPixel(
        evt.pixel,
        function(layer){ layer.getProperties()},
        function(layer){/*filter layers you want to get property data on*/})
  }
}

Вышеуказанное будет работать только в том случае, если CORS настроен на сервере и если вы можете установить параметр crossOrigin на слое OpenLayers, который vue-layer использует за кулисами. вышеупомянутый метод лучше, но если вы получаете сообщение об ошибке 

"SecurityError: Failed to execute 'getImageData' on 
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data

Тогда вы можете использовать более общую функцию, такую ​​как 

evt.map.getLayers().item(0)

or

evt.map.getLayers.forEach(
    function(layer){
        layerProps = layer.getProperties()
        if(layerProps.id === "the one you want")
        {
            // You will have to implement your own intersection logic here
            // to see if the click point intersected with the layer.
        }
})
...