Add support of GetFeatureInfo request

[ghettovoice]

Add methods to send request GetFeatureInfo in WMS source

[JeremyGerard]

Hi,

Do you have erase this functionnality with the commit : 0b958e2 ?

[ghettovoice]

Hi,
I don't, just move it to wmsSource mixin.
Is it missing?

[JeremyGerard]

Oh yes you right !
Thanks

[JeremyGerard]

But i have an error...
error in ./node_modules/vuelayers/src/util/minilo.js

Module parse failed: Unexpected token (14:20)
You may need an appropriate loader to handle this file type.

I m beginner in vuejs. Do you know what's my issue ?

[ghettovoice]

Are you import components from vuelayers src folder?

[JeremyGerard]

i do that :

<script> import getFeatureInfoUrl from '../../node_modules/vuelayers/src/mixin/wms-source.js' export default {

[JeremyGerard]

and in my main.js :
import VueLayers from 'vuelayers'
Vue.use(VueLayers)

[ghettovoice]

You need only this

import VueLayers from 'vuelayers'
Vue.use(VueLayers)

Method getFeetureInfoUrl is part of vl-source-wms and vl-source-image-wms components.

Anyway if you want use mixins, or helpers from vuelayers, you should import them from vuelayers/lib/..... lib folder contains compiled source code

[ghettovoice]

In vuelayers v0.10.x under lib all components compiled for CommonJs environment. If you are using webpack so you can use ES modules import/export that under lib/_esm folder.

In the next v0.11 version commonjs support will be dropped, all compiled code will be under lib folder

[JeremyGerard]

Thanks for your support.
I have acces to this function by importing mixin from lib.
I think this is not working now because i don't have all params. I work on it

[JeremyGerard]

I think that because i have this error :
TypeError: _node_modules_vuelayers_lib_mixin_wms_source__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

[ghettovoice]

I wrote not quite well about src folder. You can use any module from here but cause there is a source code you should compile it yourself.

lib folder contains ready to use compiled modules.

[ghettovoice]

_node_modules_vuelayers_lib_mixin_wms_source__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

wms-source.js default export is a plain object.

import wmsSource from 'vuelayers/lib/mixin/wms-source'

wmsSource.methods.getFeatureInfoUrl 

[JeremyGerard]

Right.
with your method i have this :
Error: component has "$view" property

I must add resolution and projection

[ghettovoice]

Because wmsSource is an mixin, it should be used to build a vue component. This component inherits all methods from wmsSource. Mixin object isn't for direct usage.

What are you trying to make? Is it a custom wms source?

[JeremyGerard]

i have a map with wms data. I try to catch my wms source tile informations

[JeremyGerard]

Yes it is

[JeremyGerard]

thanks for your help.
I give you some news when i succes

[ghettovoice]

Are you render wms layers with vl-source-wns component? If so all you need is add ref attribute for each vl-source-wms tags, then use getFeatureInfoUrl method of the component instance.

<template>
  <vl-map @click="mapClicked">
    <vl-layer-tile>
      <vl-source-wms ref="mySource" ...></vl-source-wms>
    </vl-layer-tile>
  </vl-map>
</template>

<script>
export default { 
  ...
  methods: {
    mapClicked (evt) {
      console.log(this.$refs.mySource.getFeatureInfoUrl(evt.coordinate))
    },
  }
}
</script>

[ghettovoice]

I'm writting from phone, so sorry if there is some errors in example

[JeremyGerard]

My code :

<template>
  <div class="map">
    <div id="carte" class="carte">
      <vl-map id="MapF" :load-tiles-while-animating="true" :load-tiles-while-interacting="true" data-projection="EPSG:900913" class="carte" :controls="false" @click="mapClicked">
        <vl-view :zoom="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>

        <vl-layer-tile id="wms" :overlay="true" :opacity="0.8">
          <vl-source-wms ref="mySource" :url="urlwms" :layers="layerName" :style="styleName" :version="wmsVersion" v-on:click="MousePosition"></vl-source-wms>
        </vl-layer-tile>

      </vl-map>
  </div>
    <div class="info">{{PositionInfo}}</div></div>
</template>

[JeremyGerard]

Cannot read property 'mySource' of undefined

[JeremyGerard]

I have try : <vl-source-wms v-bind:ref="mySource"
but that s not better

[JeremyGerard]

I don't have acces to :
this.$source.getFeatureInfoUrl is not a function

[ghettovoice]

Show me <script> section please

[JeremyGerard]

<script>
  import wmsSource from 'vuelayers/lib/mixin/wms-source'
export default {
  name: 'Map',
  props: {
    msg: String
  },
  data () {
      return {
         ...
      }
  },
  methods: {
      mapClicked (evt) {
          console.log(this.$refs.mySource.getFeatureInfoUrl(evt.coordinate))
      },
  }
}
</script>

[ghettovoice]

Hmm. Very strange, this.$refs shouldn't be undefined, it's Vue feature. Probably some kind of syntax error or typo.

Currently I can't see where is the problem, I need to deploy test app with your code to reproduce it.

[JeremyGerard]

I will work on it too.
Thanks

[JeremyGerard]

The reference seems to work weel.
I made a test with the createSource () function. It s working but getFeatureInfoUrl is not in the class.
Thats why i think a can't call it

[JeremyGerard]

This error come from : wms-source.js
97:return this.$source.getFeatureInfoUrl(coordinate, resolution, projection, _extends({}, this.cleanExtParams, params));

[ghettovoice]

I found that there was a typo in the method name, it should be getGetFeaureInfoUrl. try to update vuelayers: npm install vuelayers@latest.
There is example https://jsfiddle.net/ghettovoice/m2x7dqv3/17/

[JeremyGerard]

Great !
I have an other issu :

tilegrid.js?97ab:383 Uncaught TypeError: Cannot read property '0' of undefined
    at _ol_tilegrid_TileGrid_.getTileCoordForCoordAndResolution (tilegrid.js?97ab:383)
    at _ol_source_TileWMS_.getGetFeatureInfoUrl (tilewms.js?bcb4:120)
    at VueComponent.getFeatureInfoUrl (wms-source.js?1c1c:94)
    at VueComponent.mapClicked (Map.vue?108f:44)
    at invoker (vue.runtime.esm.js?2b0e:2023)
    at HTMLDivElement.fn._withTask.fn._withTask (vue.runtime.esm.js?2b0e:1822)

[ghettovoice]

Show me mapClicked handler please

[JeremyGerard]

I fix it. I have a result :
`http://localhost:8080/geoserver/gwc/service/wms?SERVICE=WMS&VERSION=1.2.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=FranceCadastre%3Aparcelles&TILED=true&LAYERS=FranceCadastre%3Aparcelles&X=17&Y=144&WIDTH=256&HEIGHT=256&SRS=EPSG%3A3857&BBOX=-190786.82259979844%2C6119854.232624352%2C-185894.85278954715%2C6124746.202434603```

[JeremyGerard]

Some params are missing (like info_format)but i have my request !
You rock

[ghettovoice]

I fix it.

Nice!

Some params are missing

which params?

[JeremyGerard]

"info_format" for now the 4th params of getgetfeatureinfoUrl

[JeremyGerard]

I add it like that :
:ext-params="{ TILED: true, 'INFO_FORMAT': 'text/html'}"

It s perfect !

[ghettovoice]

You should provide it trough 4th method argument or with ext-params property

[JeremyGerard]

Thanks for your singleness