導航應用可用于路徑規劃及仿真，并且常作為一個重要模塊融入到各類企業管理業務中，如面向物流管理、商品配送、車輛監控等場景，那么如何開發一個簡單的在線路徑導航應用呢？SuperMap Online為您解答~
在線路徑導航應用
1、申請密鑰選取服務，添加底圖并設定引數
SuperMap Online提供了多種云分析API，包括正/逆地理編碼、路徑導航、坐標轉換和本地搜索等，開發者可以通過HTTPS形式發起檢索請求，獲取回傳JSON或XML格式的檢索資料，可以基于此開發JavaScript、C#、C++、Java等語言的地圖應用，呼叫前需要在“我的密鑰”申請Key，
我的密鑰申請頁面
制作路徑導航應用需要呼叫本地搜索API實作起始點和終點的搜索及選取，同時結合路徑導航API提供的多種導航分析模式，如距離最短、不走高速和推薦模式等實作不同的路線規劃，使用服務前需要先設定底圖，坐標系等資訊，本示例呼叫了高德地圖作為底圖，
//添加底圖設定引數示例代碼
<script type="text/javascript">
var map, startPointFeature, endPointFeature, startPointSource, endPointSource, startPointLayer, endPointLayer, startPoint, endPoint, vectorSource
localSearchApi = "https://www.supermapol.com/iserver/services/localsearch/rest/searchdatas/China/poiinfos.rjson",
navigationApi = "https://www.supermapol.com/iserver/services/navigation/rest/navigationanalyst/China/pathanalystresults.rjson",
container = document.getElementById('popup'),
content = document.getElementById('popup-content'),
overlay = new ol.Overlay(({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
},
offset: [0, -50]
})),
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsed: false
},
zoom: true
}),
view: new ol.View({
center: [116.35, 39.89],
zoom: 10,
projection: "EPSG:4326",
multiWorld: true
}),
layers: [new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
})]
});
2、呼叫本地搜索API，實作起始點添加
通過呼叫本地搜索API，可以實作起始點、終點的搜索以及添加，本地搜索API可以根據用戶輸入的POI關鍵詞在指定范圍“city”內查找與之匹配的地理興趣點，并將其結果有序回傳，搜索結果也可以通過代碼進行設定，支持設定搜索范圍、回傳結果數量等資訊，
確認起始點并添加
//本地搜索服務呼叫示例代碼
function localSearch(method) {
var keywords, city = null;
if (method == 'start') {
keywords = $('#startpoint').val()
city = $('#startcity option:selected').text()
} else {
keywords = $('#endpoint').val()
city = $('#endcity option:selected').text()
}
if (!keywords) {
alert('請輸入搜索內容');
return;
}
$.ajax({
type: 'get',
url: localSearchApi,
data: {
'keywords': keywords,
'city': city,
'pageSize': 10,
'pageNum': 1,
'key': 'fvV2osxwuZWlY0wJb8FEb2i5'
},
dataType: 'json',
async: true,
success: function(result) {
showSearchResult(method, result.poiInfos);
},
error: function(data) {
alert('搜索失敗，請稍后再試');
}
});
}
3、結合路徑導航API，打造路徑導航應用
確定好起始點、終點后，即可開始進行路徑導航，路徑導航API可根據分析所需的起點、經過點、終點生成一條導航路徑，支持距離最短、不走高速、推薦模式三種導航模式，
路徑導航模式切換
//路徑導航服務呼叫示例代碼
function navigationAnalyst(routeType) {
if (!startPoint) {
alert('請確定起點')
return false;
} else if (!endPoint) {
alert('請確定終點')
return false;
}
overlay.setPosition(undefined);
map.removeOverlay(overlay);
if (vectorSource) {
vectorSource.clear()
}
var data = https://www.cnblogs.com/zhuimengdeyuanyuan/archive/2021/12/15/[{"startPoint": {
"x": startPoint[0],
"y": startPoint[1]
},
"endPoint": {
"x": endPoint[0],
"y": endPoint[1]
},
"routeType": routeType
}]
$.ajax({
type: 'get',
url: navigationApi,
data: {
pathAnalystParameters: JSON.stringify(data),
key: 'fvV2osxwuZWlY0wJb8FEb2i5'
},
dataType: 'json',
async: true,
success: function(result) {
var points = []
result[0].pathPoints.forEach(element => {
var point = [element.x, element.y]
points.push(point)
});
roadLine = new ol.geom.LineString(points);
vectorSource = new ol.source.Vector({
features: [new ol.Feature(roadLine)]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 5
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
});
map.addLayer(vectorLayer);
let x = (startPoint[0] - endPoint[0]) / 10;
let y = (startPoint[1] - endPoint[1]) / 10;
let displayRange = ol.extent.boundingExtent([
[parseFloat(startPoint[0]) + x, parseFloat(startPoint[1]) + y],
[parseFloat(endPoint[0]) - x, parseFloat(endPoint[1]) - y]
]);
map.getView().fit(displayRange, map.getSize());
var length = result[0].pathLength / 1000;
content.innerHTML = "全程" + length.toFixed(1) + "公里";
overlay.setPosition([endPoint[0], endPoint[1]]);
map.addOverlay(overlay);
},
error: function(data) {
alert('導航失敗，請稍后再試');
}
});
}
一個簡單的在線路徑導航應用就制作完成啦，通過設定引數，還可以獲得當前道路長度，下一道路轉彎方向和導航所需時間等導航引導資訊，
示例代碼百度云鏈接：https://pan.baidu.com/s/1nrZcHgzAxUBgZCQhAjUXvw
提取碼：3orq
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/381867.html
標籤：其他
上一篇：軟體系統登錄功能漫談