refactor(ol-tile-layer): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/layers/tilelayer/index.md

@@ -18,7 +18,7 @@ Example below shows how to use ol-layer-tile component together with ol-source-w
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:400px"
+    style="height: 400px"
   >
     <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" />
 
@@ -39,37 +39,20 @@ Example below shows how to use ol-layer-tile component together with ol-source-w
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([-90, 50]);
-    const zoom = ref(2);
-    const rotation = ref(0);
-    const url = ref(
-      "https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/"
-    );
-    const layerName = ref("0");
-    const matrixSet = ref("EPSG:3857");
-    const format = ref("image/png");
-    const styleName = ref("default");
-    const attribution = ref(
-      'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
-    );
-
-    return {
-      center,
-      zoom,
-      rotation,
-      url,
-      layerName,
-      matrixSet,
-      format,
-      styleName,
-      attribution,
-    };
-  },
-};
+
+const center = ref([-11158582, 4813697]);
+const zoom = ref(4);
+const rotation = ref(0);
+const url = ref("https://mrdata.usgs.gov/mapcache/wmts");
+const layerName = ref("sgmc2");
+const matrixSet = ref("GoogleMapsCompatible");
+const format = ref("image/png");
+const styleName = ref("default");
+const attribution = ref(
+  'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
+);
 </script>
 ```
 

src/components/layers/OlTileLayer.vue

@@ -0,0 +1,69 @@
+<template lang="">
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
+
+import TileLayer from "ol/layer/Tile";
+import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import useBaseLayerProps from "@/composables/useBaseLayerProps";
+
+const props = defineProps({
+  ...useBaseLayerProps(),
+  preload: {
+    type: Number,
+    default: 1,
+  },
+});
+
+const map = inject("map");
+const overViewMap = inject("overviewMap", null);
+
+const { properties } = usePropsAsObjectProperties(props);
+
+const tileLayer = computed(() => new TileLayer(properties));
+
+const applyTileLayer = () => {
+  if (overViewMap != null) {
+    overViewMap.value.getOverviewMap().addLayer(tileLayer.value);
+    overViewMap.value.changed();
+  } else {
+    map.addLayer(tileLayer.value);
+  }
+};
+
+const removeTileLayer = () => {
+  if (overViewMap != null) {
+    overViewMap.value.getOverviewMap().removeLayer(tileLayer.value);
+    overViewMap.value.changed();
+  } else {
+    map.removeLayer(tileLayer.value);
+  }
+};
+
+if (overViewMap != null) {
+  watch(overViewMap, () => {
+    removeTileLayer();
+    applyTileLayer();
+  });
+}
+
+onMounted(() => {
+  applyTileLayer();
+});
+
+onUnmounted(() => {
+  removeTileLayer();
+});
+
+provide("tileLayer", tileLayer);
+
+defineExpose({
+  tileLayer,
+});
+</script>
+
+<style lang=""></style>

src/components/layers/TileLayer.vue

@@ -1,10 +1,10 @@
-import TileLayer from "./TileLayer.vue";
 import WebGLTileLayer from "./WebGLTileLayer.vue";
 import VectorImageLayer from "./VectorImageLayer.vue";
 import VectorLayer from "./VectorLayer.vue";
 import OlAnimatedClusterLayer from "./OlAnimatedClusterLayer.vue";
 import OlHeatmapLayer from "./OlHeatmapLayer.vue";
 import OlImageLayer from "./OlImageLayer.vue";
+import OlTileLayer from "./OlTileLayer.vue";
 import WebglPointsLayer from "./WebglPointsLayer.vue";
 
 function install(app) {
@@ -17,7 +17,7 @@ function install(app) {
   app.component("ol-animated-clusterlayer", OlAnimatedClusterLayer);
   app.component("ol-heatmap-layer", OlHeatmapLayer);
   app.component("ol-image-layer", OlImageLayer);
-  app.component(TileLayer.name, TileLayer);
+  app.component("ol-tile-layer", OlTileLayer);
   app.component(WebGLTileLayer.name, WebGLTileLayer);
   app.component(VectorImageLayer.name, VectorImageLayer);
   app.component(VectorLayer.name, VectorLayer);
@@ -31,7 +31,7 @@ export {
   OlAnimatedClusterLayer,
   OlHeatmapLayer,
   OlImageLayer,
-  TileLayer,
+  OlTileLayer,
   WebGLTileLayer,
   VectorImageLayer,
   VectorLayer,