在React中使用天地图显示两点之间运动轨迹index.html中添加天地图所使用的js文件相关js代码显示效果参

`index.html`中添加天地图所使用的js文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=密钥"></script>
    <script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

相关js代码


import {useEffect, useState} from "react";


function App() {
    const [map, setMap] = useState(null);
    const [drivingRoute, setDrivingRoute] = useState(null);
    const [zoom, setZoom] = useState(13);
    const [CarTrack, setCarTrack] = useState(null);
    const startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";    //起点图标
    const endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";        //终点图标

    useEffect(() => {
        setMap(new window.T.Map('mapDiv'));
    }, []);

    useEffect(() => {
        if (map) {
            onLoad()
        }
    }, [map])

    useEffect(() => {
        if (map && drivingRoute) {
            searchDrivingRoute();
        }
    }, [map, drivingRoute]);

    function onLoad() {
        map.centerAndZoom(new window.T.LngLat(116.40069, 39.89945), zoom);
        map.addControl(window.TMAP_HYBRID_MAP);
        const config = {
            policy: 0,    //驾车策略
            onSearchComplete: searchResult    //检索完成后的回调函数
        };
        const drivingRouteInst = new window.T.DrivingRoute(map, config);

        setDrivingRoute(drivingRouteInst);
    }

    function searchDrivingRoute() {
        map.clearOverLays();
        const startLngLat = new window.T.LngLat(116.354060,39.905650);
        const endLngLat = new window.T.LngLat(116.428130,39.903550);
        //驾车路线搜索
        drivingRoute.search(startLngLat, endLngLat);
    }

    function createRoute(lnglats) {
        const CarTrackInst = new window.T.CarTrack(map, {
            interval: 20,
            speed: 10,
            dynamicLine: true,
            Datas: lnglats,
            polylinestyle: {color: "#2C64A7", width: 5, opacity: 0.9}
        })

        setCarTrack(CarTrackInst);
    }

    //添加起始点
    function createStartMarker(result) {
        const startMarker = new window.T.Marker(result.getStart(), {
            icon: new window.T.Icon({
                iconUrl: startIcon,
                iconSize: new window.T.Point(44, 34),
                iconAnchor: new window.T.Point(12, 31)
            })
        });
        map.addOverLay(startMarker);
        const endMarker = new window.T.Marker(result.getEnd(), {
            icon: new window.T.Icon({
                iconUrl: endIcon,
                iconSize: new window.T.Point(44, 34),
                iconAnchor: new window.T.Point(12, 31)
            })
        });
        map.addOverLay(endMarker);
    }

    function searchResult(result) {
        //添加起始点
        createStartMarker(result);
        //获取方案个数
        const routes = result.getNumPlans();
        for (let i = 0; i < routes; i++) {
            //获得单条驾车方案结果对象
            const plan = result.getPlan(i);
            createRoute(plan.getPath());

        }
    }

    function handleStart() {
        CarTrack.start();
    }

    function  handlePause() {
        CarTrack.pause()
    }

    function handleEnd() {
        CarTrack.stop()
    }
  return (
      <>
          <div>首页</div>
          <div id="mapDiv" style={{width: 1000, height: 1000}}></div>
          <input type="button" value="开始" onClick={handleStart}/>
          <input type="button" value="暂停" onClick={handlePause}/>
          <input type="button" value="结束" onClick={handleEnd}/>
      </>
  )
}

export default App

在React中使用天地图显示两点之间运动轨迹

index.html中添加天地图所使用的js文件

相关js代码

显示效果

参考资料

`index.html`中添加天地图所使用的js文件