feat: map can do things

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@amap/amap-jsapi-types": "^0.0.15",
     "@internationalized/date": "^3.7.0",
     "@unhead/vue": "^1.11.15",
     "@unocss/preset-web-fonts": "^65.4.3",

pnpm-lock.yaml

@@ -16,6 +16,9 @@ importers:
       '@amap/amap-jsapi-loader':
         specifier: ^1.0.1
         version: 1.0.1
+      '@amap/amap-jsapi-types':
+        specifier: ^0.0.15
+        version: 0.0.15
       '@internationalized/date':
         specifier: ^3.7.0
         version: 3.7.0
@@ -219,6 +222,9 @@ packages:
   '@amap/amap-jsapi-loader@1.0.1':
     resolution: {integrity: sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==}
 
+  '@amap/amap-jsapi-types@0.0.15':
+    resolution: {integrity: sha512-oqyRqHpVDZh5bUe2mAJh41ZsziSj0eUzwcfIbiaBNB0eiTJnZNhKsTdk77VOklOjwuwNfsblpKW9LjmWNpeQ7A==}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -6295,6 +6301,8 @@ snapshots:
 
   '@amap/amap-jsapi-loader@1.0.1': {}
 
+  '@amap/amap-jsapi-types@0.0.15': {}
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5

src/composables/dateOpt.ts

@@ -3,9 +3,10 @@ import { type DateValue, parseDate } from '@internationalized/date'
 function _useOptions() {
   const options = reactive({
     castBeginDate: '',
-    castDayNo: 0,
+    castDayNo: -1,
     renderMode: 'heatmap' as 'heatmap' | 'image',
     isPlaying: false,
+    mapping: {} as Record<string, string>,
   })
 
   function setCastBeginDate(date: DateValue) {

src/layouts/map.vue

@@ -26,6 +26,7 @@ onMounted(async () => {
   const resp = await baseFetch('/tc/metadata').json()
   const data = resp.data.value.data
   mapping.value = data
+  options.mapping = data
 })
 
 const isDateDisabled = computed(() => {

src/pages/map.vue

@@ -4,28 +4,78 @@ meta:
 </route>
 
 <script setup lang="ts">
+import { useOptions } from '@/composables/dateOpt'
 import AMapLoader from '@amap/amap-jsapi-loader'
+import '@amap/amap-jsapi-types'
 
-const amapInstance = ref(null)
+const amapInstance = ref<null | typeof AMap>(null)
-const map = ref(null)
+const map = ref<null | AMap.Map>(null)
+const previousLayer = ref<null | AMap.ImageLayer>(null)
 
 const apiKey = import.meta.env.VITE_AMAP_API_KEY
+
+const { options } = useOptions()
+
+watch(options, async () => {
+  if (!map.value || !amapInstance.value) {
+    return
+  }
+  if (options.castBeginDate === '' || options.castDayNo === -1) {
+    return
+  }
+  updateMap()
+})
+
+function updateMap() {
+  if (!map.value || !amapInstance.value) {
+    return
+  }
+
+  const q = new URLSearchParams()
+  q.set('day', options.castDayNo.toString())
+  const path = options.mapping[options.castBeginDate]
+  q.set('path', path)
+  const base = import.meta.env.VITE_BACKEND_URL
+
+  const url = `${base}/tc/render?${q}`
+
+  const image = new amapInstance.value.ImageLayer({
+    url,
+    // @ts-expect-error AMap messed up their definition
+    bounds: new AMap.Bounds([-180, -35], [180, 35]),
+    // bounds: [-150, -35, 180, 35],
+    zIndex: 9,
+    opacity: 1,
+    // zooms: [15, 20],
+  })
+  map.value.add(image)
+  image.on('complete', () => {
+    previousLayer.value?.hide()
+    previousLayer.value = image
+  })
+}
+
 onMounted(async () => {
-  const AMap = await AMapLoader.load({
+  const _AMap: typeof AMap = await AMapLoader.load({
     key: apiKey,
     version: '2.0',
     plugins: [''],
   })
-  amapInstance.value = AMap
+  amapInstance.value = _AMap
 
-  map.value = new AMap.Map('amap-container', {
+  map.value = new _AMap.Map('amap-container', {
-    zoom: 5,
+    zoom: 4,
     center: [130, 17],
+    zooms: [4, 20],
     // layers: [
     /* new AMap.TileLayer.Satellite() */
     // new AMap.TileLayer.RoadNet(),
     // ],
   })
+
+  map.value.setBounds(new AMap.Bounds([-180, -35], [180, 35]))
+  map.value.setLimitBounds(new AMap.Bounds([-180, -35], [180, 35]))
+  map.value.setZoom(4)
 })
 </script>
 

tsconfig.json

@@ -16,7 +16,8 @@
       "vite-plugin-vue-layouts/client",
       "vite-plugin-pwa/client",
       "unplugin-vue-macros/macros-global",
-      "unplugin-vue-router/client"
+      "unplugin-vue-router/client",
+      "@amap/amap-jsapi-types"
     ],
     "allowJs": true,
     "strict": true,