21 changed files with 29900 additions and 0 deletions
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 696 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 618 B |
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,656 @@ |
|||
/* required styles */ |
|||
|
|||
.leaflet-pane, |
|||
.leaflet-tile, |
|||
.leaflet-marker-icon, |
|||
.leaflet-marker-shadow, |
|||
.leaflet-tile-container, |
|||
.leaflet-pane > svg, |
|||
.leaflet-pane > canvas, |
|||
.leaflet-zoom-box, |
|||
.leaflet-image-layer, |
|||
.leaflet-layer { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
.leaflet-container { |
|||
overflow: hidden; |
|||
} |
|||
.leaflet-tile, |
|||
.leaflet-marker-icon, |
|||
.leaflet-marker-shadow { |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
user-select: none; |
|||
-webkit-user-drag: none; |
|||
} |
|||
/* Prevents IE11 from highlighting tiles in blue */ |
|||
.leaflet-tile::selection { |
|||
background: transparent; |
|||
} |
|||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */ |
|||
.leaflet-safari .leaflet-tile { |
|||
image-rendering: -webkit-optimize-contrast; |
|||
} |
|||
/* hack that prevents hw layers "stretching" when loading new tiles */ |
|||
.leaflet-safari .leaflet-tile-container { |
|||
width: 1600px; |
|||
height: 1600px; |
|||
-webkit-transform-origin: 0 0; |
|||
} |
|||
.leaflet-marker-icon, |
|||
.leaflet-marker-shadow { |
|||
display: block; |
|||
} |
|||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ |
|||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ |
|||
.leaflet-container .leaflet-overlay-pane svg { |
|||
max-width: none !important; |
|||
max-height: none !important; |
|||
} |
|||
.leaflet-container .leaflet-marker-pane img, |
|||
.leaflet-container .leaflet-shadow-pane img, |
|||
.leaflet-container .leaflet-tile-pane img, |
|||
.leaflet-container img.leaflet-image-layer, |
|||
.leaflet-container .leaflet-tile { |
|||
max-width: none !important; |
|||
max-height: none !important; |
|||
width: auto; |
|||
padding: 0; |
|||
} |
|||
|
|||
.leaflet-container.leaflet-touch-zoom { |
|||
-ms-touch-action: pan-x pan-y; |
|||
touch-action: pan-x pan-y; |
|||
} |
|||
.leaflet-container.leaflet-touch-drag { |
|||
-ms-touch-action: pinch-zoom; |
|||
/* Fallback for FF which doesn't support pinch-zoom */ |
|||
touch-action: none; |
|||
touch-action: pinch-zoom; |
|||
} |
|||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { |
|||
-ms-touch-action: none; |
|||
touch-action: none; |
|||
} |
|||
.leaflet-container { |
|||
-webkit-tap-highlight-color: transparent; |
|||
} |
|||
.leaflet-container a { |
|||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4); |
|||
} |
|||
.leaflet-tile { |
|||
filter: inherit; |
|||
visibility: hidden; |
|||
} |
|||
.leaflet-tile-loaded { |
|||
visibility: inherit; |
|||
} |
|||
.leaflet-zoom-box { |
|||
width: 0; |
|||
height: 0; |
|||
-moz-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
z-index: 800; |
|||
} |
|||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ |
|||
.leaflet-overlay-pane svg { |
|||
-moz-user-select: none; |
|||
} |
|||
|
|||
.leaflet-pane { z-index: 400; } |
|||
|
|||
.leaflet-tile-pane { z-index: 200; } |
|||
.leaflet-overlay-pane { z-index: 400; } |
|||
.leaflet-shadow-pane { z-index: 500; } |
|||
.leaflet-marker-pane { z-index: 600; } |
|||
.leaflet-tooltip-pane { z-index: 650; } |
|||
.leaflet-popup-pane { z-index: 700; } |
|||
|
|||
.leaflet-map-pane canvas { z-index: 100; } |
|||
.leaflet-map-pane svg { z-index: 200; } |
|||
|
|||
.leaflet-vml-shape { |
|||
width: 1px; |
|||
height: 1px; |
|||
} |
|||
.lvml { |
|||
behavior: url(#default#VML); |
|||
display: inline-block; |
|||
position: absolute; |
|||
} |
|||
|
|||
|
|||
/* control positioning */ |
|||
|
|||
.leaflet-control { |
|||
position: relative; |
|||
z-index: 800; |
|||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ |
|||
pointer-events: auto; |
|||
} |
|||
.leaflet-top, |
|||
.leaflet-bottom { |
|||
position: absolute; |
|||
z-index: 1000; |
|||
pointer-events: none; |
|||
} |
|||
.leaflet-top { |
|||
top: 0; |
|||
} |
|||
.leaflet-right { |
|||
right: 0; |
|||
} |
|||
.leaflet-bottom { |
|||
bottom: 0; |
|||
} |
|||
.leaflet-left { |
|||
left: 0; |
|||
} |
|||
.leaflet-control { |
|||
float: left; |
|||
clear: both; |
|||
} |
|||
.leaflet-right .leaflet-control { |
|||
float: right; |
|||
} |
|||
.leaflet-top .leaflet-control { |
|||
margin-top: 10px; |
|||
} |
|||
.leaflet-bottom .leaflet-control { |
|||
margin-bottom: 10px; |
|||
} |
|||
.leaflet-left .leaflet-control { |
|||
margin-left: 10px; |
|||
} |
|||
.leaflet-right .leaflet-control { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
|
|||
/* zoom and fade animations */ |
|||
|
|||
.leaflet-fade-anim .leaflet-popup { |
|||
opacity: 0; |
|||
-webkit-transition: opacity 0.2s linear; |
|||
-moz-transition: opacity 0.2s linear; |
|||
transition: opacity 0.2s linear; |
|||
} |
|||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup { |
|||
opacity: 1; |
|||
} |
|||
.leaflet-zoom-animated { |
|||
-webkit-transform-origin: 0 0; |
|||
-ms-transform-origin: 0 0; |
|||
transform-origin: 0 0; |
|||
} |
|||
svg.leaflet-zoom-animated { |
|||
will-change: transform; |
|||
} |
|||
|
|||
.leaflet-zoom-anim .leaflet-zoom-animated { |
|||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); |
|||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); |
|||
transition: transform 0.25s cubic-bezier(0,0,0.25,1); |
|||
} |
|||
.leaflet-zoom-anim .leaflet-tile, |
|||
.leaflet-pan-anim .leaflet-tile { |
|||
-webkit-transition: none; |
|||
-moz-transition: none; |
|||
transition: none; |
|||
} |
|||
|
|||
.leaflet-zoom-anim .leaflet-zoom-hide { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
|
|||
/* cursors */ |
|||
|
|||
.leaflet-interactive { |
|||
cursor: pointer; |
|||
} |
|||
.leaflet-grab { |
|||
cursor: -webkit-grab; |
|||
cursor: -moz-grab; |
|||
cursor: grab; |
|||
} |
|||
.leaflet-crosshair, |
|||
.leaflet-crosshair .leaflet-interactive { |
|||
cursor: crosshair; |
|||
} |
|||
.leaflet-popup-pane, |
|||
.leaflet-control { |
|||
cursor: auto; |
|||
} |
|||
.leaflet-dragging .leaflet-grab, |
|||
.leaflet-dragging .leaflet-grab .leaflet-interactive, |
|||
.leaflet-dragging .leaflet-marker-draggable { |
|||
cursor: move; |
|||
cursor: -webkit-grabbing; |
|||
cursor: -moz-grabbing; |
|||
cursor: grabbing; |
|||
} |
|||
|
|||
/* marker & overlays interactivity */ |
|||
.leaflet-marker-icon, |
|||
.leaflet-marker-shadow, |
|||
.leaflet-image-layer, |
|||
.leaflet-pane > svg path, |
|||
.leaflet-tile-container { |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.leaflet-marker-icon.leaflet-interactive, |
|||
.leaflet-image-layer.leaflet-interactive, |
|||
.leaflet-pane > svg path.leaflet-interactive, |
|||
svg.leaflet-image-layer.leaflet-interactive path { |
|||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
/* visual tweaks */ |
|||
|
|||
.leaflet-container { |
|||
background: #ddd; |
|||
outline-offset: 1px; |
|||
} |
|||
.leaflet-container a { |
|||
color: #0078A8; |
|||
} |
|||
.leaflet-zoom-box { |
|||
border: 2px dotted #38f; |
|||
background: rgba(255,255,255,0.5); |
|||
} |
|||
|
|||
|
|||
/* general typography */ |
|||
.leaflet-container { |
|||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; |
|||
font-size: 12px; |
|||
font-size: 0.75rem; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
|
|||
/* general toolbar styles */ |
|||
|
|||
.leaflet-bar { |
|||
box-shadow: 0 1px 5px rgba(0,0,0,0.65); |
|||
border-radius: 4px; |
|||
} |
|||
.leaflet-bar a { |
|||
background-color: #fff; |
|||
border-bottom: 1px solid #ccc; |
|||
width: 26px; |
|||
height: 26px; |
|||
line-height: 26px; |
|||
display: block; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
color: black; |
|||
} |
|||
.leaflet-bar a, |
|||
.leaflet-control-layers-toggle { |
|||
background-position: 50% 50%; |
|||
background-repeat: no-repeat; |
|||
display: block; |
|||
} |
|||
.leaflet-bar a:hover, |
|||
.leaflet-bar a:focus { |
|||
background-color: #f4f4f4; |
|||
} |
|||
.leaflet-bar a:first-child { |
|||
border-top-left-radius: 4px; |
|||
border-top-right-radius: 4px; |
|||
} |
|||
.leaflet-bar a:last-child { |
|||
border-bottom-left-radius: 4px; |
|||
border-bottom-right-radius: 4px; |
|||
border-bottom: none; |
|||
} |
|||
.leaflet-bar a.leaflet-disabled { |
|||
cursor: default; |
|||
background-color: #f4f4f4; |
|||
color: #bbb; |
|||
} |
|||
|
|||
.leaflet-touch .leaflet-bar a { |
|||
width: 30px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
} |
|||
.leaflet-touch .leaflet-bar a:first-child { |
|||
border-top-left-radius: 2px; |
|||
border-top-right-radius: 2px; |
|||
} |
|||
.leaflet-touch .leaflet-bar a:last-child { |
|||
border-bottom-left-radius: 2px; |
|||
border-bottom-right-radius: 2px; |
|||
} |
|||
|
|||
/* zoom control */ |
|||
|
|||
.leaflet-control-zoom-in, |
|||
.leaflet-control-zoom-out { |
|||
font: bold 18px 'Lucida Console', Monaco, monospace; |
|||
text-indent: 1px; |
|||
} |
|||
|
|||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { |
|||
font-size: 22px; |
|||
} |
|||
|
|||
|
|||
/* layers control */ |
|||
|
|||
.leaflet-control-layers { |
|||
box-shadow: 0 1px 5px rgba(0,0,0,0.4); |
|||
background: #fff; |
|||
border-radius: 5px; |
|||
} |
|||
.leaflet-control-layers-toggle { |
|||
background-image: url(images/layers.png); |
|||
width: 36px; |
|||
height: 36px; |
|||
} |
|||
.leaflet-retina .leaflet-control-layers-toggle { |
|||
background-image: url(images/layers-2x.png); |
|||
background-size: 26px 26px; |
|||
} |
|||
.leaflet-touch .leaflet-control-layers-toggle { |
|||
width: 44px; |
|||
height: 44px; |
|||
} |
|||
.leaflet-control-layers .leaflet-control-layers-list, |
|||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { |
|||
display: none; |
|||
} |
|||
.leaflet-control-layers-expanded .leaflet-control-layers-list { |
|||
display: block; |
|||
position: relative; |
|||
} |
|||
.leaflet-control-layers-expanded { |
|||
padding: 6px 10px 6px 6px; |
|||
color: #333; |
|||
background: #fff; |
|||
} |
|||
.leaflet-control-layers-scrollbar { |
|||
overflow-y: scroll; |
|||
overflow-x: hidden; |
|||
padding-right: 5px; |
|||
} |
|||
.leaflet-control-layers-selector { |
|||
margin-top: 2px; |
|||
position: relative; |
|||
top: 1px; |
|||
} |
|||
.leaflet-control-layers label { |
|||
display: block; |
|||
font-size: 13px; |
|||
font-size: 1.08333em; |
|||
} |
|||
.leaflet-control-layers-separator { |
|||
height: 0; |
|||
border-top: 1px solid #ddd; |
|||
margin: 5px -10px 5px -6px; |
|||
} |
|||
|
|||
/* Default icon URLs */ |
|||
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */ |
|||
background-image: url(images/marker-icon.png); |
|||
} |
|||
|
|||
|
|||
/* attribution and scale controls */ |
|||
|
|||
.leaflet-container .leaflet-control-attribution { |
|||
background: #fff; |
|||
background: rgba(255, 255, 255, 0.8); |
|||
margin: 0; |
|||
} |
|||
.leaflet-control-attribution, |
|||
.leaflet-control-scale-line { |
|||
padding: 0 5px; |
|||
color: #333; |
|||
line-height: 1.4; |
|||
} |
|||
.leaflet-control-attribution a { |
|||
text-decoration: none; |
|||
} |
|||
.leaflet-control-attribution a:hover, |
|||
.leaflet-control-attribution a:focus { |
|||
text-decoration: underline; |
|||
} |
|||
.leaflet-attribution-flag { |
|||
display: inline !important; |
|||
vertical-align: baseline !important; |
|||
width: 1em; |
|||
height: 0.6669em; |
|||
} |
|||
.leaflet-left .leaflet-control-scale { |
|||
margin-left: 5px; |
|||
} |
|||
.leaflet-bottom .leaflet-control-scale { |
|||
margin-bottom: 5px; |
|||
} |
|||
.leaflet-control-scale-line { |
|||
border: 2px solid #777; |
|||
border-top: none; |
|||
line-height: 1.1; |
|||
padding: 2px 5px 1px; |
|||
white-space: nowrap; |
|||
-moz-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
background: rgba(255, 255, 255, 0.8); |
|||
text-shadow: 1px 1px #fff; |
|||
} |
|||
.leaflet-control-scale-line:not(:first-child) { |
|||
border-top: 2px solid #777; |
|||
border-bottom: none; |
|||
margin-top: -2px; |
|||
} |
|||
.leaflet-control-scale-line:not(:first-child):not(:last-child) { |
|||
border-bottom: 2px solid #777; |
|||
} |
|||
|
|||
.leaflet-touch .leaflet-control-attribution, |
|||
.leaflet-touch .leaflet-control-layers, |
|||
.leaflet-touch .leaflet-bar { |
|||
box-shadow: none; |
|||
} |
|||
.leaflet-touch .leaflet-control-layers, |
|||
.leaflet-touch .leaflet-bar { |
|||
border: 2px solid rgba(0,0,0,0.2); |
|||
background-clip: padding-box; |
|||
} |
|||
|
|||
|
|||
/* popup */ |
|||
|
|||
.leaflet-popup { |
|||
position: absolute; |
|||
text-align: center; |
|||
margin-bottom: 20px; |
|||
} |
|||
.leaflet-popup-content-wrapper { |
|||
padding: 1px; |
|||
text-align: left; |
|||
border-radius: 12px; |
|||
} |
|||
.leaflet-popup-content { |
|||
margin: 13px 24px 13px 20px; |
|||
line-height: 1.3; |
|||
font-size: 13px; |
|||
font-size: 1.08333em; |
|||
min-height: 1px; |
|||
} |
|||
.leaflet-popup-content p { |
|||
margin: 17px 0; |
|||
margin: 1.3em 0; |
|||
} |
|||
.leaflet-popup-tip-container { |
|||
width: 40px; |
|||
height: 20px; |
|||
position: absolute; |
|||
left: 50%; |
|||
margin-top: -1px; |
|||
margin-left: -20px; |
|||
overflow: hidden; |
|||
pointer-events: none; |
|||
} |
|||
.leaflet-popup-tip { |
|||
width: 17px; |
|||
height: 17px; |
|||
padding: 1px; |
|||
|
|||
margin: -10px auto 0; |
|||
pointer-events: auto; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
-ms-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
.leaflet-popup-content-wrapper, |
|||
.leaflet-popup-tip { |
|||
background: white; |
|||
color: #333; |
|||
box-shadow: 0 3px 14px rgba(0,0,0,0.4); |
|||
} |
|||
.leaflet-container a.leaflet-popup-close-button { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
border: none; |
|||
text-align: center; |
|||
width: 24px; |
|||
height: 24px; |
|||
font: 16px/24px Tahoma, Verdana, sans-serif; |
|||
color: #757575; |
|||
text-decoration: none; |
|||
background: transparent; |
|||
} |
|||
.leaflet-container a.leaflet-popup-close-button:hover, |
|||
.leaflet-container a.leaflet-popup-close-button:focus { |
|||
color: #585858; |
|||
} |
|||
.leaflet-popup-scrolled { |
|||
overflow: auto; |
|||
} |
|||
|
|||
.leaflet-oldie .leaflet-popup-content-wrapper { |
|||
-ms-zoom: 1; |
|||
} |
|||
.leaflet-oldie .leaflet-popup-tip { |
|||
width: 24px; |
|||
margin: 0 auto; |
|||
|
|||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; |
|||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); |
|||
} |
|||
|
|||
.leaflet-oldie .leaflet-control-zoom, |
|||
.leaflet-oldie .leaflet-control-layers, |
|||
.leaflet-oldie .leaflet-popup-content-wrapper, |
|||
.leaflet-oldie .leaflet-popup-tip { |
|||
border: 1px solid #999; |
|||
} |
|||
|
|||
|
|||
/* div icon */ |
|||
|
|||
.leaflet-div-icon { |
|||
background: #fff; |
|||
border: 1px solid #666; |
|||
} |
|||
|
|||
|
|||
/* Tooltip */ |
|||
/* Base styles for the element that has a tooltip */ |
|||
.leaflet-tooltip { |
|||
position: absolute; |
|||
padding: 6px; |
|||
background-color: #fff; |
|||
border: 1px solid #fff; |
|||
border-radius: 3px; |
|||
color: #222; |
|||
white-space: nowrap; |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
pointer-events: none; |
|||
box-shadow: 0 1px 3px rgba(0,0,0,0.4); |
|||
} |
|||
.leaflet-tooltip.leaflet-interactive { |
|||
cursor: pointer; |
|||
pointer-events: auto; |
|||
} |
|||
.leaflet-tooltip-top:before, |
|||
.leaflet-tooltip-bottom:before, |
|||
.leaflet-tooltip-left:before, |
|||
.leaflet-tooltip-right:before { |
|||
position: absolute; |
|||
pointer-events: none; |
|||
border: 6px solid transparent; |
|||
background: transparent; |
|||
content: ""; |
|||
} |
|||
|
|||
/* Directions */ |
|||
|
|||
.leaflet-tooltip-bottom { |
|||
margin-top: 6px; |
|||
} |
|||
.leaflet-tooltip-top { |
|||
margin-top: -6px; |
|||
} |
|||
.leaflet-tooltip-bottom:before, |
|||
.leaflet-tooltip-top:before { |
|||
left: 50%; |
|||
margin-left: -6px; |
|||
} |
|||
.leaflet-tooltip-top:before { |
|||
bottom: 0; |
|||
margin-bottom: -12px; |
|||
border-top-color: #fff; |
|||
} |
|||
.leaflet-tooltip-bottom:before { |
|||
top: 0; |
|||
margin-top: -12px; |
|||
margin-left: -6px; |
|||
border-bottom-color: #fff; |
|||
} |
|||
.leaflet-tooltip-left { |
|||
margin-left: -6px; |
|||
} |
|||
.leaflet-tooltip-right { |
|||
margin-left: 6px; |
|||
} |
|||
.leaflet-tooltip-left:before, |
|||
.leaflet-tooltip-right:before { |
|||
top: 50%; |
|||
margin-top: -6px; |
|||
} |
|||
.leaflet-tooltip-left:before { |
|||
right: 0; |
|||
margin-right: -12px; |
|||
border-left-color: #fff; |
|||
} |
|||
.leaflet-tooltip-right:before { |
|||
left: 0; |
|||
margin-left: -12px; |
|||
border-right-color: #fff; |
|||
} |
|||
|
|||
/* Printing */ |
|||
|
|||
@media print { |
|||
/* Prevent printers from removing background-images of controls. */ |
|||
.leaflet-control { |
|||
-webkit-print-color-adjust: exact; |
|||
print-color-adjust: exact; |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,13 @@ |
|||
|
|||
/* |
|||
.leaflet-container { |
|||
height: 100%; |
|||
width: 100%; |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
} */ |
|||
.map { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
@ -0,0 +1,40 @@ |
|||
//弹出提示
|
|||
const popup = L.popup(); |
|||
// .setLatLng([39.92, 116.46])
|
|||
// .setContent('I am a standalone popup.');
|
|||
// .openOn(map);
|
|||
|
|||
function onMapClick(e) { |
|||
// popup
|
|||
// .setLatLng(e.latlng)
|
|||
// .setContent(`You clicked the map at ${e.latlng.toString()}`)
|
|||
// .openOn(map);
|
|||
L.marker(e.latlng).addTo(map).bindPopup('<b>' + e.latlng + '</b>').openPopup(); |
|||
routes.push(e.latlng); |
|||
// current = lines.push(L.polyline(routes, { color: 'red' }).addTo(map).bindPopup("这是折线"));
|
|||
// map.removeLayer(last);
|
|||
// last = current;
|
|||
if(lines.length>0) |
|||
{ |
|||
map.removeLayer(lines[0]); |
|||
// lines.shift();
|
|||
} |
|||
|
|||
lines.push(L.polyline(routes, { color: 'red' }).addTo(map).bindPopup("这是折线")); |
|||
} |
|||
|
|||
|
|||
function printInformation(information) { |
|||
alert(information); |
|||
} |
|||
|
|||
function clearOneLine(a) |
|||
{ |
|||
map.removeLayer(lines[a]); |
|||
// lines.pop();
|
|||
} |
|||
|
|||
// function addOnePoint(lng, lat)
|
|||
// {
|
|||
|
|||
// }
|
|||
@ -0,0 +1,161 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<base target="_top"> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
|
|||
<title>Quick Start - Leaflet</title> |
|||
|
|||
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> |
|||
|
|||
<link rel="stylesheet" href="./leaflet/leaflet.css" /> |
|||
<script src="./leaflet/leaflet.js"></script> |
|||
|
|||
<!-- css --> |
|||
<link rel="stylesheet" href="./control.css"> |
|||
<!-- wmts --> |
|||
<script src="./leaflet.TileLayer.WMTS/leaflet-tilelayer-wmts.js"></script> |
|||
<!-- script --> |
|||
<script src="./control.js"></script> |
|||
<style> |
|||
html, |
|||
body { |
|||
height: 100%; |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
|
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<div id="map" style="width: 100%; height: 100%;"></div> |
|||
<script> |
|||
|
|||
let map = L.map('map', { |
|||
center: [39.910362, 116.397378], |
|||
zoom: 5 |
|||
}); |
|||
|
|||
// 地图切换 |
|||
var baseLayers = { |
|||
'天地图影像-wmts': L.tileLayer('http://127.0.0.1:21133/wmts/tianditu?x={x}&y={y}&z={z}', { |
|||
maxZoom: 19, |
|||
attribution: "天地图影像-wmts" |
|||
}), |
|||
|
|||
"高德矢量": L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', { |
|||
attribution: "高德矢量" |
|||
}).addTo(map), |
|||
|
|||
'影像底图': L.tileLayer('https://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', { |
|||
maxZoom: 19, |
|||
attribution: "影像底图" |
|||
}), |
|||
|
|||
'矢量底图': L.tileLayer('https://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', { |
|||
maxZoom: 19, |
|||
attribution: "矢量底图" |
|||
}), |
|||
|
|||
'地形晕渲': L.tileLayer('https://t4.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', { |
|||
maxZoom: 19, attribution: "地形晕渲" |
|||
}), |
|||
|
|||
'全球境界': L.tileLayer('https://t4.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', { |
|||
maxZoom: 19, attribution: "全球境界" |
|||
}), |
|||
|
|||
"CartoDB Positron": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { |
|||
maxZoom: 18, |
|||
attribution: "CartoDB Positron" |
|||
}), |
|||
|
|||
"OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { |
|||
maxZoom: 18, |
|||
attribution: "OpenTopoMap" |
|||
}), |
|||
} |
|||
|
|||
var layerControl = L.control.layers(baseLayers, {}, { |
|||
position: 'topleft', |
|||
collapsed: true |
|||
}); |
|||
layerControl.addTo(map); |
|||
|
|||
//比例尺 |
|||
var scale = L.control.scale({ |
|||
maxWidth: 200, |
|||
metric: true, |
|||
imperial: false |
|||
}).addTo(map); |
|||
|
|||
// icon |
|||
let starIcon = L.icon( |
|||
{ |
|||
iconUrl: './icon/star-red.svg', |
|||
shadowUrl: './icon/star.png', |
|||
iconSize: [36, 36], |
|||
shadowSize: [48, 48] |
|||
} |
|||
) |
|||
let starMarker = L.marker([39.910362, 116.397378], |
|||
{ |
|||
icon: starIcon, |
|||
// zIndexOffset: 0 // 防止标签与图标相互遮挡 |
|||
}).addTo(map); |
|||
var customLabel = L.divIcon({ |
|||
html: '<div class="my-label">丽水市</div>', |
|||
className: 'custom-marker-label' |
|||
}); |
|||
let label = L.marker([39.910362, 116.397378], |
|||
{ |
|||
icon: customLabel, |
|||
zIndexOffset: 0 // 防止标签与图标相互遮挡 |
|||
}).addTo(map); |
|||
|
|||
// 标记 |
|||
// var marker = L.marker([51.5, -0.09]).addTo(map) |
|||
// .bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup(); |
|||
|
|||
//圆 |
|||
// const circle = L.circle([51.508, -0.11], { |
|||
// color: 'red', |
|||
// fillColor: '#f03', |
|||
// fillOpacity: 0.5, |
|||
// radius: 500 |
|||
// }).addTo(map).bindPopup('I am a circle.'); |
|||
|
|||
//三角形 |
|||
// const polygon = L.polygon([ |
|||
// [51.509, -0.08], |
|||
// [51.503, -0.06], |
|||
// [51.51, -0.047] |
|||
// ]).addTo(map).bindPopup('I am a polygon.'); |
|||
|
|||
// var bj = L.marker([39.92, 116.46]).bindPopup('这里是北京'); |
|||
// sh = L.marker([31.213, 121.445]).bindPopup('这里是上海'); |
|||
// gz = L.marker([23.16, 113.23]).bindPopup('这里是广州'); |
|||
// var cities = L.layerGroup([bj, sh, gz]).addTo(map); |
|||
|
|||
// var route = [[39.910362, 116.397378], [38.474558, 112.851563]]; |
|||
var routes = []; |
|||
var lines = []; |
|||
var last; |
|||
var current; |
|||
// L.polyline(route, { color: 'red'}).addTo(map).bindPopup("这是折线"); |
|||
map.on('click', onMapClick); |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,147 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<title></title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet"> |
|||
<script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script> |
|||
<style> |
|||
#map{ |
|||
position:absolute; |
|||
width:100vw; |
|||
height:100vh; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id='map'> |
|||
</div> |
|||
<script> |
|||
var map = L.map('map', |
|||
{ |
|||
zoomSnap: 0.1, // 地图的有效缩放级别 |
|||
maxZoom: 13, |
|||
// crs: L.CRS.EPSG4326, // 高德不是这个坐标系 |
|||
zoomControl: true, |
|||
editable:true, |
|||
// wheelPxPerZoomLevel: 60 // 鼠标滚轮缩放 较小的值将使滚轮轮缩放更快 |
|||
}).setView([29.592024,106.231126], 13); // 重庆璧山区经纬度 |
|||
let baseLayer=L.tileLayer("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",{ |
|||
attribution: '© 高德地图', |
|||
maxZoom: 13, |
|||
minZoom: 3, |
|||
subdomains: "1234", |
|||
zoom: 3 |
|||
}); |
|||
map.addLayer(baseLayer); |
|||
// map.on('layeradd',function() { |
|||
// console.log(layeradd) |
|||
|
|||
// }) |
|||
map.on('click',function(event) { |
|||
console.log(event) // 返回当前点击的经纬度，及当前容器的坐标 |
|||
let {lat, lng} = event.latlng |
|||
// map.setZoomAround([lat, lng],3) |
|||
|
|||
// console.log(map.attributionControl._map._layers) // 获取当前图层的比例尺 |
|||
// map.setZoom(6) // 指定到对应的缩放级别 |
|||
// shapingba = [29.554000,106.468590] |
|||
// // panTo 平移到指定位置，flyTo平移到指定位置 并可设置缩放级别 |
|||
// map.panTo(shapingba) |
|||
// map.flyTo(shapingba, 3) |
|||
|
|||
}) |
|||
let arr1 = [ |
|||
[107.577716172645609, 29.796720709302502], |
|||
[107.577592225094861, 29.796914526276193], |
|||
[107.577507323359043, 29.797142144209456], |
|||
[107.577454631178185, 29.797393608354824] |
|||
] |
|||
console.log(arr1) |
|||
var polygon = L.polygon(arr1); |
|||
// fitBounds 把所有点位放在合适的位置 |
|||
console.log(polygon.getBounds().getCenter()) // 获取中心点 {lat: 107.5775854019119, lng: 29.797057158828665} |
|||
|
|||
|
|||
// 动态加载 |
|||
function getMarkerIcon(item) { |
|||
let zoom = map.getZoom();//缩放等级 |
|||
console.log(zoom) |
|||
let icon = null; |
|||
/*let value = item[this.airType]; |
|||
let bgcolor = getPollLevelColor(this.airType, value, this.timeType);//污染物背景颜色 |
|||
let txtcolor = getPollLevelTextColor(this.airType, value, this.timeType);//污染物字体颜色 */ |
|||
let value, bgcolor, txtcolor; |
|||
let namelength = item.length; |
|||
if (value === -999 || value === 0) { |
|||
bgcolor = "#a1a3a6"; |
|||
value = "-"; |
|||
} |
|||
|
|||
if (zoom < 6) { |
|||
icon = L.divIcon({ |
|||
html: "<div class='smallCircleMarker' style='background-color: " + bgcolor + ";'></div>", |
|||
className: 'ss', |
|||
iconSize: [7, 15], |
|||
iconAnchor: [7, 7] |
|||
}); |
|||
} else if (zoom >= 6 && zoom < 8)//6,7 |
|||
{ |
|||
icon = L.divIcon({ |
|||
html: "<div style='width: " + namelength * 14 + "px;'><div class='rectangleMarker' style='background-color: " + bgcolor + ";color:" + txtcolor + ";margin: 0 auto'>" + item + "</div></div>", |
|||
className: 'ss', |
|||
iconSize: [12, 19], |
|||
iconAnchor: [12, 9] |
|||
}); |
|||
} else if (zoom >= 8 && zoom < 10)//8,9 |
|||
{ |
|||
icon = L.divIcon({ |
|||
html: "<div class='smallCircleMarker' style='background-color: " + bgcolor + ";'></div>", |
|||
className: 'ss', |
|||
iconSize: [7, 15], |
|||
iconAnchor: [7, 7] |
|||
}); |
|||
} else if (zoom >= 10) { |
|||
icon = L.divIcon({ |
|||
html: "<div style='width: " + namelength * 14 + "px;'><div class='rectangleMarker' style='background-color: " + bgcolor + ";color:" + txtcolor + ";margin: 0 auto'>" + item + "</div></div>", |
|||
className: 'ss', |
|||
iconSize: [12, 19], |
|||
iconAnchor: [12, 9] |
|||
}); |
|||
} |
|||
return icon; |
|||
} |
|||
L.marker([29.592024, 106.231126], { icon: getMarkerIcon(name) }).addTo(map); |
|||
map.on('zoomstart', function () { |
|||
var zoomLevel = map.getZoom(); |
|||
console.log(zoomLevel) |
|||
|
|||
/* var tooltip = $('.leaflet-tooltip'); |
|||
|
|||
switch (zoomLevel) { |
|||
case -2: |
|||
tooltip.css('font-size', 7); |
|||
break; |
|||
case -1: |
|||
tooltip.css('font-size', 10); |
|||
break; |
|||
case 0: |
|||
tooltip.css('font-size', 12); |
|||
break; |
|||
case 1: |
|||
tooltip.css('font-size', 14); |
|||
break; |
|||
case 2: |
|||
tooltip.css('font-size', 16); |
|||
break; |
|||
case 3: |
|||
tooltip.css('font-size', 18); |
|||
break; |
|||
default: |
|||
tooltip.css('font-size', 14); |
|||
} */ |
|||
}) |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
After Width: | Height: | Size: 765 B |
|
After Width: | Height: | Size: 778 B |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1 @@ |
|||
Subproject commit d5d162d60cb204a0f9dbde2905d5d68c790faf16 |
|||
@ -0,0 +1,66 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Qt WebSocket Demo</title> |
|||
</head> |
|||
|
|||
<body> |
|||
<input type="text" id="edit_url" value="ws://localhost:12345" /> |
|||
<input type="button" id="btn_open" value="Open" onclick="doOpen()" /> |
|||
<br /> |
|||
<p>Recv:</p> |
|||
<br /> |
|||
<textarea id="edit_recv" cols="50" rows="10"></textarea> |
|||
<br /> |
|||
<p>Send:</p> |
|||
<br /> |
|||
<textarea id="edit_send" cols="50" rows="10">Hello</textarea> |
|||
<br /> |
|||
<input type="button" value="Send" onclick="doSend()" /> |
|||
<script> |
|||
var edit_url = document.getElementById("edit_url"); |
|||
var btn_open = document.getElementById("btn_open"); |
|||
var edit_recv = document.getElementById("edit_recv"); |
|||
var edit_send = document.getElementById("edit_send"); |
|||
|
|||
var client = null; |
|||
|
|||
function doOpen() { |
|||
console.log("open") |
|||
if (!("WebSocket" in window)) { |
|||
//不支持WebSocket |
|||
return; |
|||
} |
|||
if (client === null) { |
|||
client = new WebSocket(edit_url.value); |
|||
|
|||
client.onopen = function () { |
|||
btn_open.value = "Close"; |
|||
} |
|||
//收到数据后追加到尾巴上 |
|||
client.onmessage = function (event) { |
|||
edit_recv.value += String(event.data); |
|||
} |
|||
client.onclose = function () { |
|||
client = null; |
|||
btn_open.value = "Open"; |
|||
} |
|||
} else { |
|||
client.close(); |
|||
client = null; |
|||
} |
|||
} |
|||
|
|||
function doSend() { |
|||
console.log("send") |
|||
if (client === null) |
|||
return; |
|||
client.send(edit_send.value); |
|||
} |
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
Loading…
Reference in new issue