react typescript openlayer 引入天地图

要在 React TypeScript 项目中引入天地图作为底图，可以按照以下步骤进行操作：

1. 在 `index.html` 中引入天地图的 JavaScript API：

   <script src="http://api.tianditu.gov.cn/api?v=4.0"></script>

2. 在 React 组件中创建天地图图层：

   const tdtLayer = new ol.layer.Tile({
     source: new ol.source.XYZ({
       url: 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?' +
         'service=wmts&request=GetTile&version=1.0.0&layer=img' +
         '&style=default&format=tiles&tilematrixset=w&' +
         'tilecol={x}&tilerow={y}&tilematrix={z}&tk={key}',
       projection: 'EPSG:3857',
       tileGrid: ol.tilegrid.createXYZ({
         maxZoom: 18
       }),
       attributions: [
         new ol.Attribution({
           html: 'Map data © <a href="http://tianditu.gov.cn/">Tianditu</a>'
         })
       ],
       crossOrigin: 'anonymous'
     })
   });

注意，需要将 `{key}` 替换为申请到的天地图密钥。

3. 在 React 组件的 render 方法中添加一个 div 元素来作为 OpenLayers 地图的容器，并将天地图图层添加到地图中：

   render() {
     return (
       <div id="map"></div>
     );
   }

   componentDidMount() {
     const map = new ol.Map({
       target: 'map',
       layers: [tdtLayer],
       view: new ol.View({
         center: ol.proj.fromLonLat([116.39, 39.9]),
         zoom: 10
       })
     });
   }

这样就可以在 React TypeScript 项目中使用天地图作为底图了。