基于Leaflet的室内地图最短路径查询部分
使用LeafLet做的最短路径查询,服务使用的是前两篇博文中的地图服务,只是 将OpenLayer换成了LeafLet;
效果图:
核心部分代码如下:
var route = {
num: false,
startPoint: null,
endPoint: null,
routingLayer: null,
startMarker: null,
endMarker: null
};
initRoutingControlUI();
/**
* 添加路径规划图标
*/
function initRoutingControlUI() {
var layerIcon = $('<div class="toolList route" onclick="startRouting()"></div>');
$('body').append(layerIcon);
}
/**
* 开始路径导航
*/
function startRouting() {
if (map.hasLayer(route.routingLayer)) {
clearPath();
map.removeEventListener("click");
return;
}
map.fitBounds([[34.825008392334, 113.557716369629],
[34.8254280090332, 113.558219909668]]);
map.addEventListener("click", function (e) {
if (route.num) {
route.endPoint = [e.latlng.lng, e.latlng.lat];
route.num = false;
route.endMarker = addMarker(e.latlng.lat, e.latlng.lng, "end.png");
var viewParams = [
'x1:' + route.startPoint[0], 'y1:' + route.startPoint[1],
'x2:' + route.endPoint[0], 'y2:' + route.endPoint[1]
, 'fnumber:'+layerManager.getCurrentFloor()
];
route.routingLayer = L.tileLayer.wms(mapSource.Route.url, {
layers: mapSource.Route.layer,
crs: L.CRS.EPSG4326,
format: 'image/png',
transparent: true,
maxZoom: 40,
minZoom: 14,
viewparams: viewParams.join(";")
}).addTo(map);
} else {
clearPath();
route.num = true;
route.startPoint = [e.latlng.lng, e.latlng.lat];
route.startMarker = addMarker(e.latlng.lat, e.latlng.lng, "start.png");
}
})
}
/**
* 标记地图
*/
function addMarker(lat, lng, str) {
var marPath = "img/" + str;
var myIcon = L.icon({
iconUrl: marPath,
iconSize: [45, 45],
iconAnchor: [22, 45],
popupAnchor: [-3, -76],
shadowSize: [68, 95],
shadowAnchor: [22, 94]
});
var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map);
return marker;
}
/**
* 清除最短路径结果
*/
function clearPath() {
if (map.hasLayer(route.routingLayer)) {
map.removeLayer(route.routingLayer);
map.removeLayer(route.startMarker);
map.removeLayer(route.endMarker);
}
route.startPoint = null;
route.endPoint = null;
route.num = false;
}
转载自:https://blog.csdn.net/GISuuser/article/details/79081658