songchenchen
/
VehicleMonitor-WEB


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664
							<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> -->
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <script src="http://10.48.37.32:8080/arcgis_js_api/library/3.16/rgis/Rinit.js"></script>
    <!-- <script src="https://js.arcgis.com/3.16/"></script> -->

    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .webMap {
            height: 100%;
            width: 100%;
        }

        .legend {
            position: absolute;
            bottom: 120px;
            right: 24px;
            border-radius: 6px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            gap: 6px;
            z-index: 1;
            padding: 12px;
        }

        .legend>div {
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        #define {
            cursor: pointer;
            background: #fff;
            padding: 12px;
            text-align: center;
            width: 100px;
            position: absolute;
            border-radius: 8px;
        }

        .info {
            border: 1px solid #ccc;
            position: absolute;
            left: 0;
            right: 0;
            width: 60%;
            margin: auto;
            margin-top: 100px;
            z-index: 1;
            background: #fff;
            padding-bottom: 12px;
        }

        .info>.head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 12px;
            height: 40px;
            border-bottom: 1px solid #ccc;
        }

        .info>.content {
            display: flex;
            gap: 12px;
            padding: 12px;
        }

        .info>.content p {
            margin-top: 0px;
            margin-bottom: 6px;
        }

        .info>.foot {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .esriPopupWrapper>div:first-child,
        .esriPopupWrapper>div:nth-child(3) {
            display: none;
        }

        #cameraTop {
            width: 240px;
            height: 130px;
        }

        #cameraTop>foreignObject {
            width: 100%;
            height: 100%;
        }

        #cameraTop .content {
            font-size: 12px;
            width: 100%;
            height: 100%;
            border-radius: 6px;
            background: #fff;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        #cameraTop .content>*:first-child {
            display: flex;
            justify-content: space-between;
            padding: 6px;
            border-bottom: 1px solid #ccc;
            text-overflow: ellipsis;
            overflow: hidden;
        }


        #cameraTop .content>*:first-child>div:first-child {
            font-weight: bold;
            font-size: 14px;
        }

        #cameraTop .content>*:first-child>div:last-child {
            cursor: pointer;
            transform: scale(1.3);
        }

        #cameraTop .content>*:first-child>div:last-child:hover {
            color: red;
        }

        #cameraTop .content>*:last-child {
            outline-style: none;
            padding: 6px;
            padding-top: 0;
            margin: 0;
        }

        #cameraTop .content>*:last-child li {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .highligh {
            border: dashed #00f;
            border-radius: 10px;
        }

        .esriPopup .contentPane {
            padding: 0 !important;
            background-color: unset !important;
        }

        .outerPointer.left {
            z-index: 1;
            box-shadow: none;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            background: #fff;
        }

        .esriPopupWrapper {
            width: 200px !important;
            box-shadow: 0 4px 4px 0px #ccc !important;
        }

        #graphicsLayer3_layer>* {
            cursor: pointer;
        }

        .sizer .content {
            width: 100% !important;
        }

        #map111_graphics_layer {
            display: none !important;
        }
    </style>
</head>

