Get weird result by using WMTS with EPSG:4326

[Octavio000416]

1. Thanks a lot for the brilliant work you've done.

2. I am using a WMTS with EPSG:4326 coordinate system and the map seems to be compressed to latittude [0,90] only. data-projection of vl-map is already set to "EPSG:4326". A point with the coordinate [112,23] would be near [112,74]. 3.I tested inside https://vuelayers.github.io/#/quickstart?id=global-data-projection editable example using the code below. Maybe wrong I am somewhere? Help needed.

   
   <template>
   <div>
   <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
            data-projection="EPSG:4326" style="height: 400px">
     <vl-view :zoom.sync="zoom" :center.sync="center"></vl-view>
   
     <vl-layer-tile v-for="layer in baseLayers" :key="layer.name" :id="layer.name">
       <component :is="'vl-source-' + layer.name" v-bind="layer"></component>
     </vl-layer-tile>
   </vl-map>
   <div style="padding: 20px">
     Zoom: {{ zoom }}<br>
     Center: {{ center }}<br>
   </div>
   </div>
   </template>

[ghettovoice]

Hi @Octavio000416, from GetCapabilities response (http://t7.tianditu.gov.cn/vec_c/wmts?tk=4a0d6ba77737f5e85f4403bfa4123687&Service=WMTS&Request=GetCapabilities&Version=1.0.0) I can see that tile matrix set is defined with custom EPSG:4490 projection. To use custom projection you should register it parameters before using, for this you can use proj4 lib.

Try this sample, it should work for you

<template>
  <div>
    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
             data-projection="EPSG:4326" style="height: 400px">
      <vl-view :zoom.sync="zoom" :center.sync="center"></vl-view>

      <vl-layer-tile v-for="layer in baseLayers" :key="layer.name" :id="layer.name">
        <component :is="'vl-source-' + layer.name" v-bind="layer"></component>
      </vl-layer-tile>
    </vl-map>
    <div style="padding: 20px">
      Zoom: {{ zoom }}<br>
      Center: {{ center }}<br>
    </div>
  </div>
</template>

<script>
  import { get as getProjection } from 'ol/proj'
  import { register } from 'ol/proj/proj4'
  import proj4 from 'proj4'
  // add projection params taken from https://epsg.io/4490
  proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs')
  register(proj4)

  let proj4490 = getProjection('EPSG:4490')
  proj4490.setExtent([8195340.91, 1885931.04, 15002527.77, 7087262.07])
 // now openlayers knows how reproject coordinates to/from EPSG:4490

  export default {
    data () {
      return { 
        center: [112.85,23.29],
        zoom: 2,
        baseLayers: [
          {
            name: 'wmts',
            title: 'vec',
            url: 'http://t7.tianditu.gov.cn/vec_c/wmts?tk=4a0d6ba77737f5e85f4403bfa4123687',
            layerName: 'vec',
            matrixSet: 'c',
            styleName: 'default',
            format: 'tiles',
            projection: 'EPSG:4490',
          },
        ],
      }
    },
  }
</script>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.