Mercurial > gemma

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
251:63e17e017f09 264:78f96f168b59
1 /*eslint no-unused-vars: ["error", { "args": "none" }]*/ 1 /*eslint no-unused-vars: ["error", { "args": "none" }]*/
2 import "ol/ol.css"; 2 import "ol/ol.css";
3 import { Map, View } from "ol"; 3 import { Map, View } from "ol";
4 import TileLayer from "ol/layer/Tile"; 4 import TileLayer from "ol/layer/Tile";
5 import OSM from "ol/source/OSM"; 5 import OSM from "ol/source/OSM";
6 import TileWMS from 'ol/source/TileWMS.js';
6 7
7 export default { 8 export default {
8 render(h) { 9 render(h) {
9 return <div id="map" />; 10 return <div id="map" />;
10 }, 11 },
11 data() { 12 data() {
12 return { 13 return {
13 lat: 52.278889, 14 lat: 6155376,
14 long: 8.043056, 15 long: 1819178,
15 zoom: 12, 16 zoom: 11,
16 projection: "EPSG:4326" 17 projection: "EPSG:3857"
17 }; 18 };
18 }, 19 },
19 mounted() { 20 mounted() {
20 new Map({ 21 new Map({
21 layers: [ 22 layers: [
22 new TileLayer({ 23 new TileLayer({
23 source: new OSM() 24 source: new OSM()
25 }),
26 new TileLayer({
27 source: new TileWMS({
28 url: 'https://demo.d4d-portal.info/wms',
29 params: {'LAYERS': 'd4d', 'VERSION': '1.1.1', 'TILED': true},
30 })
24 }) 31 })
25 ], 32 ],
26 target: "map", 33 target: "map",
27 view: new View({ 34 view: new View({
28 center: [this.long, this.lat], 35 center: [this.long, this.lat],