Function MapView

地图 UI 控件。

加载后，通过组件的 onInited 回调获得 MapController 对象后方可使用二维地图相关接口。 许可要求： 初始化本控件需要核心许可。 分析、特效等功能可能需要附加许可，详见返回的 Controller 模块说明。 许可导致的初始化失败通过 onInitError 返回。

使用前通常先通过 RTNCore 调用 initEnvironment() 启动本地 client 服务。

加载示例：

import { MapController, MapView, RTNCore } from 'react-native-mobilex'
import { useEffect, useState } from 'react'

export default function SimpleApp() {
  const [valid, setValid] = useState(false)

  useEffect(() => {
    init()
  }, [])

  async function init() {
    RTNCore.initEnvironment(9988) // 初始化并指定本地服务端口号

    const license = await RTNCore.getLicenseInfo()
    if (!license.license?.valid) {
      const serial = 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX' //序列号
      const query = await RTNCore.queryLicense(serial)
      const result = await RTNCore.activateLicense(
        serial,
        query.modules.map(item => item.module),
      )
      if (result.success) {
        console.log('激活成功')
        setValid(true)
      } else {
        console.warn('激活失败')
      }
    } else {
      console.log('已激活')
      setValid(true)
    }
  }

  async function onMapLoad(controller: MapController) {
    // 添加数据源：高德 墨卡托 gcj02
    const sourceId = await controller.datasources.add({
      type: 'raster',
      name: 'gaode',
      data: {
        tiles: [
          'http://wprd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=7',
        ],
        tileSize: 256,
     },
    })

    if (!sourceId) return

    // 设置地图坐标系
    await controller.mapControl.setCRS('WebMercator', 'GCJ02')

    // 添加底图
    await controller.baseLayers.add({
      type: 'image',
      sourceId: sourceId,
      name: 'gaode_layer',
    })

    // 定位
    await controller.mapControl.flyTo({
      center: { x: 108, y: 30 },
      scale: 1 / 30000000,
    })
  }

  if (!valid) return null

  return <MapView onInited={onMapLoad} />
}
Copy