"Full Features" Integration

These buttons partly simulate the click handlers of your framework (e.g. React, Angular)
Toolbox
  • Zeichnen
  • Messen
  • Import
  • Export
 
  • 1
    Found 1More info about 1
  • 2
    Found 2More info about 2
  • 3
    Found 3More info about 3
  • 4
    Found 4More info about 4
  • 5
    Found 5More info about 5
  • 6
    Found 6More info about 6 More info about 6 More info about 6 More info about 6 More info about 6
  • 7
    Found 7More info about 7 More info about 7 More info about 7 More info about 7 More info about 7
  • 8
    Found 8More info about 8 More info about 8 More info about 8 More info about 8 More info about 8
  • 9
    Found 9More info about 9 More info about 9 More info about 9 More info about 9 More info about 9
  • 10
    Found 10More info about 10 More info about 10 More info about 10 More info about 10 More info about 10
Bgis App LogoApplication Subtitle
  • 1
    Navigate 1Some Navigation Details 1
  • 2
    Navigate 2Some Navigation Details 2
  • 3
    Navigate 3Some Navigation Details 3
  • 4
    Navigate 4Some Navigation Details 4
  • 5
    Navigate 5Some Navigation Details 5
  • 6
    Navigate 6Some Navigation Details 6
  • 7
    Navigate 7Some Navigation Details 7
  • 8
    Navigate 8Some Navigation Details 8
  • 9
    Navigate 9Some Navigation Details 9
  • 10
    Navigate 10Some Navigation Details 10
  • 11
    Navigate 11Some Navigation Details 11 Some Navigation Details 11 Some Navigation Details 11 Some Navigation Details 11
  • 12
    Navigate 12Some Navigation Details 12 Some Navigation Details 12 Some Navigation Details 12 Some Navigation Details 12
  • 13
    Navigate 13Some Navigation Details 13 Some Navigation Details 13 Some Navigation Details 13 Some Navigation Details 13
  • 14
    Navigate 14Some Navigation Details 14 Some Navigation Details 14 Some Navigation Details 14 Some Navigation Details 14
  • 15
    Navigate 15Some Navigation Details 15 Some Navigation Details 15 Some Navigation Details 15 Some Navigation Details 15
  • © BMLRT, 2023

    • Das Beispiel zeigt den kompletten Rahmen, den bgis bietet. Die Core-Features wurden ergänzt durch einen Header für z.B. Anwendungsnamen, Links und Logo. Im linken Bereich sieht man außerdem Vorlagen für erweiterte Karteninteraktionen, wie z.B Suche, Suchergebnisliste und Detailansichten. Diese Vorlagen sind zwar mit HTML und CSS durch bgis umgesetzt, sie dienen jedoch nur als Ausgangspunkt einer möglichen Javascript-Integration durch ein externes Framework wie React, Angular oder Vue.js. Die Buttons im oberen Bereich und das Einbinden der UiInteraction-Klasse simulieren (unvollständig) mögliche Clickhandler eines externen Frameworks.

    Typescript

    import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import Map from "ol/Map";
import {
  Attribution,
  BasemapSource,
  BottomRight,
  Footer,
  GeoLocate,
  Layer,
  MousePosition,
  Overview,
  Print,
  ScaleLine,
  Share,
  Tools,
  TopRight,
  UiInteraction,
  ViewList,
  Zoom
} from "../../../src";
import '../../../src/indexClient.scss';
import {getCenter} from "ol/extent";
import {defaults as defaultInteractions} from "ol/interaction";

new Map({
  target: 'bgis-map',
  layers: [new TileLayer({
    source: new BasemapSource()
  })],
  controls: [
    new Footer([
      new ScaleLine(),
      new MousePosition(),
      new Attribution(),
    ]),
    new BottomRight({horizontalControls:
        [new Layer(),
          new ViewList()],
      verticalControls: [new Print(),
        new Share(), new Tools()]
    }),
    new TopRight([
      new GeoLocate(),
      new Zoom(),
    ]),
    new Overview()
  ],
  interactions: defaultInteractions().extend([ new UiInteraction()]),
  view: new View({
    center: getCenter([1060000, 5838030, 1913530, 6281290]),
    constrainOnlyCenter: true,
    constrainResolution: false, // discrete zooomlevels
    extent: [1060000, 5838030, 1913530, 6281290],
    maxZoom: 15,
    minZoom: 6,
    zoom: 7,
  })
});

    HTML