HarmonyOS鸿蒙Next中mapKit的标准地图和地形图怎么设置才能不显示地名

HarmonyOS鸿蒙Next中mapKit的标准地图和地形图怎么设置才能不显示地名 项目中有个需求是只显示基础图层不显示地名怎么设置,效果如图:


更多关于HarmonyOS鸿蒙Next中mapKit的标准地图和地形图怎么设置才能不显示地名的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

开发者你好,

不显示地名可参考显示自定义地图章节的设置样式内容方式实现。 可将styleContent中JSON内容设置为:

[
  {
    "mapFeature": "poi",
    "options": "all",
    "visibility": false
  },
  {
    "mapFeature": "road",
    "options": "labels.text",
    "visibility": false
  },
  {
    "mapFeature": "road",
    "options": "labels.icon",
    "visibility": false
  },
  {
    "mapFeature": "transit.metro-line",
    "options": "all",
    "visibility": false
  },
  {
    "mapFeature": "administrative",
    "options": "all",
    "visibility": false
  },
  {
    "mapFeature": "landcover",
    "options": "labels.text",
    "visibility": false
  },
  {
    "mapFeature": "transit.rail-station",
    "options": "labels.text",
    "visibility": false
  },
  {
    "mapFeature": "transit.metro-station",
    "options": "labels.text",
    "visibility": false
  },
  {
    "mapFeature": "transit.transfer-station",
    "options": "labels.text",
    "visibility": false
  }
]

poi表示店铺、建筑的等信息 road的labels.text和labels.icon表示道路的名称和图标 transit.metro-line表示地铁线路 administrative表示国家、省市、区县名称 landcover表示公共区域的名称(如学校、医院等) transit.rail-station表示火车站 transit.metro-station表示地铁站 transit.transfer-station表示地铁换乘站 各元素说明参见样式参考

更多关于HarmonyOS鸿蒙Next中mapKit的标准地图和地形图怎么设置才能不显示地名的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


从6.0.0(20)开始,支持卫星图和混合地图功能。

Map Kit支持以下地图类型:

  • STANDARD:标准地图,展示道路、建筑物以及河流等重要的自然特征。
  • NONE:空地图,没有加载任何数据的地图。
  • TERRAIN:地形图,在保留了行政区划边界、POI、楼块等地图要素的基础上,呈现完整清晰描绘地形走势的标准地图。
  • SATELLITE:卫星图,显示卫星照片的地图,只支持中国。
  • HYBRID:混合地图,在显示卫星照片的同时也显示路网信息。

cke_228.png

cke_548.png

cke_892.png

在地图初始化的时候,在mapOptions参数中新增mapType属性:mapCommon.MapType.STANDARD。

this.mapOptions = {
  position: {
    target: {
      latitude: 31.984410259206815,
      longitude: 118.76625379397866
    },
    zoom: 15
  },
  mapType: mapCommon.MapType.STANDARD
};

方式二:地图创建后,调用setMapType方法设置地图类型为地形图。而且,要将地图缩放层级控制在大于5且小于14的区间内才能看到地形图效果。

this.mapController.setMapType(mapCommon.MapType.TERRAIN);

楼主可以使用setCustomMapStyle这个方法来设置地图的样式:

在官网自定义样式: cke_3181.png

参考代码:

import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { util } from '@kit.ArkTS';

@Entry
@Component
struct MapPage {
  private mapOption?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  // 必须获取 context 来读取 rawfile
  private context = getContext(this);

  aboutToAppear(): void {
    // 初始化地图参数
    this.mapOption = {
      position: {
        target: {
          latitude: 39.9,
          longitude: 116.4
        },
        zoom: 10
      },
      // 这里可以设置为地形图或标准图,样式设置后都会生效
      mapType: mapCommon.MapType.HYBRID
    };
  }

  // 读取 Rawfile 工具函数
  async getRawFileContent(fileName: string): Promise<string> {
    try {
      let value = await this.context.resourceManager.getRawFileContent(fileName);
      let textDecoder = util.TextDecoder.create("utf-8", { ignoreBOM: true });
      let result = textDecoder.decodeWithStream(value, { stream: false });
      return result;
    } catch (error) {
      console.error(`Read rawfile failed: ${error}`);
      return "";
    }
  }

  build() {
    Column() {
      MapComponent({
        mapOptions: this.mapOption,
        mapCallback: (err, controller) => {
          if (!err) {
            this.mapController = controller;

            // 【关键代码】地图加载完成后设置自定义样式
            this.mapController.on("mapLoad", async () => {
              // 1. 读取 json 文件内容
              const styleJson = await this.getRawFileContent("map_no_labels_style.json");

              // 2. 设置自定义样式
              if (styleJson && this.mapController) {
                this.mapController.setCustomMapStyle({
                  styleId: "xxxxxxx"
                });
              }
            });
          }
        }
      })
        .width('100%')
        .height('100%')
    }
  }
}

参考文档: MapComponentController-map(地图显示功能)-ArkTS API-Map Kit(地图服务)-应用服务 - 华为HarmonyOS开发者

在HarmonyOS鸿蒙Next中,使用MapKit时,可通过MapView的MapOption配置地图类型。标准地图与地形图默认显示地名。要隐藏地名,需设置地图的显示元素。具体是在MapOption中配置MapDisplayOption,将POI(兴趣点)显示关闭。这通常通过设置相关标志位实现,例如禁用标签图层。

在HarmonyOS Next的MapKit中,可以通过设置Map组件的MapTypeMapOption来控制地图元素的显示。

要实现标准地图或地形图不显示地名,核心是使用MapOptionisShowMapText属性。将其设置为false即可关闭所有地图文字标注(包括地名、道路名等)。

具体实现步骤如下:

  1. 在ets文件中引入MapKit模块。

    import mapkit from '@ohos.geo.mapkit';
    
  2. aboutToAppear生命周期或合适的时机初始化地图控制器MapController

    private mapController: mapkit.MapController = new mapkit.MapController();
    
  3. 在构建UI的build()方法中使用Map组件,并绑定控制器。

    build() {
      Column() {
        // 设置地图容器高度
        Map({
          mapType: mapkit.MapType.STANDARD, // 或 MapType.TERRAIN 使用地形图
          controller: this.mapController
        })
        .width('100%')
        .height('100%')
        .onReady(() => {
          // 地图准备就绪后,设置选项
          this.configureMap();
        })
      }
      .width('100%')
      .height('100%')
    }
    
  4. 定义configureMap方法,通过MapController设置地图选项。

    private configureMap() {
      // 创建MapOption对象,并关闭文字显示
      let options: mapkit.MapOption = {
        isShowMapText: false // 关键设置:关闭地名等文字标注
        // 可以在此设置其他选项,如缩放级别、中心点等
        // zoomLevel: 10,
        // center: { latitude: 39.909, longitude: 116.397 }
      };
      // 将选项应用至地图
      this.mapController.setMapOption(options);
    }
    

关键点说明:

  • mapkit.MapType.STANDARD: 设置为标准街道地图。
  • mapkit.MapType.TERRAIN: 设置为地形图。
  • MapOption.isShowMapText: 此属性控制所有地图矢量图块上的文字元素(如地名、POI标签、道路标签)的显隐。设为false后,地图将只保留基础的道路、绿地、水域、建筑物轮廓等图形,不显示任何文字。

通过以上步骤,无论是标准地图还是地形图,都将只呈现基础的地理图层,而不会显示任何地名标签,符合你提供的效果图需求。

回到顶部