腾讯地图gl版在React+TS中的灵活应用：打造互动式地图体验

2024-01-03 21:17:59

在如今数字化的时代，地图已经成为不可或缺的一环，它可以帮助我们了解地理位置、规划旅行路线，甚至进行商业决策。而腾讯地图作为国内领先的地图服务商，提供了丰富的API和工具，让我们能够轻松创建自己的地图应用。

腾讯地图gl版是一款功能强大的地图开发工具，它基于WebGL技术，具有性能高、可扩展性强等优点。同时，腾讯地图gl版还提供了丰富的API和组件，让开发者可以轻松实现地图的加载、标注、路线规划、区域框选等功能。

为了实现地图js的按需加载，我们可以将腾讯地图gl的链接封装成一个Pro，这样就可以在需要的时候再加载地图。具体步骤如下：

在项目中安装腾讯地图gl的npm包。

npm install tencentcloud-map-gl --save

在项目中创建一个新的组件，例如Map.tsx。

import * as React from "react";
import TencentMapGL, { BaseLayerType, SourceType } from "tencentcloud-map-gl";

const Map = () => {
  const mapRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (!mapRef.current) {
      return;
    }

    const map = new TencentMapGL.Map({
      container: mapRef.current,
      style: `mapbox://styles/mapbox/streets-v11`,
      center: [116.405285, 39.904989],
      zoom: 11,
    });

    return () => {
      map.remove();
    };
  }, [mapRef]);

  return <div ref={mapRef} style={{ width: "100%", height: "100%" }} />;
};

export default Map;

在项目中创建一个新的页面，例如MapPage.tsx。

import * as React from "react";
import Map from "./Map";

const MapPage = () => {
  return (
    <div>
      <Map />
    </div>
  );
};

export default MapPage;

在项目的路由文件中，添加一个新的路由，例如：

import * as React from "react";
import { Route, Switch } from "react-router-dom";
import MapPage from "./MapPage";

const App = () => {
  return (
    <Switch>
      <Route path="/map" component={MapPage} />
    </Switch>
  );
};

export default App;

运行项目，访问/map页面，就可以看到腾讯地图gl版了。

除了地图的加载，腾讯地图gl版还提供了丰富的API和组件，让开发者可以轻松实现地图的标注、路线规划、区域框选等功能。以下是一些示例代码：

// 地图标注
const marker = new TencentMapGL.Marker({
  position: [116.405285, 39.904989],
});

marker.addTo(map);

// 路线规划
const directions = new TencentMapGL.Directions({
  container: "directions",
  accessToken: "YOUR_ACCESS_TOKEN",
});

directions.setOrigin([116.405285, 39.904989]);
directions.setDestination([116.481291, 39.990468]);

directions.on("load", () => {
  directions.setRouteIndex(0);
});

// 区域框选
const draw = new TencentMapGL.Draw({
  displayControlsDefault: false,
  controls: {
    polygon: true,
  },
});

map.addControl(draw);

draw.on("draw.create", (e) => {
  console.log(e.features[0].geometry);
});