<body>
    <div id="define" style="display: none;">
        <span>费奥军</span>
        <img src="" height="20" width="6" alt="">
        <span>费奥军11</span>
        <div>11231231</div>
    </div>
    <!-- <div id="cameraTop">
        <div class="content">
            <div>
                <div>XXX线路</div>
                <div>×</div>
            </div>
            <ul>
                <li><span>里程位置</span><span>k1+400km</span></li>
                <li><span>里程范围</span><span>k1+400km</span></li>
                <li><span>经纬度</span><span>k1+400km</span></li>
            </ul>
        </div>
    </div> -->
    <!-- <svg id="cameraTop" viewBox="0 0 220 122" font-size="12">
        <rect x="10" y="10" width="200" height="102" fill="#fff" stroke="#ccc" rx="6"></rect>
        <g>
            <text x="18" y="28">XXX线路</text>
            <text x="190" y="28">X</text>
        </g>
        <line x1="10" y1="38" x2="210" y2="38" stroke="#ccc"></line>
        <g>
            <text x="18" y="58">里程位置</text>
            <text x="200" y="58" text-anchor="end">k1+400km</text>
        </g>
        <g>
            <text x="18" y="78">里程范围</text>
            <text x="200" y="78" text-anchor="end">k1+400km</text>
        </g>
        <g>
            <text x="18" y="98">经纬度</text>
            <text x="200" y="98" style="text-anchor:end">k1+400km</text>
        </g>
    </svg> -->
    <!-- <div class=" info">
                <div class="head">
                    <div>报警信息提示</div>
                    <div>❓</div>
                </div>
                <div class="content">
                    <img src="" width="200" height="100" alt="">
                    <div>
                        <p>报警线路xx线路</p>
                        <p>危岩落石 ，上行， 里程位置k1+400km</p>
                        <p>2023.01.02 01:30:00</p>
                    </div>
                </div>
                <div class="foot">
                    <div
                        style="text-align: center;line-height: 36px;cursor: pointer;width: 100px;height: 36px;color: #fff;background-color: #2866dd;">
                        立即查看</div>
                    <div onclick="infoShow()"
                        style="border: 1px solid #2866dd ;text-align: center;line-height: 36px;cursor: pointer;;width: 100px;height: 36px;margin-left: 12px;">
                        我知道了</div>
                </div>
                </div> -->
    <div class="legend">
        <div>
            <img src="/map/blueTrain.png" width="32" height="32" alt="">
            重车线
        </div>
        <div>
            <img src="/map/greenTrain.png" width="32" height="32" alt="">
            空车线
        </div>
    </div>
    <div class="webMap" id="map111"></div>
    <script>
        function infoShow() {
            document.body.querySelector('.info').style.display = 'none'
        }
        function throttle(fn, delay) {
            let timer = null;
            return function () {
                let context = this;
                let args = arguments;
                if (!timer) {
                    timer = setTimeout(function () {
                        fn.apply(context, args);
                        timer = null;
                    }, delay);
                }
            }
        }
        self.addEventListener('message', (e) => {
            if (typeof e.data === "boolean") {
                cameraShow = e.data
                cameraPoints.forEach(({ graphic }) => {
                    e.data ? graphic.show() : (graphic.hide(), map.infoWindow.hide())
                })
                return
            }
            const { type, data } = e.data
            if (type === 1)
                vehicleList = data
            else if (type === 2)
                cameraList = data
            else if (type === 3) {
                searchInfo = data;
                const cameraTops = self.document.querySelectorAll("#cameraTop")
                cameraTops?.forEach?.(item => {
                    searchInfo.camera === item?.dataset?.index ?
                        item.classList.add("highligh") :
                        item.classList.remove("highligh")
                })
            }
            generatePoints()
        }, false)
        let mapLoaded = false
        let vehicleList = []
        let cameraList = []
        let blue
        let green
        let camera
        let panelPoints = []
        let cameraPoints = []
        let cameraShow = true
        let searchInfo = {
            camera: '',
            vehicle: ''
        }
        let topInfo = {
            1: {
                start: '神池南',
                end: '黄骅港'
            },
            2: {
                start: '神池南',
                end: '黄骅港'
            }
        }
        var map;
        var graphicsLayer;
        var mapObject;
        var Point
        var PictureMarkerSymbol
        var Graphic
        var webMercatorUtils
        var InfoTemplate
        var InfoWindow
        var GraphicsLayer
        require([
            "esri/map",
            "esri/InfoTemplate",
            "esri/dijit/InfoWindow",
            "esri/geometry/Extent",
            "esri/geometry/Point",
            "esri/geometry/Polyline",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/GraphicsLayer",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/TextSymbol",
            "esri/symbols/Font",
            "esri/Color",
            "esri/graphic",
            "esri/geometry/webMercatorUtils",
            "esri/SpatialReference",
            "esri/geometry/Circle",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/PictureMarkerSymbol",
            "dojo/domReady!"
        ], function (Map, _InfoTemplate, _InfoWindow, Extent, _Point, Polyline, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, _GraphicsLayer, SimpleLineSymbol,
            SimpleMarkerSymbol, TextSymbol, Font, Color, _Graphic, _webMercatorUtils, SpatialReference, Circle, SimpleFillSymbol, _PictureMarkerSymbol, SwipeTool) {
            Point = _Point
            PictureMarkerSymbol = _PictureMarkerSymbol
            Graphic = _Graphic
            webMercatorUtils = _webMercatorUtils
            InfoTemplate = _InfoTemplate
            InfoWindow = _InfoWindow
            GraphicsLayer = _GraphicsLayer
            map = new Map("map111", {
                logo: false,
                autoResize: true,
                // sliderPosition: "bottom-right",
                center: [114.906005859375, 38.38897705078125],
                scale: 4017396,
            });
            var layer = new ArcGISDynamicMapServiceLayer("http://10.48.37.32:8080/OneMapServer/rest/services/BaseMap_write/MapServer")
            // var layer = new ArcGISDynamicMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer")
            var xlLayer = new ArcGISDynamicMapServiceLayer("http://10.48.37.32:8080/OneMapServer/rest/services/SH_XL/MapServer")
            var czLayer = new ArcGISDynamicMapServiceLayer("http://10.48.37.32:8080/OneMapServer/rest/services/SH_CZ/MapServer")
            map.addLayer(layer);
            map.addLayer(xlLayer);
            map.addLayer(czLayer);
            graphicsLayer = new GraphicsLayer()
            map.addLayer(graphicsLayer)
            map.on('load', () => {
                mapLoaded = true
                blue = new PictureMarkerSymbol('/map/blueTrain.png', 32, 32)
                green = new PictureMarkerSymbol('/map/greenTrain.png', 32, 32)
                camera = new PictureMarkerSymbol('/map/camera1.png', 60, 60)
                // camera = new PictureMarkerSymbol('https://bpic.588ku.com/element_origin_min_pic/16/10/28/d438fb1a4c9de459ff7736b050f77199.jpg', 32, 32)
                // blue = new PictureMarkerSymbol('https://img0.baidu.com/it/u=1482373880,50717570&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500', 32, 32)
                generatePoints()
            })
            graphicsLayer.on('click', (e) => {
                console.log(e, 1111111)
                e.graphic.symbol.data &&
                    self.parent.postMessage({
                        name: e.graphic.symbol.name,
                        data: e.graphic.symbol.data
                    })

                //     if (e.graphic?.attributes?.show) {
                //         if (cameraPoints[e.graphic.attributes.index].active) {
                //             cameraPoints[e.graphic.attributes.index].active = false
                //             cameraPoints[e.graphic.attributes.index].topPanel.hide()
                //         } else {
                //             cameraPoints[e.graphic.attributes.index].active = true
                //             cameraPoints[e.graphic.attributes.index].topPanel.show()
                //         }
                //     }
            })
        })
        const vehicleList1 = [
            {
                "ids": null,
                "id": 79,
                "vehicleCode": "HXD1 7084A",
                "vehicleName": "",
                "createBy": "af09aac6340744d6be5b64b1697d7415",
                "createTime": "2023-10-18 15:05:32",
                "updateBy": "c0917e58bb254c7b825a6ce974e42d96",
                "updateTime": "2023-10-19 09:58:19",
                "terminalName": "车载终端01",
                "remark": "神华号",
                "vehicleTerminalDto": {
                    "id": "44",
                    "terminalCode": "CZZD06",
                    "vehicleCode": "HXD1 7084A",
                    "vehicleName": null,
                    "lineDir": "2",
                    "travelMile": 196500,
                    "terminalLongitude": "114.38200",
                    "terminalLatitude": "39.2284",
                    "railwayName": null,
                    "railwayCode": "SHTL"
                }
            },
            {
                "ids": null,
                "id": 80,
                "vehicleCode": "HXD1 7084B",
                "vehicleName": "",
                "createBy": "af09aac6340744d6be5b64b1697d7415",
                "createTime": "2023-10-18 15:11:50",
                "updateBy": "c0917e58bb254c7b825a6ce974e42d96",
                "updateTime": "2023-10-19 09:58:13",
                "terminalName": "车载终端02",
                "remark": "神华号",
                "vehicleTerminalDto": {
                    "id": "42",
                    "terminalCode": "CZZD08",
                    "vehicleCode": "HXD1 7084B",
                    "vehicleName": null,
                    "lineDir": "1",
                    "travelMile": 49822,
                    "terminalLongitude": "113.7253",
                    "terminalLatitude": "38.3942",
                    "railwayName": null,
                    "railwayCode": "SHTL"
                }
            }
        ]
        const cameraList1 = [
            {
                "ids": null,
                "id": 79,
                "vehicleCode": "HXD1 7084A",
                "vehicleName": "",
                "createBy": "af09aac6340744d6be5b64b1697d7415",
                "createTime": "2023-10-18 15:05:32",
                "updateBy": "c0917e58bb254c7b825a6ce974e42d96",
                "updateTime": "2023-10-19 09:58:19",
                "terminalName": "车载终端01",
                "remark": "神华号",
                installLongitude: "115.7253",
                installLatitude: "38.3942",
                cameraCode: "123",
                "vehicleTerminalDto": {
                    "id": "44",
                    "terminalCode": "CZZD06",
                    "vehicleCode": "HXD1 7084A",
                    "vehicleName": null,
                    "lineDir": "1",
                    "travelMile": 48018,
                    "terminalLongitude": "114.38200",
                    "terminalLatitude": "39.2284",
                    "railwayName": null,
                    "railwayCode": "SHTL"
                }
            },
            {
                "ids": null,
                "id": 80,
                "vehicleCode": "HXD1 7084B",
                "vehicleName": "",
                "createBy": "af09aac6340744d6be5b64b1697d7415",
                "createTime": "2023-10-18 15:11:50",
                "updateBy": "c0917e58bb254c7b825a6ce974e42d96",
                "updateTime": "2023-10-19 09:58:13",
                "terminalName": "车载终端02",
                "remark": "神华号",
                installLongitude: "114.7253",
                installLatitude: "38.3942",
                cameraCode: "234",
                "vehicleTerminalDto": {
                    "id": "42",
                    "terminalCode": "CZZD08",
                    "vehicleCode": "HXD1 7084B",
                    "vehicleName": null,
                    "lineDir": "1",
                    "travelMile": 49822,
                    "terminalLongitude": "113.7253",
                    "terminalLatitude": "38.3942",
                    "railwayName": null,
                    "railwayCode": "SHTL"
                }
            }
        ]
        function createTopPanelGraphic(point, item) {
            const scale = 2;
            let width = 160 * scale, height = 80 * scale
            const arrowLen = 50
            const cvs = document.createElement('canvas')
            cvs.width = width
            cvs.height = height
            const ctx = cvs.getContext('2d')
            ctx.translate(0.5, 0.5)
            ctx.save()
            ctx.beginPath()
            ctx.roundRect(20, 20, width - 40, height - 40, 6)
            ctx.fillStyle = '#fff'
            ctx.strokeStyle = '#ccc'
            ctx.shadowColor = item.data.lineDir === 1 ? '#006aef' : '#38e731'
            // ctx.shadowOffsetY = 4
            ctx.shadowBlur = 20
            ctx.stroke()
            ctx.fill()
            ctx.restore()
            if (searchInfo.vehicle === item.id) {
                ctx.save()
                ctx.beginPath()
                ctx.lineWidth = 4
                ctx.strokeStyle = '#00f'
                ctx.setLineDash([5, 5])
                ctx.roundRect(20, 20, width - 40, height - 40, 6)
                ctx.stroke()
                ctx.restore()
            }
            ctx.fillStyle = '#000'
            ctx.font = `bold ${12 * scale}px serif`
            ctx.textAlign = "right"
            ctx.fillText(item.direct ? item.start : item.end, width / 2 - arrowLen / 2 - 10, 30 * scale)
            // const x = width / 2 - arrowLen / 2, y = 20 * scale + 4 * scale, w = arrowLen - 10, h = 4 * scale
            const w = arrowLen - 10, h = 4 * scale
            ctx.save()
            ctx.translate(width / 2 - arrowLen / 2 + (arrowLen - 10) / 2, 20 * scale + 4 * scale + 4 * scale / 2)
            if (item.direct) {
                ctx.fillRect(-w / 2, -h / 2, w, h)
                ctx.fill(new Path2D(`m${arrowLen / 2 - 10} ${-h / 2 - 4}L${arrowLen / 2} 0L${arrowLen / 2 - 10} ${h / 2 + 4}z`))
            }
            else {
                ctx.rotate(Math.PI)
                ctx.fillRect(-w / 2, -h / 2, w, h)
                ctx.fill(new Path2D(`m${arrowLen / 2 - 10} ${-h / 2 - 4}L${arrowLen / 2} 0L${arrowLen / 2 - 10} ${h / 2 + 4}z`))
            }
            ctx.restore()
            ctx.textAlign = "left"
            ctx.fillText(item.direct ? item.end : item.start, width / 2 + arrowLen / 2 + 10, 30 * scale)
            ctx.textAlign = "center"
            ctx.fillText(item.code, width / 2, height - 20 * scale)
            const url = cvs.toDataURL('image/png', 1)
            const symbol = new PictureMarkerSymbol({ url, width: 160, height: 80, yoffset: 52, name: item.name, data: item.data })
            return new Graphic(point, symbol)
        }

        function createCameraInfo(point, item) {
            const temp = document.querySelector('#cameraTop').cloneNode(true)
            temp.style.display = 'block'
            const svgUrl = new XMLSerializer().serializeToString(temp)
            try {
                const url = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgUrl)))
                return new Graphic(point, new PictureMarkerSymbol({ url, width: 220, height: 122, yoffset: 52 }))
            } catch (e) {
                console.error(e)
            }
        }
        function closeInfo(index) {
            map.infoWindow.hide()
        }
        function generatePoints() {
            if (!mapLoaded) return
            graphicsLayer.clear()
            panelPoints = []
            cameraPoints = []
            for (let i = 0; i < vehicleList.length; i++) {
                const item = vehicleList[i];
                console.log(i, item)
                let picSymbol
                if (item.vehicleTerminalDto?.lineDir === 1)
                    picSymbol = blue
                else if (item.vehicleTerminalDto?.lineDir === 2)
                    picSymbol = green
                var point = new Point(parseFloat(+item.vehicleTerminalDto?.terminalLongitude), parseFloat(+item.vehicleTerminalDto?.terminalLatitude), map.spatialReference);
                panelPoints.push({ point, item })
                var webMercator = webMercatorUtils.geographicToWebMercator(point);
                point.x = webMercator.x
                point.y = webMercator.y
                picSymbol.name = item.remark
                const lineDir = item.vehicleTerminalDto?.lineDir
                picSymbol.data = {
                    lineDir: lineDir,
                    travelMile: item.vehicleTerminalDto?.travelMile,
                    railwayCode: item.vehicleTerminalDto?.railwayCode
                }
                const graphic = new Graphic(point, picSymbol, item, '')
                graphicsLayer.add(graphic)
                graphicsLayer.add(createTopPanelGraphic(point, {
                    start: topInfo[lineDir]?.start, end: topInfo[lineDir]?.end, code: '火车编号：' + item.vehicleTerminalDto?.vehicleCode, direct: lineDir === 1,
                    id: item.vehicleTerminalDto?.vehicleCode,
                    name: item.remark,
                    data: picSymbol.data
                })); // direct表示箭头方向：true向右，false向左
            }
            for (let i = 0; i < cameraList.length; i++) {
                const item = cameraList[i];
                var point = new Point(parseFloat(+item.installLongitude), parseFloat(+item.installLatitude), map.spatialReference);
                var webMercator = webMercatorUtils.geographicToWebMercator(point);
                point.x = webMercator.x
                point.y = webMercator.y
                const graphic = new Graphic(point, camera, { show: true, data: item, index: i, active: false }, '')
                const topPanel = new InfoTemplate(item.vehicleCode, `
                <div id="cameraTop" data-index="${item.cameraCode}" class="${item.cameraCode === searchInfo.camera ? 'highligh' : ''}">
                    <div class="content">
                        <div>
                            <div>${item.railwayName}</div>
                            <div onclick="closeInfo(${i})">×</div>
                        </div>
                        <ul>
                            <li><span>里程位置</span><span>${item.installMiles}</span></li>
                            <li><span>里程范围</span><span>${item.milesRange}</span></li>
                            <li><span>经纬度</span><span>${item.installLatitude},${item.installLongitude}</span></li>
                        </ul>
                    </div>
                </div>
                `)
                map.infoWindow.anchor = 'top'
                graphic.setInfoTemplate(topPanel)
                graphicsLayer.add(graphic)
                cameraPoints.push({ graphic, topPanel, point });
                cameraShow ? graphic.show() : graphic.hide();
                //     graphic.draw()
                if (searchInfo.camera === item.cameraCode) {
                    // map.infoWindow.show(point)
                    map.infoWindow.show(point);
                    map.infoWindow.setFeatures([graphic]);
                }
            }
        }
    </script>
</body>

</html>