vue.jsvuejs2vue-componentopenlayersvuelayers

Vuelayers projection problem (inexistant in OpenLayers)


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/X/?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>

Solution

  • I was missing a couple of fields here is the working example.

    <vl-map 
       style="height: 650px"
       :load-tiles-while-animating="true" 
       :load-tiles-while-interacting="true"
       >
    
          <vl-view 
             :zoom.sync="zoom" 
             :center.sync="center" 
             />
                
    
          <vl-layer-tile>
             <vl-source-osm/>
          </vl-layer-tile>
    
                  
          <vl-layer-image>
             <vl-source-image-wms
                 :url.sync='baseURL'
                 :layers.sync='layer'
                 :version.sync='version'
                 :projection='projection'
                 :cross-origin='crossOrigin'  
                 :ratio='ratio'
                 :server-type='serverType'
                 :attributions='customAttributions'
                 />
          </vl-layer-image>    
      </vl-map>
    
    baseURL: 'https://firms.modaps.eosdis.nasa.gov/wms/key/X/?BBOX=-180,-90,180,90',
    layer: "fires_viirs_24",
    serverType: 'geoserver',
    version: '1.0.0',
    crossOrigin: 'anonymous',
    ratio: 1,
    zoom: 4,
    center: [-10683725, 4240631],
    projection: "EPSG:4326",
    customAttributions: '<a href="https://firms.modaps.eosdis.nasa.gov/web-services/">NASA\'s WMS hotspots service</a>',
    layerNames: [ ... ]