CINXE.COM
丝路诗路
<!DOCTYPE html> <html lang="zh-cn" class="h-100"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=10;IE=11" /> <meta http-equiv="Cache-Control" content="no-transform" /> <title>丝路诗路</title> <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="/css/common.css?v=Fs_SqqsuphWPfpCjmwGKXhexkY8tbHEqBctkLcqLcOw" /> <script src="/lib/jquery/dist/jquery.min.js"></script> <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/js/lib.js?v=bUJr6wqMjsDXZm2QwYWvbwtDd-H7J_1xzVYVPpVFShc"></script> <script src="/lib/echarts/echarts.min.js"></script> <script src="https://webapi.amap.com/maps?v=2.0&key=5cdc00fd9012e1ec8c6eda47ebb36c61"></script> <link rel="stylesheet" type="text/css" href="/sheetjs/spreadsheet.min.css" /> <script type="text/javascript" src="/sheetjs/spreadsheet.min.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-3SBL9J5J7N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-3SBL9J5J7N'); </script> <style> a { text-decoration: none; } </style> </head> <body class="bg-default d-flex flex-column h-100"> <nav class="navbar navbar-expand-lg navbar-light border-bottom" aria-label="主菜单" style="background-color: whitesmoke;"> <div class="container-fluid"> <a href="/" class="me-lg-4 navbar-brand"> <img src="/images/logo.png" style="height: 56px;" class="me-3" /> <img src="/images/sitename.png" style="height: 40px;" /> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#commonMenu" aria-controls="commonMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse mb-2 mb-lg-0" id="commonMenu"> <div class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <a class="nav-link px-2 link-dark" href="/Calendar">年历</a> <a class="nav-link px-2 link-dark" href="/Map">地图</a> <a class="nav-link px-2 link-dark" href="/People">人物</a> <div class="position-relative"> <a class="nav-link link-dark dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">专题</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="/Map/PoetLife">唐宋文学编年地图</a></li> <li><a class="dropdown-item" href="/Map/XianTangPoetLife">汉魏六朝文学编年地图</a></li> <li><a class="dropdown-item" href="/Map/SilkRoad">丝绸之路诗词地图</a></li> <li><a class="dropdown-item" href="/Map/SouthSongScenery">方舆胜览</a></li> <li><a class="dropdown-item" href="/People/Monk">历代僧传</a></li> </ul> </div> <a class="nav-link px-2 link-dark" href="/Book">古籍</a> <div class="position-relative"> <a class="nav-link link-dark dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">诗文</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="/Writing">诗文库</a></li> <li><a class="dropdown-item" href="/CiTune">词谱</a></li> <li><a class="dropdown-item" href="/QuTune">曲谱</a></li> </ul> </div> <a class="nav-link px-2 link-dark" href="/Category">类书</a> <a class="nav-link px-2 link-dark" href="/Glossary">词汇</a> <a class="nav-link px-2 link-dark" href="/Rhyme">韵典</a> <div class="position-relative"> <a class="nav-link link-dark dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">工具</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="/Tool/Labeling">自动笺注</a></li> <li><a class="dropdown-item" href="/Tool/STConvert">简繁转换</a></li> <li><a class="dropdown-item" href="/Tool/Referring">出处与化用分析</a></li> </ul> </div> </div> <form method="get" class="d-flex" action="/Home/Search"> <input type="search" class="form-control" placeholder="主题" aria-label="搜索" name="SearchKey"> <button type="submit" class="btn btn-success"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path> </svg> </button> </form> </div> </div> </nav> <main role="main" class="pb-3 flex-shrink-0" id="main"> <style type="text/css"> img.icon { height: 50px; } img.full { width: 100%; max-width: 700px; } img.inline { max-width: 40%; float: left; margin: 0 8px 8px 0; } img { max-width: 1024px; } div.quote { border-left: 4px solid lightgrey; text-indent: 1em; color: grey; } </style> <div class="container-fluid mt-5 mb-4"> <figure class="text-center"> <blockquote class="blockquote"> <h3>陆上丝绸之路沿途遗存景点及其相关诗词</h3> </blockquote> <figcaption class="blockquote-footer mt-2 mb-3"> 主持：中华诗词研究院，设计：<a class="link-dark" href="https://sou-yun.cn/">搜韵</a> </figcaption> </figure> </div> <div id="summary"></div> <div class="row g-3 "> <div class="col-xl-1"> <div class="accordion overflow-auto" style="max-height: 82vh!important;"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 城市 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"> <div class="accordion-body"> <div id="categoryList"></div> </div> </div> </div> </div> </div> <div class="col-xl-7"> <div id="mapRegion" class="mapColumn"></div> </div> <div class="col-xl-4"> <div id="detail" class="column"></div> </div> </div> <div class="m-3"><span class="label small">按：</span><span class="text-secondary small">版权所有，翻版必究。另，本平台尚在测试阶段，数据及界面还在进一步完善。如有任何提议，请联系我们：cozychen@hotmail.com</span> </div> <div class="offcanvas offcanvas-end" tabindex="-1" id="referedData" aria-labelledby="referedDataLabel" style="min-width: 50%;"> <div class="offcanvas-header border-bottom border-info"> <h5 class="offcanvas-title" id="referedDataLabel"></h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body bg-default"> <div class="container" id="referedContent"></div> </div> </div> </main> <footer class="border-top footer text-muted py-2 mt-auto" style="background-color: whitesmoke;"> <div class="container-fluid"> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-muted me-2">苏ICP备2022002981号</a> © 2025 - 苏州图谱信息技术有限公司版权所有 - <a class="link-dark" href="/Home/About">关于本站</a> <a href="mailto:cozychen@hotmail.com" class="ms-3 link-dark">联系我们</a> </div> </footer> <script> var apiHome = "/api/SilkRoad"; var map; var travelData; var allViews; var markerGroup; $(document).ready(function () { $('#summary').hide(); map = new AMap.Map("mapRegion", { resizeEnable: true, zoom: 8, zooms: [5, 11], center: [120.586303, 31.341323], mapStyle: "amap://styles/whitesmoke" }); var base = new AMap.TileLayer({ 'getTileUrl': function (x, y, z) { return 'https://m.sou-yun.com/base/' + z + '/' + x + '/' + y + ".png"; }, 'zooms': [5, 11], 'zIndex': 4 }); map.addLayer(base); map.on("zoomend", function() { var zoomLevel = this.getZoom(); if (zoomLevel < 6) { $("img.icon").fadeOut(500); } else { $("img.icon").fadeIn(500); } }); ShowTravelTrace(); }); function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null; } function NewView(requestUri, title) { if (allViews) { for (var i = 1; i < travelData.Traces.length; i++) { var trace = travelData.Traces[i]; if (trace.Title == title) { ShowTrace(allViews); CentralAndZoom(trace); ShowTraceDetail(title); break; } } return; } var url = apiHome + '/' + requestUri; QueryData(url, function (data) { $('#summary').hide(); if (data && data.Traces) { allViews = data.Traces[0]; CleanDetail(); ShowTrace(data.Traces[0]); ShowTraceDetail(data.Traces[0].Title); } }); } function QueryData(url, done) { ShowLoading('summary'); GetJSON(url, done, function() { CloseLoading('summary'); }); } function ShowTraceDetail(title) { for (var j = 0; j < travelData.Traces[0].Markers.length; j++) { var marker = travelData.Traces[0].Markers[j]; if (marker.Title == title) { var detail = "<div><div class='bg-white border-start border-info p-2 mb-2 text-muted'>" + marker.Title + "</div>" + marker.Detail + "</div>"; $("#detail").html(detail); break; } } } function CentralAndZoom(trace) { var zoomLevel = trace.ZoomLevel; if (trace.Title == "吐鲁番" || trace.Title == "哈密") { zoomLevel --; } if (trace.Center == null) { map.setZoomAndCenter(zoomLevel, [trace.CenterLongitude, trace.CenterLatitude]); } else { map.setCity(trace.Center); } } function CleanDetail() { $("#detail").html(''); } function ShowTravelTrace() { QueryData(apiHome, function (data) { $('#summary').hide(); travelData = data; $('#categoryList').html(''); if (travelData.Traces != null) { ShowCategoryList(travelData.Traces); ShowTraceByIndex(0); } var city = getURLParameter("city"); var encodedCity = getURLParameter("requestUri"); if (city && encodedCity) { NewView(encodedCity, city); } }); } function CreateTitle(title) { return "<div class='bg-white border-start border-info p-2 mb-2 text-muted'><span class='large'>" + title + "</span></div>"; } function ShowSummaryAndDetail(data) { if (data.Summary) { $('#summary').html(data.Summary); } else { $('#summary').hide(); } if (data.Detail) { if (data.Title) { $(CreateTitle(data.Title)).appendTo('#detail') } $("<div>" + data.Detail + "</div>").appendTo('#detail'); } } function ShowCategoryList(traces) { $('#categoryList').hide(); var html = "<ul class='nav flex-column'>"; for (var i = 0; i < traces.length; i++) { var trace = traces[i]; if (trace.Lines || trace.Markers || trace.RequestUri) { if (trace.Lines || trace.Markers) { html += "<li class='nav-item'><a href='javascript: ShowTraceByIndex(" + i + ");' class='link-dark nav-link'>" + trace.Title + "</a></li>"; } else { html += "<li class='nav-item'><a href=\"javascript: NewView('" + trace.RequestUri + "', '" + trace.Title + "');\" class='link-dark nav-link'>" + trace.Title + "</a></li>"; } } else { html += "<li class='bg-white border-start border-info p-2 mb-2 text-muted'>" + trace.Title + "</li>"; } } html += "</ul>" $('#categoryList').append(html); $('#categoryList').fadeIn(1000); } function ShowTraceByIndex(index) { var trace = travelData.Traces[index]; CleanDetail(); var detail = trace.Detail; detail += "<p>以下是丝路上中国境内各个城市的概述。</p>" $.each(trace.Markers, function (index, marker) { detail += "<p><span class='squareLabel'>" + marker.Title + "</span></p>"; detail += marker.Detail; }); trace.Detail = detail; ShowTrace(trace); } function ShowTrace(trace) { CleanUp(); CentralAndZoom(trace); ShowSummaryAndDetail(trace); if (travelData.Common) { var common = travelData.Common; if (common.Lines != null) { $.each(common.Lines, ShowLine); } if (common.Markers != null) { $.each(common.Markers, ShowMarker); } } if (trace.Lines != null) { $.each(trace.Lines, ShowLine); } if (trace.Markers != null) { ShowMarkers(trace.Markers); } } function ShowMarkers(points) { var markers = []; $.each(points, function (index, point) { var marker = CreateMarker(index, point); markers.push(marker); }); markerGroup = new AMap.OverlayGroup(markers); map.add(markerGroup); } function CleanUp() { if (markerGroup) { map.remove(markerGroup); } $('#summary').html(''); } function ShowLine(index, line) { var points = new Array(); $.each(line.Markers, function (index, point) { ShowMarker(index, point); points[index] = [point.Longitude, point.Latitude]; }); var lifeLine = new AMap.Polyline({ path: points, isOutline: true, outlineColor: 'lightblue', strokeOpacity: 0.5, strokeWeight: 6, lineJoin: 'round', lineCap: 'round', zIndex: 50 }); lifeLine.setMap(map); } function ShowMarker(index, point) { if (point.Invisible == false) { var marker = CreateMarker(index, point); marker.setMap(map); } } function CreateMarker(index, point) { var labelHtml = point.Title; if (point.Summary) { labelHtml += "<br />" + point.Summary; } var offsetLeft = -12; var offsetTop = -26; if (point.OffsetLeft != 0) { offsetLeft = point.OffsetLeft; } if (point.OffsetTop != 0) { offsetTop = point.OffsetTop; } var marker = new AMap.Marker({ position: [point.Longitude, point.Latitude], title: point.Title, }); marker.setLabel({ offset: new AMap.Pixel(offsetLeft, offsetTop), content: labelHtml }); if (point.Detail != null) { var detailHtml = "<div>" + "<span class='bg-white border-start border-info p-2 mb-2 text-muted'>" + point.Title + "</span><br />" + "</div><div class='infoWin'>" + point.Detail + "</div>"; marker.on("click", function (e) { var infoWindow = new AMap.InfoWindow({ content: detailHtml }); infoWindow.open(map, e.target.getPosition()); }); } return marker; } </script> </body> </html>