<template>
  <cesium-web-globe
    libPath="statics/cesium/Cesium.js"
    pluginPath="statics/cesium/webclient-cesium-plugins.js"
    class="onemap-cesium-map"
    @load="handleLoad"
  >
    <cesium-igs-tile-layer
      v-if="isIgsTileLayer(l.subtype)"
      :url="l.url"
    />
    <cesium-igs-doc-layer
      v-if="isIgsDocLayer(l.subtype)"
      :show="l.show"
      :url="l.url"
    />
    <cesium-popup
      :position="{longitude:110, latitude: 30}"
      container="<div>123</div>"
    >
    </cesium-popup>
    <cesium-heater :geojson="geojson" />
<!--       <mapbox-igs-tdt-layer
        v-for="l in backgrounds"
        :key="l.id"
        :layer="{}"
        :layerId="l.id"
        :sourceId="l.id"
        :baseURL="l.tileUrl"
        :token="l.token"
        :crs="crs"
      >
      </mapbox-igs-tdt-layer>
      <mapbox-geojson-layer
        v-if="false"
        :sourceId="geojson.sourceid"
        :source="geojson.source"
        :layerId="geojson.layerid"
        :layer="geojson.layer"
      /> -->
  </cesium-web-globe>
</template>

<script>
import {
  CesiumWebGlobe,
  CesiumIgsDocLayer,
  CesiumIgsTileLayer,
  CesiumPopup,
  CesiumHeater,
} from '@mapgis/webclient-vue-cesium';

export default {
  name: 'App',
    components: {
      CesiumWebGlobe,
      CesiumIgsDocLayer,
      CesiumIgsTileLayer,
      CesiumPopup,
      CesiumHeater,
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
