[英]How do I interact with WMS tile layer served by GeoServer using Vuelayers?
I'm developing a web mapping application using the Vuelayers
library which is Web map Vue components with the power of OpenLayers . 我正在使用Vuelayers
库开发一个Web制图应用程序,这是一个具有OpenLayers功能的Web地图Vue组件 。
I have the following code in my template: 我的模板中有以下代码:
<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>
And in the data object I have the following property: 在数据对象中,我有以下属性:
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',
},
},
....
]
So how do I get the layer properties when I click on it? 那么当我点击它时如何获得图层属性? Knowing that vl-tile-layer
doesn't have the @click
event as mentioned here . 知道vl-tile-layer
没有这里提到的@click
事件。
Just put the click handler on the top level map component like so: 只需将点击处理程序放在顶级地图组件上,如下所示:
<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>
Then in the click event use the forEachLayerAtPixel function which operates on each layer that is displaying at that screen pixel and gives you the ol.Layer.Layer object which you can call getProperties() on: 然后在click事件中使用forEachLayerAtPixel函数,该函数对显示在该屏幕像素的每个图层进行操作,并为您提供ol.Layer.Layer对象,您可以在其上调用getProperties():
methods: {
mapClick: function(evt){
evt.map.forEachLayerAtPixel(
evt.pixel,
function(layer){ layer.getProperties()},
function(layer){/*filter layers you want to get property data on*/})
}
}
The above will only work if CORS is setup on the server and if you can set the crossOrigin setting on the OpenLayers layer that vue-layers is using behind the scenes. 如果在服务器上设置了CORS,并且您可以在OpenLayers层上设置vue-layers在幕后使用的crossOrigin设置,则上述操作仅适用。 the above method is better but if you get an error stating 上面的方法更好但是如果你收到错误说明
"SecurityError: Failed to execute 'getImageData' on
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data
Then you can use a more general function like 然后你可以使用更通用的功能
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.
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.