如何设置地图深色模式、浅色模式和自定义颜色

问题现象

根据不同使用场景进行深色模式、浅色模式切换是常见地图使用场景之一，如何实现Map Kit地图的深色模式、浅色模式配置？如何自定义地图的颜色？

背景知识

开发准备：使用地图服务，需要先开通地图服务。
setDayNightMode：设置地图的日间夜间模式，对应配模式配置值请参见DayNightMode。
Petal Maps Studio：管理地图样式网站。
setCustomMapStyle：将地图样式修改为自定义样式。

解决方案

场景一：加载地图时，默认显示为深色模式。

在地图初始化mapOptions参数中，配置DayNightMode为mapCommon.DayNightMode.NIGHT。

this.mapOptions = {
  position: {
    target: {
      latitude: 39.9,
      longitude: 116.4
    },
    zoom: 10
  },
  myLocationControlsEnabled: true,
  // 设置地图为夜间模式
  dayNightMode: mapCommon.DayNightMode.NIGHT
};

场景二：切换地图为深色模式。

配置调用setDayNightMode接口配置DayNightMode为NIGHT。

Button('切换为深色模式')
  .onClick(() => {
    this.mapController?.setDayNightMode(mapCommon.DayNightMode.NIGHT);
  })

点击放大

场景三：切换地图为浅色模式。

配置调用setDayNightMode接口配置DayNightMode为DAY。

Button('切换为浅色模式')
  .onClick(() => {
    this.mapController?.setDayNightMode(mapCommon.DayNightMode.DAY);
  })

点击放大

场景四：地图颜色跟随系统深色模式配置。

配置调用setDayNightMode接口配置DayNightMode为AUTO。

Button('切换为跟随系统深色模式')
  .onClick(() => {
    this.mapController?.setDayNightMode(mapCommon.DayNightMode.AUTO);
  });

点击放大

场景五：配置地图为自定义颜色。

登录Petal Maps Studio网站，点击首页中的“Start”按钮。
点击页面右上角的“Create map”按钮，在新页面中点击预设的“Standard”、“Simple”、“Night”三种地图样式。
在地图样式配置和预览页面，左侧选择需要配置的地图元素，依次选择“Feature type”、“Element type”、“Stylers”，通过配置Stylers中的Color来自定义对应元素的颜色。
点击页面“SAVE”按钮后，参考产品文档中显示自定义地图的开发步骤进行自定义地图加载。

完整代码：

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

@Entry
@Component
struct MapDayNightMode {
  private mapOptions?: mapCommon.MapOptions;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapController?: map.MapComponentController;
  @State mapHeight: number = 0;

  aboutToAppear(): void {
    let displayClass = display.getDefaultDisplaySync();
    this.mapHeight = this.getUIContext().px2vp(displayClass.height);
    // 地图初始化参数，设置地图中心点坐标及层级
    this.mapOptions = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10
      },
      myLocationControlsEnabled: true,
      // 设置地图为夜间模式
      dayNightMode: mapCommon.DayNightMode.NIGHT
    };

    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;

      } else {
        console.error(`Failed to initialize the map, code is：${err.code}, message is ${err.message}`);
      }
    };
  }

  // 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效
  onPageShow(): void {
    // 将地图切换到前台
    if (this.mapController) {
      this.mapController.show();
    }
  }

  // 页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景，仅@Entry装饰的自定义组件生效
  onPageHide(): void {
    // 将地图切换到后台
    if (this.mapController) {
      this.mapController.hide();
    }
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
          .height(this.mapHeight);
        // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
      }.width('100%');

      Column() {
        Button('切换为深色模式')
          .onClick(() => {
            this.mapController?.setDayNightMode(mapCommon.DayNightMode.NIGHT);
          })
          .margin({ bottom: 2 });
        Button('切换为浅色模式')
          .onClick(() => {
            this.mapController?.setDayNightMode(mapCommon.DayNightMode.DAY);
          })
          .margin({ bottom: 2 });
        Button('切换为跟随系统深色模式')
          .onClick(() => {
            this.mapController?.setDayNightMode(mapCommon.DayNightMode.AUTO);
          });
      };
    }.height('100%')
    .ignoreLayoutSafeArea();
  }
}

目录

如何设置地图深色模式、浅色模式和自定义颜色

问题现象

背景知识

解决方案