ThingJS與高德路徑規劃合做方案新鮮出爐！

地圖在城市大屏展現中扮演着必不可缺的角色。想展現動態路徑？ThingJS與高德路徑規劃合做方案新鮮出爐！

CMap 是基於 ThingJS 實現的地圖組件庫，咱們與高德地圖導航服務合做開發導航功能，用到其中的路徑規劃服務，這裏的web服務API對全部用戶開放，能夠輕鬆開發。

按照高德的路徑規劃結果，使用GCJ02座標系的谷歌影像，導航支持駕車、騎行與步行等交通方式，固然您能夠自行開發更多的出行方式，記得使用API前先獲取key：
https://lbs.amap.com/api/webs...

高德地圖路徑規劃服務API是一套以HTTP形式提供的步行、公交、駕車查詢及行駛距離計算接口，返回JSON 或 XML格式的查詢數據，用於實現路徑規劃功能的開發。適用場景包括線路查詢，以線路結果頁面形式展示換乘方案。根據返回線路數據，自行開發線路導航。

開發示例提供起點、終點的按鈕設置，根據不一樣交通方式來設定線路。點擊起點按鈕，則在地圖上單擊某處做爲起點，終點按鈕也是如此。如上圖所示。

ThingJS與高德路徑導航的開發示例以下：

var app = new THING.App();
// 設置app背景爲黑色
app.background = [0, 0, 0];

// 高德地圖key 免費版本有次數限制，此處僅供demo使用，若有須要請自行到高德地圖網站申請商業版key
var amapKey = '5791cdaf02f4d44fd979a9f89739d06c';

THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'],
    function () {
        var startCoord, endCoord;
        var map = app.create({
            type: 'Map',
            attribution: 'Google'
        });
        var tileLayer1 = app.create({
            type: 'TileLayer',
            id: 'tileLayer1',
            url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'
        });
        map.addLayer(tileLayer1);

        // 建立一個圖層展現起點終點的圖標以及導航結果
        var thingLayer = app.create({
            type: 'ThingLayer',
            name: 'thingLayer'
        });
        map.addLayer(thingLayer);
        // 飛到地球上某一個位置
        app.camera.earthFlyTo({
            lonlat: [116.4365, 39.97479],
            height: 6000,
            complete: function () {
                createUI();
            }
        });

        // 是否點擊選擇起點按鈕
        var selectStart = false;
        // 是否點擊選擇終點按鈕
        var selectEnd = false;
        // 導航方式選擇的UI
        var radio;

        /**
         * @param orgin 起點座標
         * @param destination 終點座標
         * @param transport 交通方式
         */
        function nav(origin, destination, transport) {
            // 先清除導航結果
            thingLayer.query('.GeoLine').destroy();
            // 構建查詢url 不一樣出行方式構建url的方式不一樣 具體請參考高德路徑規劃api
            var navUrl = '?origin=' + origin + '&destination=' + destination + '&key=' + amapKey;
            var drivingUrl = 'https://restapi.amap.com/v3/direction/driving';
            var bicyclingUrl = 'https://restapi.amap.com/v4/direction/bicycling';
            var walkingUrl = 'https://restapi.amap.com/v3/direction/walking';
            if (transport === '駕車') {
                navUrl = drivingUrl + navUrl;
            }
            else if (transport === '騎行') {
                navUrl = bicyclingUrl + navUrl;
            }
            else if (transport === '步行') {
                navUrl = walkingUrl + navUrl;
            }
            // 請求高德地圖導航服務
            $.ajax({
                type: 'GET',
                url: navUrl,
                dataType: 'json',
                success: function (data) {
                    // 先判斷是否成功
                    if (data.status === '1' || data.errcode === 0) {
                        var path;
                        // 不一樣交通方式返回接口結構不一樣，具體請參考高德路徑規劃api
                        if (transport !== '騎行') {
                            path = data.route.paths[0];
                        }
                        else {
                            path = data.data.paths[0];
                        }
                        var distance = path.distance;
                        var duration = path.duration;
                        var steps = path.steps;
                        var coordinates = [];
                        for (var i = 0; i < steps.length; i++) {
                            var polyline = steps[i].polyline;
                            var coords = polyline.split(';');
                            for (var j = 0; j < coords.length; j++) {
                                var coord = coords[j].split(',');
                                coordinates.push([parseFloat(coord[0]), parseFloat(coord[1])]);
                            }
                        }
                        // 將路徑規劃結果建立一個GeoLine對象,並添加到圖層
                        var road = app.create({
                            type: 'GeoLine',
                            name: 'road' + i,
                            coordinates: coordinates,
                            renderer: {
                                type: 'image',
                                lineType: 'Plane',
                                color: [255, 0, 0],
                                imageUrl: 'https://www.thingjs.com/uearth/uGeo/path.png',
                                // numPass: 6,
                                width: 6,
                                effect: true,
                                speed: 0.1
                            }
                        });
                        thingLayer.add(road);
                        // 飛到GeoLine對象
                        app.camera.earthFlyTo({
                            object: road
                        });
                    }
                }
            });
        }

        // 給地圖添加點擊事件,點擊地圖時選擇起點或終點,並在地圖上添加一個GeoPoint
        map.on('click', function (e) {
            if (selectStart) {
                startCoord = e.coordinates.toString();
                selectStart = false;
                document.body.style.cursor = 'default';
                var geoPoint = app.create({
                    type: 'GeoPoint',
                    name: 'startPoint',
                    coordinates: e.coordinates,
                    renderer: {
                        type: 'image',
                        url: 'https://www.thingjs.com/uearth/uGeo/start.png',
                        size: 3
                    }
                });
                thingLayer.add(geoPoint);
            }
            if (selectEnd) {
                endCoord = e.coordinates.toString();
                selectEnd = false;
                document.body.style.cursor = 'default';
                var geoPoint = app.create({
                    type: 'GeoPoint',
                    name: 'endPoint',
                    coordinates: e.coordinates,
                    renderer: {
                        type: 'image',
                        url: 'https://www.thingjs.com/uearth/uGeo/end.png',
                        size: 3
                    }
                });
                thingLayer.add(geoPoint);
                if (startCoord !== undefined && endCoord !== undefined) {
                    // 獲取當前radio選中的值
                    var transport = radio.getValue();
                    nav(startCoord, endCoord, transport);
                }
            }
        });

        // 建立UI界面
        function createUI() {
            // 建立選擇起點按鈕
            new THING.widget.Button('選擇起點', function () {
                selectStart = true;
                document.body.style.cursor = 'pointer';
                thingLayer.query('.GeoPoint').destroy();
                thingLayer.query('.GeoLine').destroy();
            });
            // 建立選擇終點按鈕
            new THING.widget.Button('選擇終點', function () {
                if (selectStart) {
                    return;
                }
                selectEnd = true;
                document.body.style.cursor = 'pointer';
            });
            // 建立一個配置界面組件
            var panel = new THING.widget.Panel({
                titleText: '交通方式',
                hasTitle: true,
                width: 150

            });
            panel.positionOrigin = 'TR';// top-right
            panel.position = ['100%', 0];
            // 添加 單選框 組件
            radio = panel.addRadio({ 'radio': '駕車' }, 'radio', ['駕車', '騎行', '步行']);
            // 監聽單選框選項改變的事件
            radio.on('change', function (ev) {
                nav(startCoord, endCoord, ev)
            })
        }
    });

ThingJS支持地圖在線進行二次開發和分享。