How to use a static image as a layer source about vuelayers HOT 18 CLOSED

Hello! Unfortunately now vuelayes doesn't provide components for ol.layer.Image and ol.source.Static.
I have added them to the feature list for the next release.
Currently, you can try to implement them yourself with the help of vl core mixins: https://github.com/ghettovoice/vuelayers/blob/master/src/core/mixins/layer.js and https://github.com/ghettovoice/vuelayers/blob/master/src/core/mixins/source.js. Examples of how to use them you can find in vl-layer-, vl-source- components.
Or wait a bit, the other day I'll can do it.
Thanks!

from vuelayers.

v0.8 with vl-layer-image and vl-source-image-static is ready.
Properties is like in original Openlayers components.

from vuelayers.

I think the problem is that geolocation returns real geographical coordinates, but
you are using some custom pixel projection. So it just can't correctly transform your real
geolocation to the pixel projection.

The only solution I can offer you is don't override projection of the vl-view, it can be in the any real world geographical projection, and use custom pixel projection only for the image static source. Obviously you should pick up some appropriate values for imageSize/imageExtent to correctly overlay you image on the world map.

Something like here https://jsfiddle.net/ghettovoice/6rqm02zx/ or https://jsfiddle.net/ghettovoice/Ludfq6ay/, but without underlying OSM layer

from vuelayers.

Hmm... I've never done it myself.
But as I know you need to project your image to some well-known projection.
There is a set of cli tools to work with raster data sources: gdaltransform https://www.gdal.org/gdaltransform.html is one of them.
May be QGIS https://qgis.org/ru/site/ also can help to do this.

from vuelayers.

@ghettovoice Wow, thanks, that would be fantastic。

from vuelayers.

Hi, @ghettovoice . Quite happy to hear vuelayers has vl-layer-image and vl-source-image-static components. I tried them today, and I have some questiones confused me. I used the codes customed from vuelayers-demo, the component I used to show my static image looks like below:

<template>
  <div id="app" :class="[$options.name]">
    <!-- app map -->
    <vl-map class="map" ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
            @click="clickCoordinate = $event.coordinate" @postcompose="onMapPostCompose">
      <!-- map view aka ol.View -->
      <vl-view ref="view" :center="center" :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>
      
      <!-- base layer -->
      <!-- <vl-layer-tile id="sputnik">
        <vl-source-sputnik></vl-source-sputnik>
      </vl-layer-tile> -->
      <vl-layer-image id="jz">
        <vl-source-image-static 
          :url="imageUrl"
          :size="imageSize"
          :extent="imageExtent">
        </vl-source-image-static>
      </vl-layer-image>
    </vl-map>
    <!--// app map -->
  </div>
</template>

<script>
  import { core as vlCore } from 'vuelayers'

  const methods = {
    onMapPostCompose ({ vectorContext, frameState }) {
      // ....too long , so I delete some codes.  just like the codes from vuelayers-demo
    },
  }

  export default {
    name: 'vld-demo-app',
    methods,
    data () {
      return {
        imageUrl: './Test.png',
        imageSize: [11399, 7163],
        imageExtent: [0, 0, 11399, 7163],
        center: [0, 0],
        zoom: 2,
        rotation: 0,
        clickCoordinate: undefined,
        selectedFeatures: [],
      }
    },
  }
</script>

<style lang="sass">
  @import ~bulma/sass/utilities/_all

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

  .vld-demo-app
    position: relative
    .map
      height: 100%
      width: 100%
</style>

And from the demo of openlayers: https://openlayers.org/en/latest/examples/static-image.html,

The map view is configured with a custom projection that translates image coordinates directly into map coordinates.

While the projection in the component is type of String, so I couldn't custom the view projection any way.
Is there anything I was wrong with this two components, I'm new to OpenLayers. any suggestions is welcome, thanks a lot.

from vuelayers.

Hi, @goforward01 ! Sorry for the late response.
You can add custom projection to OpenLayerslist of known projections and then use it by custom code.
Here is example link
Try with [email protected] in which fixed issue with default value of the crossOrigin prop.
Currently there is another issue with view center coordinates projection, vl-view always expect it in EPSG:4326 projection, but I plan to do this as close as possible to how it was done in Openayers.

from vuelayers.

Hi, @ghettovoice , quite sorry for reply so late. Thanks for response, Since I need to switch my maps library from leaflet to openlayers based on vue in my project for I need the rotate feature of maps. and the map in the project are some of quite huge images, such as 10000+ pixel * 10000+pixel images. So thanks to vuelayers, I find it easier to manage features and map things under vuelayers, I will try to deep into the codes of vuelayers later, if I have time.

I will try version of 0.8.1 today, Thanks again.

from vuelayers.

Thanks for updating the library. After upgrade to the latest version(0.9.1), I tried to show my image map(which is quite huge, 11399 px width*7163 px height).And I get the demo code from project of vuelayer-demo. The codes below works fine if I just used the url provided. while I change the url to my map image, the map is obvious cut to only a small part from source image. Here I got some confused question about show static image: first, I don't understand that why the x and y param should be multiplied by 10000. then, I wonder about how to change the axis zero point to left and top corner of the map.
Thanks again.

<template>
  <div class="hello">
    <!-- app map -->
    <vl-map class="map" ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
      <!-- map view aka ol.View -->
      <vl-view ref="view" :center="center" :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>

      <vl-layer-image id="jz">
        <vl-source-image-static
          :url="imageUrl"
          :size="imageSize"
          :extent="imageExtent"
          :projection="imageProj">
        </vl-source-image-static>
      </vl-layer-image>
    </vl-map>
    <!--// app map -->
  </div>
