Vuelayers 投影问题（OpenLayers 中不存在）答案

【问题标题】：Vuelayers projection problem (inexistant in OpenLayers)Vuelayers 投影问题（OpenLayers 中不存在）
【发布时间】：2020-06-29 16:59:34
【问题描述】：

我制作了一个CodePen，它显示了我正在尝试做的事情，但我的 Vuelayers 代码会生成正确数据的压缩版本。我玩过比率和投影，但虽然看起来麻烦在那里，但我无法解决它。我的最佳猜测是有些默认值我看不到或无法操作。

 <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>

【问题讨论】：

标签： vue.js vuejs2 vue-component openlayers vuelayers

【解决方案1】：

我遗漏了几个字段，这是工作示例。

<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: [ ... ]

【讨论】：