概述

目前大部分地图服务使用的都是百度、高德、谷歌，react集成这些服务都有相关介绍；但对于天地图的集成相对资料比较少，在这里简单介绍一下react如何使用天地图。

具体实现

第一步：注册成为天地图开发者

• 注册传送门：天地图。
• 注册成功后，申请一个服务许可（Key）

第二步：在项目根目录新建一个地图插件plugin.js，内容如下：

export default (api, opts) => {
  api.addHTMLHeadScript({
    type:"text/javascript",
    src: 'http://api.tianditu.gov.cn/api?v=4.0&tk=申请的服务许可（Key）',
 });
};

第三步：在.umirc.js配置文件中引入地图插件plugin.js

plugins: [
 ['umi-plugin-react', {
    antd: false,
    dva: false,
    dynamicImport: false,
    title: 'tianditu',
    dll: false,
    routes: {
      exclude: [
        /components\//,
      ],
    },
  }],
  ['./plugin.js']
],

第四步：使用天地图

import {Component} from 'react'

export default class MapView extends Component {

  componentDidMount() {
    this.initMap()
  }

  initMap = () => {
    // 需要使用服务API
    const imageUrl = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer?"+"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=World_Imagery&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=申请的服务许可（Key）";
    //创建自定义图层对象
    const lay = new window.T.TileLayer(imageUrl, {minZoom: 1, maxZoom: 18});
    const config = {layers: [lay]};
    //初始化地图对象
    const map = new window.T.Map("map", config);
    //设置显示地图的中心点和级别
    map.centerAndZoom(new window.T.LngLat(116.3974642754, 39.9087692474), 18);
    //允许鼠标滚轮缩放地图
    map.enableScrollWheelZoom();
    //创建标注对象
    const marker = new window.T.Marker(
      new window.T.LngLat(116.3974642754, 39.9087692474));
    //向地图上添加标注
    map.addOverLay(marker);

  }

  render() {
    return <div style={{width: '100%', height: '100%'}} id="map"/>
  }
}

效果图

image.png

项目目录

image.png

结语

• 项目使用umi脚手架搭建，umi使用传送门：umi使用教程
• 项目源码地址：https://github.com/yuwy691/tianditu.git