view client/src/components/Map.jsx @ 264:78f96f168b59

Online Map: Fix projection and add TileWMS sample
author Frank Koormann <frank@intevation.de>
date Fri, 27 Jul 2018 16:29:39 +0200
parents dc2a5920b731
children 89f1aa33adcf
line wrap: on
line source

/*eslint no-unused-vars: ["error", { "args": "none" }]*/
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import TileWMS from 'ol/source/TileWMS.js';

export default {
  render(h) {
    return <div id="map" />;
  },
  data() {
    return {
      lat: 6155376,
      long: 1819178,
      zoom: 11,
      projection: "EPSG:3857"
    };
  },
  mounted() {
    new Map({
      layers: [
        new TileLayer({
          source: new OSM()
		 }),
        new TileLayer({
          source: new TileWMS({
            url: 'https://demo.d4d-portal.info/wms',
            params: {'LAYERS': 'd4d', 'VERSION': '1.1.1', 'TILED': true},
          })
        })
      ],
      target: "map",
      view: new View({
        center: [this.long, this.lat],
        zoom: this.zoom,
        projection: this.projection
      })
    });
  }
};