<!-- * @Author: 蘋果園dog * @Date: 2020-11-13 14:48:40 * @LastEditTime: 2020-11-18 10:26:31 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \web\cesiumS\cesium\cesium\mytest\高德2.html --> <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>2</title> html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #container { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .testtool { position: absolute; top: 75px; left: 100px; background: gray; } </style> </head> <body> <div id="cesiumContainer"></div> <div class="info"> <div class="input-item"> <div class="input-item-prepend"> <span class="input-item-text" style="width:8rem;">請輸入關鍵字</span> </div> <input id='tipinput' type="text"> </div> <div class="input-item"> <div class="input-item-prepend"> <span class="input-item-text" style="width:8rem;">請輸入關鍵字</span> </div> <input id='tipinput2' type="text"> </div> <button id="btncallapp" onclick="beginGuide()">開始導航</button> </div> <script type="text/javascript"> let isPC = isThePC();//是PC端網頁打開 let isAndroid = isTheAndroid();//是移動端網頁打開 var viewer = init3D("cesiumContainer"); var scene = viewer.scene; let coord1 = null;//起始坐標 let coord2 = null;//終點坐標 let input1 = document.getElementById('tipinput'); let input2 = document.getElementById('tipinput2'); let startPoiName = '';//起始點名稱 let endPoiName = '';//終點名稱 AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {//搜索POI地址，和下面的代碼可以合並 var autoOptions = { input: 'tipinput' } var autoComplete = new AMap.Autocomplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ city: '41', pageSize: 1, pageIndex: 1, }); placeSearch.search('河南省', function (status, result) { }); AMap.event.addListener(autoComplete, "select", function (e) { startPoiName = e.poi.name; placeSearch.search(e.poi.name, function (status, result) { console.log("e.poi.name", e.poi.name); console.log("result", result); let lng = result.poiList.pois[0].location.lng; let lat = result.poiList.pois[0].location.lat; let coord1WGS84 = coordadd.gcj02towgs84(lng, lat); coord1 = [lng, lat]; cesiumUtil.removeEntitiesByName('daohangbill1'); cesiumUtil.addBillBordAirLive('daohangbill1', coord1WGS84[0], coord1WGS84[1], 0, 1, 0, 'http://ip:8083/cesium148/mytestcesium/billbords/weizhi.png', '起點', null, null, null); doWork(); }); }); }); AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {//搜索POI地址，和上面的代碼可以合並 var autoOptions = { input: 'tipinput2' } var autoComplete = new AMap.Autocomplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ city: '41', pageSize: 1, pageIndex: 1, }); placeSearch.search('河南省', function (status, result) { }); AMap.event.addListener(autoComplete, "select", function (e) { endPoiName = e.poi.name; placeSearch.search(e.poi.name, function (status, result) { console.log("e.poi.name", e.poi.name); console.log("result", result); let lng = result.poiList.pois[0].location.lng; let lat = result.poiList.pois[0].location.lat; let coord2WGS84 = coordadd.gcj02towgs84(lng, lat); coord2 = [lng, lat]; cesiumUtil.removeEntitiesByName('daohangbill2'); cesiumUtil.addBillBordAirLive('daohangbill2', coord2WGS84[0], coord2WGS84[1], 0, 1, 0, 'http://ip:8083/cesium148/mytestcesium/billbords/weizhi.png', '終點', null, null, null); doWork(); }); }); }) function doWork() {//確定起止點后干的事情,划線，導航等。 getRoute(RouteType.driving, (result) => { if (!result) { return; } console.log(result); let paths = result.paths[0].steps; let positions = []; for (let index = 0; index < paths.length; index++) { const path = paths[index]; let polyline = path.polyline; let polylinePoints = polyline.split(/[,]|;/); positions = positions.concat(polylinePoints); } positions = positions.map(Number); let positionsWGS84 = []; for (let index = 0; index < positions.length - 1; index += 2) { const pos = positions[index]; const pos2 = positions[index + 1]; let coordWGS84 = coordadd.gcj02towgs84(pos, pos2); positionsWGS84 = positionsWGS84.concat(coordWGS84); } cesiumUtil.removeEntitiesByName('daohangline'); var greenLine = viewer.entities.add({//加載線路到三維球 name: "daohangline", polyline: { positions: Cesium.Cartesian3.fromDegreesArray(positionsWGS84), width: 6, material: Cesium.Color.GREEN, clampToGround: true, }, }); viewer.flyTo(greenLine); }); } //調用高德webAPI查詢規划線路，這里頭有詳細信息，界面上后期可以豐富一下，詳細行走路徑，時間等。 function getRoute(type, callback) { if (input1.value && input2.value) { if (!type) { type = ''; } let origin = coord1.toString(); let destination = coord2.toString(); $.ajax({ url: 'https://restapi.amap.com/v3/direction/' + type, dataType: "json", async: true, data: { origin: origin, destination: destination, key: 'e71dcsdc024859f4cfb328a60cb75a03b' }, success: function (data) { if (data.status < 1) { callback(null); } else { callback(data.route); } }, error: function () { callback(null); } }); } }