Proj4 example

by Vladimir Vershinin

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/proj4-src.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">
<div id="app">
  <div class="text-white" style="padding: 20px">
    Zoom: {{ zoom }}<br>
    Center: {{ center }}<br>
    My geolocation: {{ geolocPosition }}
  </div>
  <vl-map ref="map">
    <vl-view :zoom.sync="zoom" :center.sync="center"></vl-view>
    
    <vl-geoloc @update:position="geolocPosition = $event">
      <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>
      <vl-source-osm></vl-source-osm>
    </vl-layer-tile>
      
   <vl-layer-image id="static">
      <vl-source-image-static
                              :url="imageUrl"
                              :extent="imageExtent"
                              :projection="imageProj">
      </vl-source-image-static>
    </vl-layer-image>
    
  </vl-map>  
</div>

CSS

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

JavaScript

proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
          '+x_0=400000 +y_0=-100000 +ellps=airy ' +
          '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
          '+units=m +no_defs');
ol.proj.proj4.register(proj4)

console.log(ol.proj.get('EPSG:27700'))

new Vue({
	el: '#app',
  data () {
  	return {
    	zoom: 3,
      center: [1506726.701557393, 6330208.934465159],
      imageProj: 'EPSG:27700',
      imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' +
                     'British_National_Grid.svg/2000px-British_National_Grid.svg.png',
      imageExtent: [0, 0, 700000, 1300000],
      geolocPosition: [],
    }
  },
})