<!DOCTYPE html>
<html>
<head>
<title>elevation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html,
body,
.leaflet-map,
.elevation-div {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.leaflet-map {
height: 65%;
max-height: 100vh;
}
.elevation-div.elevation-detached {
height: 35%;
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
</style>
<link rel=
"stylesheet" href=
"https://unpkg.com/@raruto/[email protected]/dist/leaflet-elevation.min.css" /> <script src=
"https://unpkg.com/@raruto/[email protected]/dist/leaflet-elevation.min.js"></script>
<style>
.lightblue-theme.height-focus.circle-lower {
fill: #FF0;
}
</style>
<style>
.custom-theme-demo.elevation-control.elevation .area {
fill: rgba(255, 255, 255, 0.85);
stroke: hsla(60, 0%, 0%, 0.85);
stroke-width: 2.8;
}
.custom-theme-demo.height-focus.circle-lower {
fill: #FF0;
}
.custom-theme-demo.elevation-polyline {
stroke: #F00;
stroke-opacity: 1;
stroke-width: 2;
}
.custom-theme-demo.elevation-polyline-segments {
stroke: #FF0;
stroke-width: 2;
stroke-dasharray: 4;
}
</style>
</head>
<body>
<div id="map" class="leaflet-map"></div>
<div id="elevation-div" class="elevation-div"></div>
<script>
var opts = {
map: {
center: [25.048808, 121.514055],
zoom: 12,
mapTypeId: 'rudyMapVanilla',
mapTypeIds: ['osm', 'b25000', 'eMAP5', 'satellite', 'topo', 'rudyMapColor', 'rudyMapVanilla', 'town', 'village'],
mapTypes:{
osm: {
name: "OSM",
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
options: {
maxZoom: 24,
maxNativeZoom: 19,
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}
},
terrain: {
name: "地形圖",
url: "https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png",
options: {
maxZoom: 24,
maxNativeZoom: 22,
attribution: 'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Map style: © <a href="http://www.thunderforest.com/">Thunderforest</a>'
}
},
satellite: {
name: "衛星圖",
url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
options: {
maxZoom: 24,
maxNativeZoom: 18,
attribution: 'Map data: © <a href="http://www.esri.com/">Esri</a> — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}
},
rudyMapColor:{
name: "魯地圖彩色",
url: 'http://rudy.tile.basecamp.tw/{z}/{x}/{y}.png',
options: {
attribution: '© <a href="//rudy.basecamp.tw/taiwan_topo.html">Taiwan TOPO</a> contributors'
},
},
rudyMapVanilla:{
name: "魯地圖清爽",
url: 'https://rs.happyman.idv.tw/map/moi_osm/{z}/{x}/{y}.png',
options: {
attribution: '© <a href="//rudy.basecamp.tw/taiwan_topo.html">Taiwan TOPO</a> contributors'
},
},
eMAP5:{
name: "臺灣通用電子地圖",
url: 'https://wmts.nlsc.gov.tw/wmts/EMAP5/default/GoogleMapsCompatible/{z}/{y}/{x}',
options: {
attribution: '© <a href="https://maps.nlsc.gov.tw/S09SOA/">內政部國土測繪中心</a> contributors'
},
},
b25000:{
name: "1/25000經建",
url: 'https://wmts.nlsc.gov.tw/wmts/B25000/default/GoogleMapsCompatible/{z}/{y}/{x}',
options: {
attribution: '© <a href="https://maps.nlsc.gov.tw/S09SOA/">內政部國土測繪中心</a> contributors'
},
},
photo:{
name: " 正射影像圖(通用)",
url: 'https://wmts.nlsc.gov.tw/wmts/PHOTO2/default/GoogleMapsCompatible/{z}/{y}/{x}',
options: {
attribution: '© <a href="https://maps.nlsc.gov.tw/S09SOA/">內政部國土測繪中心</a> contributors'
},
},
photoMix:{
name: "正射影像(混合)",
url: 'https://wmts.nlsc.gov.tw/wmts/PHOTO_MIX/default/GoogleMapsCompatible/{z}/{y}/{x}',
options: {
attribution: '© <a href="https://maps.nlsc.gov.tw/S09SOA/">內政部國土測繪中心</a> contributors'
},
},
city:{
name: "縣市界",
url: 'https://wmts.nlsc.gov.tw/wmts/CITY/default/GoogleMapsCompatible/{z}/{y}/{x}',
options: {
attribution: '© <a href="https://maps.nlsc.gov.tw/S09SOA/">內政部國土測繪中心</a> contributors'
},
},
town:{
name: "鄉鎮區界",
url: 'https://wmts.nlsc.gov.tw/wmts/TOWN/default/GoogleMapsCompatible/{z}/{y}/{x}',
options: {
attribution: '© <a href="https://maps.nlsc.gov.tw/S09SOA/">內政部國土測繪中心</a> contributors'
},
},
village:{
name: "村里界",
url: 'https://wmts.nlsc.gov.tw/wmts/Village/default/GoogleMapsCompatible/{z}/{y}/{x}',
options: {
attribution: '© <a href="https://maps.nlsc.gov.tw/S09SOA/">內政部國土測繪中心</a> contributors'
},
},
happymanGpxTrack:{
name: "地圖產生器航跡",
url: 'http://rs.happyman.idv.tw/map/gpxtrack/{z}/{x}/{y}.png',
options: {
attribution: '© <a href="//rudy.basecamp.tw/taiwan_topo.html">Taiwan TOPO</a> contributors'
},
},
},
fullscreenControl: true,
resizerControl: true,
preferCanvas: true,
rotate: true,
rotateControl: {
closeOnZeroBearing: true
},
pegmanControl: false,
locateControl: false,
editInOSMControl: false,
searchControl: false,
},
elevationControl: {
url: "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/b528d224-cfbd-4fe4-9d43-d6f25e64c489/2021-11-21_%E9%9B%99%E8%B2%82%E9%80%A3%E8%B5%B0%E8%B8%8F%E6%9F%A5_%E9%99%B3%E5%A4%A7%E5%93%A5.gpx?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20211123%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20211123T040122Z&X-Amz-Expires=86400&X-Amz-Signature=49e51acde1e395a16b9c238ab9f4c48a0c2d6ef72107c32398b2eb2d340edbc3&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%222021-11-21_%25E9%259B%2599%25E8%25B2%2582%25E9%2580%25A3%25E8%25B5%25B0%25E8%25B8%258F%25E6%259F%25A5_%25E9%2599%25B3%25E5%25A4%25A7%25E5%2593%25A5.gpx%22&x-id=GetObject",
options: {
theme: "lightblue-theme",
collapsed: false,
autohide: false,
autofitBounds: true,
position: "bottomleft",
detached: true,
elevationDiv: "#elevation-div",
summary: "inline",
downloadLink: false,
imperial: false,
slope: "disabled",
speed: "disabled",
acceleration: false,
time: "summary",
legend: true,
followMarker: true,
almostOver: true,
distanceMarkers: true,
},
},
layersControl: {
options: {
collapsed: false,
},
},
};
var map = L.map('map', opts.map);
var controlElevation = L.control.elevation(opts.elevationControl.options);
var controlLayer = L.control.layers(null, null, opts.layersControl.options);
controlElevation.addTo(map);
controlLayer.addTo(map);
controlElevation.on('eledata_loaded', function(e) {
controlLayer.addOverlay(e.layer, e.name);
});
controlElevation.load(opts.elevationControl.url);
</script>
<script>
<!-- L.registerLocale('en:18', { -->
<!-- "Acceleration" : "Acceleration", -->
<!-- "Altitude" : "Elevation", -->
<!-- "Slope" : "Slope", -->
<!-- "Speed" : "Velocity", -->
<!-- "Total Length: " : "L: ", -->
<!-- "Max Elevation: " : "E Max: ", -->
<!-- "Min Elevation: " : "E Min: ", -->
<!-- "Total Time: " : "T: ", -->
<!-- "Total Ascent: " : "Asc: ", -->
<!-- "Total Descent: " : "Desc: ", -->
<!-- "Min Slope: " : "S Min: ", -->
<!-- "Max Slope: " : "S Max: ", -->
<!-- "Min Speed: " : "V Min: ", -->
<!-- "Max Speed: " : "V Max: ", -->
<!-- "Avg Speed: " : "V Avg: ", -->
<!-- "Min Acceleration: ": "A Min: ", -->
<!-- "Max Acceleration: ": "A Max: ", -->
<!-- "Avg Acceleration: ": "A Avg: ", -->
<!-- }); -->
L.registerLocale('en:18', {
"Acceleration" : "加速度",
"Altitude" : "Altitude",
"Slope" : "坡度",
"Speed" : "Velocity",
"Total Length: " : "總距離: ",
"Max Elevation: " : "最高海拔: ",
"Min Elevation: " : "最低海拔: ",
"Total Time: " : "總時間: ",
"Total Ascent: " : "總上升高度: ",
"Total Descent: " : "總下降高度: ",
"Min Slope: " : "最小坡度: ",
"Max Slope: " : "最大坡度: ",
"Min Speed: " : "最小速度: ",
"Max Speed: " : "最大速度: ",
"Avg Speed: " : "平均速度: ",
"Min Acceleration: ": "最小加速度: ",
"Max Acceleration: ": "最大加速度: ",
"Avg Acceleration: ": "平均加速度: ",
});
L.setLocale('en:18');
</script>
</body>
</html>