fuyuhang
/
Project_yhfu
zrcadlo http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_trafficTransfer"></title>
    <script type="text/javascript" include="bootstrap-css,jquery" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
    <style>
        .transferSolution {
            cursor: pointer;
            margin: 10px 10px;
        }

        .transferInfo a {
            cursor: pointer;
        }

        table {
            width: 90%;
        }

        #trafficRes {
            margin: 5px;
        }

        .ol-popup {
            position: absolute;
            background-color: white;
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            border-radius: 5px;
            border: 1px solid #cccccc;
            top: 0;
            right: 0;
            min-width: 280px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<div id="startMarker">
    <img src="../img/start_trans.png"/>
</div>
<div id="endMarker">
    <img src="../img/end_trans.png"/>
</div>
<div id="popup" class="ol-popup">
    <div id="popup-content"></div>
</div>
<script type="text/javascript">
    var map, startMarker, endMarker, container, content, tempMarker,
        stopSourceLayer, roadSourceLayer, tempMarkerSourceLayer, tempRedSourceLayer,
        info, paths = {transSolutions: null, solutions: null},
        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-changchun/rest/maps/长春市区图",
        serviceUrl = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/traffictransferanalyst-sample/restjsr/traffictransferanalyst/Traffic-Changchun";
    var extent = [48.4, -7668.25, 8958.85, -55.58];
    var projection = new ol.proj.Projection({
        code:'',
        extent: extent,
        units: 'm'
    });
    new ol.supermap.MapService(baseUrl).getMapInfo(function (serviceResult) {
        var mapJSONObj = serviceResult.result;
        map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [4700, -3600],
                zoom: 2,
                projection: projection,
                multiWorld: true
            })
        });
        var options = ol.source.TileSuperMapRest.optionsFromMapJSON(baseUrl, mapJSONObj);
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest(options)
        });
        stopSourceLayer = new ol.source.Vector();
        roadSourceLayer = new ol.source.Vector();
        tempRedSourceLayer = new ol.source.Vector();
        tempMarkerSourceLayer = new ol.source.Vector();
        map.addLayer(layer);

        //设置起始、终止点并添加到地图上
        startMarker = new ol.Overlay({
            element: document.getElementById('startMarker'),
            positioning: 'center-center',
            position: [3111.42533851, -5527.73795456]
        });
        endMarker = new ol.Overlay({
            element: document.getElementById('endMarker'),
            positioning: 'center-center',
            position: [6055.3431955, -4270.0725196]
        });
        map.addOverlay(startMarker);
        map.addOverlay(endMarker);
        initResultInfoWin();
        execTransSolutionsQuery('LESS_TIME');  //交通换乘的有4种方式:'LESS_TIME','MIN_DISTANCE','LESS_WALK','LESS_TRANSFER'
    });

    function initResultInfoWin() {
        container = document.getElementById('popup');
        content = document.getElementById('popup-content');
        info = new ol.control.Control({element: container});
        info.setMap(map);
        info.update = function (transSolutions, transGuide) {
            if (!transSolutions) {
                return;
            }
            var solution, lines, line, dispStatus = "block";
            $("<div class='panel-heading' style='background:steelblue;color: honeydew'>" + resources.text_startPoint + "：" + "省汽修&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + resources.text_endPoint + "：" + "中安大厦<br/>" + resources.text_trafficTransferScheme + "（" + resources.text_minTime + "）</div>").appendTo(content);
            for (var i = 0, iLen = transSolutions.length; i < iLen; i++) {
                solution = transSolutions[i];
                //显示方案头
                var title = "";
                for (var ii = 0, iiLen = solution.linesItems.length; ii < iiLen; ii++) {
                    lines = solution.linesItems[ii];
                    for (var iii = 0, iiiLen = lines.lineItems.length; iii < iiiLen; iii++) {
                        line = lines.lineItems[iii];
                        if (iii !== iiiLen - 1) {
                            title += line.lineName + "/";
                        } else {
                            title += line.lineName;
                        }
                    }
                    if (ii !== iiLen - 1) {
                        title += " → ";
                    }
                }
                $("<div class='transferSolution' id='transferSolution-" + i + "'><span class='transferIndex'>" + resources.text_scheme + (i + 1) + "：</span>" + title + "</div>").appendTo(content);
                if (i !== 0) {
                    dispStatus = "none";
                }
                var list = $("<div class='transferInfo' id='transferInfo-" + i + "' style='display:" + dispStatus + "'></div>");
                list.appendTo(content);
                //默认显示方案1下的table
                if (i === 0) {
                    fillTransferInfo(transGuide, transSolutions, 0).appendTo(list);
                    setPopup();
                }
            }
            //点击方案时显示对应的table
            bindSolutionsClickEvent();
        };
        map.addControl(info);
    }

    function execTransSolutionsQuery(tactic) {
        paths.points = [26, 180];
        var params = new SuperMap.TransferSolutionParameters({
            solutionCount: 6,        //最大换乘导引数量
            transferTactic: tactic,  //公交换乘策略类型
            walkingRatio: 10,        //步行与公交的消耗权重比
            points: paths.points     //起始点坐标
        });
        new ol.supermap.TrafficTransferAnalystService(serviceUrl)
            .analysisTransferSolution(params, function (serviceResult) {
                transferSolutionsSucceed(serviceResult.result);
            });
    }

    function transferSolutionsSucceed(result) {
        clearLayer();
        //在地图上叠加符号信息
        var transGuide = result.defaultGuide,
            transSolutions = result.solutionItems,
            solutions = [];
        for (var j = 0; j < transSolutions.length; j++) {
            var linesItems = transSolutions[j].linesItems, transSolution = [];
            for (var jj = 0; jj < linesItems.length; jj++) {
                var lineItems = linesItems[jj].lineItems, items = [];
                for (var jjj = 0; jjj < lineItems.length; jjj++) {
                    var lineItem = lineItems[jjj];
                    items.push(lineItem
                    );
                }
                transSolution.push(items);
            }
            solutions.push(transSolution);
        }
        paths["transSolutions"] = transSolutions;
        paths["solutions"] = solutions;
        if (!transGuide || !transSolutions) return;
        info.update(transSolutions, transGuide);
    }

    function fillTransferInfo(transGuide, transSolutions, indexX) {
        clearLayer();
        //在地图上显示路线
        if (transGuide && transGuide.items.length) {
            var items = transGuide.items;
            for (var itemIndex = 0, itemLen = items.length; itemIndex < itemLen; itemIndex++) {
                var geometry = items[itemIndex].route;
                var pointsList = [];
                for (var k = 0; k < geometry.points.length; k++) {
                    pointsList.push([geometry.points[k].x, geometry.points[k].y]);
                }
                var roadLine = new ol.geom.LineString(pointsList);
                roadSourceLayer.addFeatures([new ol.Feature(roadLine)]);
                var roadResultLayer = new ol.layer.Vector({
                    source: roadSourceLayer,
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: 'dodgerblue',
                            width: 3
                        })
                    })
                });
                map.addLayer(roadResultLayer);
            }
        }
        var table = $("<table id='trafficRes' border='1'></table>");
        var startStop = $("<tr></tr>");
        $("<td class='start_transfer' width='10px'></td>").appendTo(startStop);
        $("<td colspan='2'><span class='busLink bgSpan'><span style='display:none'>" + transGuide.items[0].startPosition.x + "," + transGuide.items[0].startPosition.y + "</span>" + transGuide.items[0].startStopName + "</span></td>").appendTo(startStop);
        startStop.appendTo(table);
        var indexY = 0;
        for (var m = 0, mLen = transGuide.items.length; m < mLen; m++) {
            var item = transGuide.items[m];
            var tr2 = $("<tr></tr>");
            if (item.isWalking) {
                $("<td class='step_transfer' ></td>").appendTo(tr2);
                $("<td>" + resources.text_walkTO + "<a class='busLink'><span style='display:none'>" + item.endPosition.x + "," + item.endPosition.y + "</span>" + item.endStopName + "</a></td>").appendTo(tr2);
                $("<td>" + parseInt(item.distance) + resources.msg_m + "</td>").appendTo(tr2);
            } else {
                var otherLines = transSolutions[indexX].linesItems[indexY],
                    links = "";
                if (otherLines && otherLines.lineItems.length > 1) {
                    links = "</br>" + resources.text_alsoRide;
                    for (var oti = 0, otLen = otherLines.lineItems.length; oti < otLen; oti++) {
                        var line = otherLines.lineItems[oti];
                        if (item.lineName !== line.lineName) {
                            var other = indexX + "," + indexY + "," + oti + ",0";
                            links += "<a class='busLink'><span style='display:none'>" + other + "</span>" + line.lineName + "</a>";
                        }
                    }
                }
                $("<td class='bus_transfer'></td>").appendTo(tr2);
                var points = item.route.points, pointStr = "";
                for (var i = 0; i < points.length; i++) {
                    pointStr += points[i].x + " " + points[i].y;
                    if (i != points.length - 1) {
                        pointStr += ",";
                    }
                }
                $("<td>" + resources.text_ride + "<a class='busLink'>" + item.lineName + "<span style='display:none'>" + pointStr + "</span></a>" + resources.text_debus1 + "<a class='busLink'><span style='display:none'>" + item.endPosition.x + "," + item.endPosition.y + "</span>" + item.endStopName + "</a>" + resources.text_debus2 + links + "</td>").appendTo(tr2);
                $("<td>" + item.passStopCount + resources.text_stops + "</td>").appendTo(tr2);
                indexY++;
            }
            tr2.appendTo(table);
        }
        var endStop = $("<tr></tr>");
        endStop.appendTo(table);
        $("<td class='end_transfer' width='10px'></td>").appendTo(endStop);
        $("<td colspan='2'><span class='busLink bgSpan'><span style='display:none'>" + transGuide.items[transGuide.items.length - 1].endPosition.x + "," + transGuide.items[transGuide.items.length - 1].endPosition.y + "</span>" + transGuide.items[transGuide.items.length - 1].endStopName + "</span></td>").appendTo(endStop);
        return table;
    }

    function bindSolutionsClickEvent() {
        for (var i = 0; i < 6; i++) {
            $("#transferSolution-" + i).click(toggleGuideItems);
        }

        function toggleGuideItems(e) {
            for (var j = 0; j < 6; j++) {
                $("#transferInfo-" + j).hide(500);
            }
            var id = parseInt(e.currentTarget.id.split("-")[1]);
            $("#transferInfo-" + id).show(500);
            //构造传入iServer服务器的transferLines
            var transLines = [];
            for (var i = 0; i < paths.solutions[id].length; i++) {
                var trans = paths.solutions[id][i][0];
                transLines.push(trans);
            }
            execTransPathQuery(id, transLines);
        }
    }

    //在popup里点击每个站点、交通路线时，在地图上对应显示并进行强调
    function setPopup() {
        $(".busLink").click(function () {
            if (tempMarkerSourceLayer) {
                tempMarkerSourceLayer.clear();
            }
            if (tempRedSourceLayer) {
                tempRedSourceLayer.clear();
            }
            var points = this.children[0].innerText.split(",");
            //添加换乘点的marker
            if (points.length === 2) {
                tempMarker = new ol.geom.Point([points[0], points[1]]);
                var iconStyle_marker = new ol.style.Style({
                    image: new ol.style.Icon(({
                        src: '../img/marker.png',
                        anchor: [0.5, 1]
                    }))
                });
                var tempMarkerFeature = new ol.Feature(tempMarker);
                tempMarkerFeature.setStyle(iconStyle_marker);
                tempMarkerSourceLayer.addFeatures([tempMarkerFeature]);
                var markerLayer = new ol.layer.Vector({
                    source: tempMarkerSourceLayer
                });
                map.addLayer(markerLayer);
                var coords = tempMarker.getCoordinates();
                map.getView().setCenter([parseInt(coords[0]), parseInt(coords[1])]);
                map.getView().setZoom(3)
            } else if (points.length === 4 && points[3] === "0") {
                var linesItems = paths["solutions"][points[0]], lineStr = "[";
                for (var i = 0; i < linesItems.length; i++) {
                    var lineItem = linesItems[i][0], j = parseInt(points[1]);
                    if (i !== j) {
                        lineStr += lineItem;
                    } else if (i === j) {
                        lineItem = linesItems[points[1]][points[2]];
                        lineStr += lineItem;
                    }
                    if (i !== linesItems.length - 1) {
                        lineStr += ",";
                    }
                }
                lineStr += "]";
                $("#transferInfo-" + points[0]).hide(500);
                execTransPathQuery(points[0], lineStr);
                $("#transferInfo-" + points[0]).show(500);
            } else {
                var linePoints = [];
                for (var i = 0; i < points.length; i++) {
                    var arr = points[i].split(" ");
                    var point = [parseInt(arr[0]), parseInt(arr[1])];
                    linePoints.push(point);
                }
                var lineString = new ol.geom.LineString(linePoints);
                tempRedSourceLayer.addFeatures([new ol.Feature(lineString)]);
                var tempRedLayer = new ol.layer.Vector({
                    source: tempRedSourceLayer,
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            color: 'red',
                            width: 6
                        })
                    })
                });
                map.addLayer(tempRedLayer);
                //设置线路中心
                var lineCenter = [];
                if ((linePoints.length) % 2 == 0) {
                    lineCenter = [linePoints[linePoints.length / 2][0], linePoints[linePoints.length / 2][1]];
                    map.getView().setCenter([parseInt(lineCenter[0]), parseInt(lineCenter[1])]);
                } else {
                    lineCenter = [linePoints[(linePoints.length + 1) / 2][0], linePoints[(linePoints.length + 1) / 2][1]];
                    map.getView().setCenter([parseInt(lineCenter[0]), parseInt(lineCenter[1])]);
                }
                map.getView().setZoom(3);
            }
        });
    }

    function execTransPathQuery(id, transLines) {
        var params = new SuperMap.TransferPathParameters({
            points: paths["points"],
            transferLines: transLines
        });
        new ol.supermap.TrafficTransferAnalystService(serviceUrl)
            .analysisTransferPath(params, function (serviceResult) {
                $("#transferInfo-" + id).empty();
                var transGuide = serviceResult.result;
                transSolutions = paths["transSolutions"];
                map.getView().setCenter([4700, -3600]);
                map.getView().setZoom(2);
                fillTransferInfo(transGuide, transSolutions, id).appendTo($("#transferInfo-" + id));
                setPopup();
            });
    }

    function clearLayer() {
        if (roadSourceLayer) {
            roadSourceLayer.clear();
        }
        if (tempMarkerSourceLayer) {
            tempMarkerSourceLayer.clear();
        }
        if (tempRedSourceLayer) {
            tempRedSourceLayer.clear();
        }
    }
</script>
</body>
</html>