wmts (custom projection)

by Vladimir Vershinin

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/style.css">
<script src="https://unpkg.com/[email protected]/dist/proj4-src.js"></script>
<div id="app">
  <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-geoloc>
      <template slot-scope="geoloc">
        <vl-feature v-if="geoloc.position" id="position-feature">
          <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
        </vl-feature>
      </template>
    </vl-geoloc>

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

CSS

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

proj4.defs('EPSG:4490','+proj=longlat +ellps=GRS80 +no_defs')
ol.proj.proj4.register(proj4)

let proj4490 = ol.proj.get('EPSG:4490')
proj4490.setExtent([8195340.91, 1885931.04, 15002527.77, 7087262.07])

new Vue({
	el: '#app',
  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',
        },
      ],
    }
  },
})