天地圖-第七篇-按軌跡運動

本文轉載自查看原文 2019-03-20 13:57 739 地圖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地圖</title>
    <style>
        /*設置地圖顯示大小*/
        #mapDiv{
            width: 600px;
            height: 400px;
        }
    </style>
    </head>
    <body onLoad="onLoad()"> 
        <!--地圖容器-->
        <div id="mapDiv"></div>
        <div> 
            <input type="button" value="開始" onClick="_CarTrack.start();"/>
            <input type="button" value="暫停" onClick="_CarTrack.pause();"/>
            <input type="button" value="結束" onClick="_CarTrack.stop();"/>
        </div>
    </body>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密鑰"></script>
    <script src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></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>
    <script type="text/javascript">
        var map;
        var drivingRoute;
        var zoom = 13;
        var _CarTrack;
        var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";    //起點圖標
        var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";        //終點圖標
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40069, 39.89945), zoom);
            map.addControl(TMAP_HYBRID_MAP);
            var config = {
                policy: 0,    //駕車策略
                onSearchComplete: searchResult    //檢索完成后的回調函數
            };
            drivingRoute = new T.DrivingRoute(map, config);
            searchDrivingRoute()
        }

        function searchDrivingRoute() {
            map.clearOverLays();
            var startLngLat = new T.LngLat(116.354060,39.905650);
            var endLngLat = new T.LngLat(116.428130,39.903550);
            //駕車路線搜索
            drivingRoute.search(startLngLat, endLngLat);
        }

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

        //添加起始點
        function createStartMarker(result) {
            var startMarker = new T.Marker(result.getStart(), {
                icon: new T.Icon({
                    iconUrl: startIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                })
            });
            map.addOverLay(startMarker);
            var endMarker = new T.Marker(result.getEnd(), {
                icon: new T.Icon({
                    iconUrl: endIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                })
            });
            map.addOverLay(endMarker);
        }
        
        function searchResult(result) {
            //添加起始點
            createStartMarker(result);
            obj = result;
            //獲取方案個數
            var routes = result.getNumPlans();
            for (var i = 0; i < routes; i++) {
                //獲得單條駕車方案結果對象
                var plan = result.getPlan(i);
                createRoute(plan.getPath());

            }
        }
    </script>
</html>

效果如圖

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 javascript運動系列第七篇——鼠標跟隨運動 DAX 第七篇：分組聚合 java基礎第七篇之接口第七篇：SpringBoot整合Redis 中文分詞《第七篇》第七篇：ORM框架SQLAlchemy ElasticSearch入門第七篇：分詞 angularcli 第七篇（service 服務） Flask初識，第七篇，Flask中的路由測試基礎【第七篇】測試報告