test(harmony): enhance test pages and add image examples

Update test pages for new network features:
- Enhance CustomHttpRequestTestPage with NetworkConfiguration UI
  - Add interactive header management (add/edit/remove/toggle)
  - Add request monitoring with ResourceTransform
  - Display request logs with resource types and timestamps
  - Test header configuration by triggering map style loads

- Enhance UrlTransformTestPage with comprehensive test cases
  - Add CDN switching demo
  - Add offline resource mapping
  - Add authentication token injection
  - Add URL filtering and logging
  - Real-time request monitoring and statistics

Add new image handling examples:
- Add ImageMissingExample demonstrating lazy image loading
  - Implement OnStyleImageMissingListener
  - Dynamic image loading on demand
  - POI marker examples with missing image handling

- Add StretchableImageExample for 9-patch style images
  - Demonstrate stretchX/stretchY configuration
  - Show content area definition
  - Chat bubble style UI examples

Update existing test pages:
- Update imports to use new APIs (NetworkConfiguration, ResourceTransform)
- Fix GeoJSON type usage across test pages
- Improve MapSnapshotter test cases
- Add better error handling and user feedback

Files changed: 28 files (+1956, -534 lines)

Author: yidafu

platform/harmony/entry/src/main/ets/pages/Index.ets

@@ -97,7 +97,10 @@ struct Index {
       // ==================== 12. Storage ====================
       this.createStorageGroup(),
 
-      // ==================== 13. Events ====================
+      // ==================== 13. Network Configuration ====================
+      this.createNetworkGroup(),
+
+      // ==================== 14. Events ====================
       this.createEventsGroup(),
 
       // ==================== 14. Image Generator ====================
@@ -327,8 +330,17 @@ struct Index {
     ]);
   }
 