</template>

<script>
import { core as vlCore } from 'vuelayers'

// Custom projection for static Image layer
let x = 11399 * 10000
let y = 7163 * 10000
let imageExtent = [-x / 2, -y / 2, x / 2, y / 2]
let customProj = vlCore.projHelper.create({
  code: 'xkcd-image',
  units: 'pixels',
  extent: imageExtent
})
// add to the list of known projections
// after that it can be used by code
vlCore.projHelper.add(customProj)

export default {
  data () {
    return {
      imageProj: customProj.getCode(),
      imageUrl: './static/huawei.png',
      imageSize: [11399, 7163],
      imageExtent,
      center: [0, 0],
      zoom: 4,
      rotation: 0
    }
  }
}
</script>

from vuelayers.

Hi, @goforward01 !

• about multiply by 10000: I use this magic number in vuelayers demo to stretch original image when it will be reprojected to the view projection EPSG:3857, i.e. I make image size in meters [10240000, 9680000], so it can be seen from low zoom level.
  If you plan work only with you custom projection, then you can set it to vl-view component and therefore multiplier not needed. Map view will be limited to image size.
  See this example

• about axis orientation:
  First of all you should update image extent to : [0, 0, x, y], so the image left top corner would be at map left top corner.
  Then create projection, toke a note to axisOrientation option (http://openlayers.org/en/v4.6.4/apidoc/ol.proj.Projection.html#getAxisOrientation) and set center of the map to [x/2, y/2]:

let x = 11399
let y = 7163
let imageExtent = [0, 0, x, y]
let customProj = vlCore.projHelper.create({
  code: 'xkcd-image',
  units: 'pixels',
  extent: imageExtent,
  axisOrientation: 'esu'
})

from vuelayers.

@ghettovoice
Thanks for so patient answer. I really appreciate that. Now I get it, and I realize to display my image map according to your guide. The answer save me a lot of time~
One more confused question about showing static image, If I wanna to switch A.png map to B.png map, I tried to reset the value of image url, image size, image custom projection, image extent, also I add the new custom projection to vlCore as before by: vlCore.projHelper.add(customProj), but I found it didn't work. Is there any way to clear the current static image layer and refresh it by the new properties?
Thanks for your precious time.

from vuelayers.

OpenLayers doesn't provided methods to update state of ImageStatic source, therefore vl-source-image-static can't change it's state at runtime. But you can add two layers to map and show only one by some condition wiht v-if or v-show directive.
Also View can't change their projection at runtime, so you should select one projection as base, image sources can be defined with different projections.
Glad I could help!

from vuelayers.

@ghettovoice , Okay, I get it. thanks a lot.

from vuelayers.

What the way to add markers into custom layer image. ?

<vl-geoloc @update:position="geolocPosition">
    <template slot-scope="geoloc">
         <vl-feature v-if="geoloc.position" id="position-feature">
           <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
           <vl-style-box>
             <vl-style-icon src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-128.png" :scale="0.1" :anchor="[-29 ,34]"></vl-style-icon>
           </vl-style-box>
         </vl-feature>
    </template>
</vl-geoloc>

from vuelayers.

Hi @Atiladanvi ,
your code should work.
What exactly is your problem?

from vuelayers.

I canot add a position fixe when i click in the zoom my marker is lost in.

After zomm:

My code:

<template>
  <div>
    <div class="text-white" style="padding: 20px">
      Zoom: {{ zoom }}<br>
      Center: {{ center }}<br>
      Rotation: {{ rotation }}<br>
      My geolocation: {{ geolocPosition }}
    </div>
    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 800px">
      <vl-view :projection="projection" :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation">
      </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-style-box>
              <vl-style-icon src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-128.png" :scale="0.1" :anchor="[-29 ,34]"></vl-style-icon>
            </vl-style-box>
          </vl-feature>
        </template>
      </vl-geoloc>
      <vl-layer-image id="xkcd">
        <vl-source-image-static
          :url="imgUrl"
          :size="imgSize"
          :extent="imgExtent"
          :projection="projection"
          :attributions="imgCopyright">
        </vl-source-image-static>
      </vl-layer-image>
    </vl-map>
  </div>
</template>

<script>
import { createProj, addProj } from "vuelayers/lib/ol-ext";

// Map views always need a projection.  Here we just want to map image
// coordinates directly to map coordinates, so we create a projection that uses
// the image extent in pixels.
let size = [4500, 4600];
let extent = [0, 0, ...size];
// create custom projection for image
// NOTE: VueLayers.olExt available only in UMD build
// in ES build it should be imported explicitly from 'vuelayers/lib/ol-ext'
let customProj = createProj({
  code: "xkcd-image",
  units: "pixels",
  extent
});

const positions = {
  zoom: 2,
  center: [430.136,300.854]
}

// add it to the list of known projections
addProj(customProj);
export default {
  name: "Mapa",
  data() {
    return {
      zoom: 1,
      geolocPosition:  [45,30],
      maxZoom: 8,
      center: [600 , 100],
      rotation: 0,
      projection: customProj.getCode(),
      imgUrl: "mapa.svg",
      imgCopyright: '',
      imgSize: size,
      imgExtent: extent
    };
  },
  mounted() {

  }
};
</script>

from vuelayers.

Thanks. Now i will try center my brazil map in map layer. This package is amazing

from vuelayers.

If you can show the way to position map:
Thanks
https://jsfiddle.net/atiladanvi/qs5othya/2/

from vuelayers.