目录

MvtOverlay

Use Cases

An MvtOverlay is added to overlay vector data on the base map and display global or regional weather conditions in real time, such as rainfall, typhoons, and temperature.

Starting from 6.0.0(20), the MvtOverlay function is supported.

API Description

The MvtOverlay functions are mainly provided by MvtOverlayParams, addMvtOverlay, and MvtOverlay. For more information about the APIs, please refer to API Reference.

API Description
MvtOverlayParams MvtOverlay parameters.
addMvtOverlay(params: mapCommon.MvtOverlayParams): MvtOverlay Adds an MvtOverlay.
MvtOverlay MvtOverlay object. You can add and delete MvtOverlays.

Development Procedure

An MvtOverlay can be drawn by loading from an online source or a local file.

[h2]Online Download

  1. During development, you need to configure the network access permission in the module.json5 file of your app to support online download of MvtOverlays. The procedure is as follows: Open the module.json5 file and add the following configuration item to the requestPermissions array to allow your app to access the Internet:

    {
  "module": {
    // ...
    // ...
    "requestPermissions":[
      {
        // Allow an app running in the foreground to obtain the location information.
        "name" : "ohos.permission.LOCATION",
        // The reason needs to be created in /resources/base/element/string.json.
        "reason": "$string:location_permission",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when":"inuse"
        }
      },
      {
        // Allow an app to obtain the approximate device location.
        "name" : "ohos.permission.APPROXIMATELY_LOCATION",
        // The reason needs to be created in /resources/base/element/string.json.
        "reason": "$string:fuzzy_location_permission",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when":"inuse"
        }
      }
    ]
  }
}

  2. Import required modules.

    import { mapCommon, map, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

  3. Draw an MvtOverlay.

    The MvtOverlay supports data sources in the common vector tile format (PBF/MVT). The default values of sourceLayer, fillColor, and fillOpacity of the layers parameter in the MvtOverlayParams class can be manually set or obtained from vector data.

    @Entry
@Component
struct MapMvtOverlayDemo {
  // ...
  private TAG = 'OHMapSDK_MvtOverlayDemo';
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;

  aboutToAppear(): void {
    this.mapOptions = {
      position: {
        target: {
          latitude: 35.899780,
          longitude: 107.766172
        },
        zoom: 6
      },
      scaleControlsEnabled: true
    }
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        let params: mapCommon.MvtOverlayParams = {
          source: {
            // Set the URL of the MvtOverlay, which must start with http or https and contain placeholders {x}, {y}, and {z}.
            tileUrl: 'http://xxx/tiles/{z}/{x}/{y}.pbf',
            minZoom: 2,
            maxZoom: 15
          },
          layers: [{
            id: 'layer-map',
            type: mapCommon.MvtLayerType.FILL,
            // MvtOverlay name.
            sourceLayer: 'XX',
            paint: {
              fillColor: {
                operator: mapCommon.Operator.GET,
                args: 'fill'
              },
              fillOpacity: {
                operator: mapCommon.Operator.GET,
                args: 'fill-opacity'
              }
            }
          }]
        }
        try {
          this.mapController?.addMvtOverlay(params);
        } catch (e) {
          console.error(this.TAG, `code:${e.code}, message:${e.message}`);
        }
      } else {
        console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
      }
    }
  }

  build() {
    // ...
      Stack() {
        Column() {
          MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
        }.width('100%')
      }.height('100%')

      // ...
  }
}

[h2]Local Loading

  1. Import required modules.

    import { mapCommon, map, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

  2. Add a local MvtOverlay.

    @Entry
@Component
struct MapMvtOverlayDemo {
  // ...
  private TAG = 'OHMapSDK_MvtOverlayDemo';
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;

  aboutToAppear(): void {
    this.mapOptions = {
      position: {
        target: {
          latitude: 35.899780,
          longitude: 107.766172
        },
        zoom: 6
      },
      scaleControlsEnabled: true
    }
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        let params: mapCommon.MvtOverlayParams = {
          source: {
            // Obtain the MvtOverlay based on the coordinates. You need to implement the tileProvider method to obtain the MvtOverlay data locally.
            tileProvider: this.tileProviderMethod,
            minZoom: 2,
            maxZoom: 15
          },
          layers: [{
            id: 'layer-map',
            type: mapCommon.MvtLayerType.FILL,
            // MvtOverlay name.
            sourceLayer: 'XX',
            paint: {
              fillColor: {
                operator: mapCommon.Operator.GET,
                args: 'fill'
              },
              fillOpacity: {
                operator: mapCommon.Operator.GET,
                args: 'fill-opacity'
              }
            }
          }]
        }
        try {
          this.mapController?.addMvtOverlay(params);
        } catch (e) {
          console.error(this.TAG, `code:${e.code}, message:${e.message}`);
        }
      } else {
        console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
      }
    }
  }

  // Implement the tileProviderMethod method to load MvtOverlay resources from the local project.
  private tileProviderMethod(x: number, y: number, z: number): Promise<ArrayBuffer> {
    return new Promise((resolve, reject) => {
    });
  }

  build() {
    // ...
      Stack() {
        Column() {
          MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
        }.width('100%')
      }.height('100%')

      // ...
  }
}