+  // /**
+  //  * 13. Network Configuration - 网络配置
+  //  */
+  // private createNetworkGroup(): TestPageGroup {
+  //   return new TestPageGroup('Network', '🌐', [
+  //     new TestPageItem('Custom HTTP Headers', '自定义HTTP请求头', 'pages/NetworkConfigTestPage', '📡'),
+  //   ]);
+  // }
+
   /**
-   * 13. Events - 事件监听
+   * 14. Events - 事件监听
    */
   private createEventsGroup(): TestPageGroup {
     return new TestPageGroup('Events', '📡', [

platform/harmony/entry/src/main/ets/pages/basic/LocalGlyphTestPage.ets

@@ -11,6 +11,7 @@ import { showToast, DEFAULT_STYLE_URLS, TEST_LOCATIONS , DEFAULT_MAP_CONFIG } fr
 import { image } from '@kit.ImageKit';
 import { resourceManager } from '@kit.LocalizationKit';
 
+import type { JSONValue } from 'libmaplibre.so';
 class LanguageText {
   language: string = '';
   text: string = '';
@@ -245,7 +246,7 @@ struct LocalGlyphTestPage {
 
       // 3. 创建 GeoJSON 数据
       const features = multiLanguageTexts.map(item => {
-        const props: Record<string, Object> = {
+        const props: Record<string, JSONValue> = {
           'text': item.text,
           'language': item.language,
           'color': item.color

platform/harmony/entry/src/main/ets/pages/basic/SimpleMapTestPage.ets

@@ -6,7 +6,7 @@
  */
 
 import { TestPageLayout } from '../common/TestPageLayout';
-import { MapView, MapLibreMap, CameraPosition, LatLng } from 'maplibre_harmony';
+import { MapView, MapLibreMap, LatLng } from 'maplibre_harmony';
 import { showToast, DEFAULT_STYLE_URLS, DEFAULT_MAP_CONFIG } from '../common/TestUtils';
 
 @Entry

platform/harmony/entry/src/main/ets/pages/feature/QueryRenderedFeaturesPropertiesTestPage.ets

@@ -6,6 +6,7 @@ import { MapLibreMap, MapView, OnMapClickListener, ScreenPoint } from 'maplibre_
  */
 import { TestPageLayout } from '../common/TestPageLayout';
 import { DEFAULT_STYLE_URLS, showToast , DEFAULT_MAP_CONFIG } from '../common/TestUtils';
+import type { JSONValue } from 'libmaplibre.so';
 
 @Entry
 @Component
@@ -96,7 +97,7 @@ struct QueryRenderedFeaturesPropertiesTestPage {
 
       if (features.length > 0) {
         const feature = features[0];
-        const props: Record<string, Object> = feature.properties || {};
+        const props: Record<string, JSONValue> = feature.properties || {};
         const propStr = JSON.stringify(props, null, 2);
         const layerName: string = feature.layer || '未知';
         this.featureInfo = `类型: ${feature.type}\n图层: ${layerName}\n属性:\n${propStr}`;

platform/harmony/entry/src/main/ets/pages/feature/QuerySourceFeaturesTestPage.ets

@@ -8,6 +8,7 @@ import { GeoJson, GeoJsonSource, LatLng, MapLibreMap, MapView, ScreenPoint, Circ
 import { DEFAULT_STYLE_URLS, showToast , DEFAULT_MAP_CONFIG } from '../common/TestUtils';
 import type { JsonObject } from '../../types/EntryTypes';
 import type { IFeature } from 'maplibre_harmony/src/main/ets/maps/geojson/types';
+import type { JSONValue } from 'libmaplibre.so';
 
 @Entry
 @Component
@@ -48,10 +49,10 @@ struct QuerySourceFeaturesTestPage {
 
   private addTestSource(map: MapLibreMap): void {
     // 添加测试 GeoJSON 数据源，包含多个测试点
-    const props1: Record<string, Object> = { 'name': '北京', 'type': 'city', 'population': 21540000 };
-    const props2: Record<string, Object> = { 'name': '天津', 'type': 'city', 'population': 13870000 };
-    const props3: Record<string, Object> = { 'name': '石家庄', 'type': 'city', 'population': 11040000 };
-    const props4: Record<string, Object> = { 'name': '太原', 'type': 'city', 'population': 5300000 };
+    const props1: Record<string, JSONValue> = { 'name': '北京', 'type': 'city', 'population': 21540000 };
+    const props2: Record<string, JSONValue> = { 'name': '天津', 'type': 'city', 'population': 13870000 };
+    const props3: Record<string, JSONValue> = { 'name': '石家庄', 'type': 'city', 'population': 11040000 };
+    const props4: Record<string, JSONValue> = { 'name': '太原', 'type': 'city', 'population': 5300000 };
 
     const geojsonData = GeoJson.featureCollection([
       GeoJson.pointFeature([116.4074, 39.9042], props1),

platform/harmony/entry/src/main/ets/pages/snapshot/MapSnapshotterBitmapOverlayTestPage.ets

@@ -56,7 +56,9 @@ struct MapSnapshotterBitmapOverlayTestPage {
       const latLng = this.mapController?.getLatLng() || LatLng.create(39.9042, 116.4074);
       const zoom = this.mapController?.getZoom() || 12;
 
-      const cameraPosition = CameraPosition.create(latLng, zoom, 0, 0);
+      const cameraPosition: CameraPosition = {
+        target:  latLng, zoom, bearing: 0, tilt: 0
+      };
 
       const options: SnapshotOptions = {
         size: { width: 800, height: 600 },

platform/harmony/entry/src/main/ets/pages/snapshot/MapSnapshotterHeatMapTestPage.ets

@@ -8,6 +8,7 @@
  */
 
 import { TestPageLayout } from '../common/TestPageLayout';
+import type { JSONValue } from 'libmaplibre.so';
 import {
   NativeMapView,
   MapLibreMap,
@@ -53,7 +54,7 @@ struct MapSnapshotterHeatMapTestPage {
   private generateHeatmapData(): IFeatureCollection {
     const features: IFeature[] = [];
     for (let i = 0; i < 100; i++) {
-      const props: Record<string, Object> = {
+      const props: Record<string, JSONValue> = {
         'intensity': Math.random()
       };
       features.push(GeoJson.pointFeature(
@@ -98,12 +99,12 @@ struct MapSnapshotterHeatMapTestPage {
     this.isGenerating = true;
 
     try {
-      const cameraPosition = CameraPosition.create(
-        LatLng.create(35, 105),
-        4,
-        0,
-        0
-      );
+      const cameraPosition: CameraPosition = {
+        target: LatLng.create(35, 105),
+        zoom: 4,
+        bearing: 0,
+        tilt: 0
+      }
 
       // 注意：MapSnapshotter需要自己配置样式和图层
       // 这里使用当前地图的样式JSON

platform/harmony/entry/src/main/ets/pages/snapshot/MapSnapshotterLocalStyleTestPage.ets

@@ -87,8 +87,9 @@ struct MapSnapshotterLocalStyleTestPage {
 
       this.mapController?.setStyleJson(this.styleJson);
       showToast('本地样式已加载');
-    } catch (error) {
-      showToast(`加载样式失败: ${error}`);
+    } catch (e) {
+      const error = e as Error;
+      showToast(`加载样式失败: ${error.message || String(e)}`);
     }
   };
 
@@ -104,12 +105,12 @@ struct MapSnapshotterLocalStyleTestPage {
     this.isGenerating = true;
 
     try {
-      const cameraPosition = CameraPosition.create(
-        LatLng.create(30, 120),
-        5,
-        0,
-        0
-      );
+      const cameraPosition: CameraPosition = {
+        target: new LatLng(30, 120),
+        zoom: 5,
+        bearing: 0,
+        tilt: 0
+      };
 
       const options: SnapshotOptions = {
         size: { width: 800, height: 600 },
@@ -123,9 +124,10 @@ struct MapSnapshotterLocalStyleTestPage {
       const snapshotter = new MapSnapshotter(options);
 
       snapshotter.start(new ReadyCallback(this, snapshotter) , new ErrorCallback(this) );
-    } catch (error) {
+    } catch (e) {
+      const error = e as Error;
       this.isGenerating = false;
-      showToast(`生成失败: ${error}`);
+      showToast(`生成失败: ${error.message || String(e)}`);
     }
   };