javascript – 如何使用Vuelayers与GeoServer服务的WMS切片层进行交互?

原创 287865  2019-06-05 17:58 

我正在开发一个使用

 

库的网络地图应用程序,这是 web map vue组件,具有openlayers的功能[ 123]。

我的模板中有以下代码:

:加载瓦片同时制作动画=“true”ref =“map”&lt;-&lt;vl-map @singleclick=&quot;hideoverlay&quot; @postcompose=&quot;onmappostcompose&quot;<br />:load-tiles-while-interacting =“true”data-projection =“epsg:4326”<br /> style =“height:900px”@ mounted =“onmapmounted”&gt ; <br /> .... <br /> <br /> &lt; component v-for =“图层中的图层”:ref =“layer.id”overlay <br />:is =“layer.cmp”<br />:key =“layer.id”v-bind =“layer” &gt; <br />&lt; component:is =“layer.source.cmp”v-if =“layer.visible”v-bind =“layer.source”&gt; <br />&lt; / component&gt; <br />&lt; ; / component&gt; <br /> .... <br />&lt; / vl-map&gt; <br /> <br />  - &gt; <br />

在数据对象中我有以下财产:

 &lt;-     layers: [<br /> {<br /> id:'sections',<br /> title: 'sections',<br /> cmp:'vl-layer-tile',<br /> visible:true,<br /> <br /> source:{<br /> cmp:'vl-source-wms',<br /> url :'http:// localhost:8080 / geoserver / sager / wms',<br /> layers:'sections',<br /> tiles:true,<br /> format:'image / png',<br /> servertype:' geoserver',<br />},<br />},<br /> .... <br /> ] <br />  - &gt; <br />

那么当我点击它时如何获得图层属性?知道

 没有
事件

最佳答案:


只需将点击处理程序放在顶级地图组件上,如下所示:

 ]

&lt; 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”&gt;&lt; / vl-map&gt; &lt;-<br />  - &gt; <br />
[123然后在click事件中使用

foreachlayeratpixel

函数,该函数对显示在该屏幕像素的每一层进行操作,并为您提供 ol.layer.layer 对象,您可以将其称为getproperties( ):

方法:{mapclick:function(evt){evt.map.foreachlayeratpixel(evt.pixel,function(layer){layer.getproperties()},function(layer){/ *过滤器层要获取* /}上的属性数据)}}

  - &gt; [ 123] &lt;-<br /> <br />由于种种原因,上述情况在这种情况下不起作用。使用更通用的函数,如

evt.map.getlayers()。item(0)orevt.map.getlayers.foreach(function(layer){layerprops = layer.getproperties() if(layerprops.id ===“你想要的那个”){//你必须在这里实现你自己的交叉逻辑//以查看点击点是否与图层相交。}})

  - > [ 123]  <-

本文地址:https://www.xileso.top/306.shtml
版权声明:本文为原创文章,版权归 287865 所有,欢迎分享本文,转载请保留出处!

发表评论


表情