Static image

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://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.3/proj4.js"></script>
<div id="app">
  Center: {{center}}
  Img extnet: {{ imgExtent }}
  <vl-map ref="map" @mounted="onMapMounted">
    <vl-view :projection="viewProj" :zoom.sync="zoom" :center.sync="center" />

    <vl-layer-image id="static">
      <vl-source-image-static url="https://i.postimg.cc/cLDn1L60/map-stef-25-11-2020-V4-sf.png" :size="imgSize" :extent="imgExtent" :projection="viewProj">
      </vl-source-image-static>
    </vl-layer-image>

    <vl-feature id="center">
      <vl-geom-point :coordinates="[0, 0]"></vl-geom-point>
    </vl-feature>
    <vl-feature id="img-origin">
      <vl-geom-point :coordinates="[-24.95, -43.76]"></vl-geom-point>
    </vl-feature>
    <vl-feature id="position2" ref="position2">
      <vl-geom-point :coordinates="[19.7, 11.27]"></vl-geom-point>
    </vl-feature>
    <vl-feature id="topright2" ref="topright2">
      <vl-geom-point :coordinates="[88.9, 77.45]"></vl-geom-point>
    </vl-feature>

    <vl-interaction-select>
      <template slot-scope="selection">
        <vl-overlay v-for="feature in selection.features" :key="feature.id" :position="feature.geometry.coordinates">
          <div style="background: #fff; padding: 5px">
            {{ feature.id }}
          </div>
        </vl-overlay>
      </template>
    </vl-interaction-select>
  </vl-map>
</div>

CSS

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

html, body, .ol-mouse-position {
  color: #FF0000;
}

JavaScript

let imgSize = [1778, 1549];
let imgOrigin = [-24.95, -43.75];
let imgResolution = 0.05;
let imgExtent =  [
  imgOrigin[0],
  imgOrigin[1], 
  imgSize[0]*imgResolution, 
  imgSize[1]*imgResolution,
];
// view projection
let viewProj = new ol.proj.Projection({
	code: 'view',
  units: 'm',
  extent: imgExtent,
});
ol.proj.addProjection(viewProj);

new Vue({
	el: '#app',
  data () {
  	return {
    	zoom: 0,
      center: [0, 0],
      viewProj: viewProj.getCode(),
      imgSize,
      imgExtent,
      imgOrigin,
    }
  },
  methods: {
      onMapMounted() {
        // now ol.Map instance is ready and we can work with it directly
        this.$refs.map.$map.getControls().extend([
          new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(0),
          })
        ]);
    },
  }
})