ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
680 stars 227 forks source link

WMS Defaults not set corectly #328

Closed itsgifnotjiff closed 4 years ago

itsgifnotjiff commented 4 years ago

I have made a CodePen which shows what i am trying to do but my Vuelayers code produces a squished down version of the correct data. I have played around with ratio and projection but although it seems like the trouble is there I can not fix it. My best guess is that there are some defaults I can not see or manipulate.

<template>
  <div>
    <v-container>
          <v-card>
            <vl-map 
              style="height: 650px"
              :load-tiles-while-animating="true" 
              :load-tiles-while-interacting="true"
              >

            <vl-view 
                :zoom="zoom" 
                :center="center" 
                />

            <vl-layer-tile>
                <vl-source-osm/>
            </vl-layer-tile>

            <vl-layer-image>
                <vl-source-image-wms
                    :url.sync='baseURL'
                    :layers.sync='layer'
                    :projection='projection'
                    :crossOrigin='crossOrigin'  
                    :ratio='ratio'
                    :serverType='serverType'
                    :attributions='customAttributions'
                >
                </vl-source-image-wms>
            </vl-layer-image>

            </vl-map>
    </v-container>
  </div>
</template>

<script>
    export default {
    data () {
      return { 
        baseURL: 'https://firms.modaps.eosdis.nasa.gov/wms/key/3331c6230df3210d4152370de06f29ab/?BBOX=-180,-90,180,90',
        layer: "fires_viirs_24",
        serverType: 'geoserver',
        crossOrigin: 'anonymous',
        ratio:1,
        params: {'LAYERS': 'fires_viirs_24','VERSION' : '1.0.0'},
        zoom: 2,
        opacity: 0.5,
        center: [-75,45],
        projection: "EPSG:4326",

      }
    }
  }
</script>
ghettovoice commented 4 years ago

Hello @itsgifnotjiff , vl-source-image-wms have separate property for WMS version. Take a look at the demo https://jsfiddle.net/ghettovoice/fgydw3bk/

itsgifnotjiff commented 4 years ago

This worked perfectly sir or madame. Was my fault really just syntactical? Also Vuelayers is awesome :+1: