基于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

You may also like...