TianZD/MiniBlink
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add leaflet

Browse Source
This commit is contained in:
tianzhendong
2023-05-23 18:59:43 +08:00
parent 8bb72621f7
commit 82aa5053b5
21 changed files with 29900 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Leaflet/Leaflet/images/layers-2x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

Leaflet/Leaflet/images/layers.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 696 B

Leaflet/Leaflet/images/marker-icon-2x.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

Leaflet/Leaflet/images/marker-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

Leaflet/Leaflet/images/marker-shadow.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 618 B

Leaflet/Leaflet/leaflet-src.esm.js
+14356
View File
File diff suppressed because it is too large Load Diff
Leaflet/Leaflet/leaflet-src.esm.js.map
+1
View File
File diff suppressed because one or more lines are too long
Leaflet/Leaflet/leaflet-src.js
+14449
View File
File diff suppressed because it is too large Load Diff
Leaflet/Leaflet/leaflet-src.js.map
+1
View File
File diff suppressed because one or more lines are too long
Leaflet/Leaflet/leaflet.css
+656
View File
@@ -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;
}
}
Leaflet/Leaflet/leaflet.js
+6
View File
File diff suppressed because one or more lines are too long
Leaflet/Leaflet/leaflet.js.map
+1
View File
File diff suppressed because one or more lines are too long
Leaflet/control.css
+13
View File
@@ -0,0 +1,13 @@
/*
.leaflet-container {
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
} */
.map {
width: 100%;
height: 100%;
}
Leaflet/control.js
+40
View File
@@ -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)
// {
// }
Leaflet/demo.html
+161
View File
@@ -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>
Leaflet/demo2.html
+147
View File
@@ -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: '&copy; 高德地图',
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>
Leaflet/icon/star-red.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684490613533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3187" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" p-id="3188" fill="#d81e06"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 765 B

Leaflet/icon/star.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 778 B

Leaflet/icon/，啊【.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684492642819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7486" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M377.6 145.066667c-70.4 23.466667-132.266667 76.8-132.266667 76.8l104.533334 44.8 138.666666-66.133334 21.333334-66.133333s-70.4-8.533333-132.266667 10.666667z m0 0" fill="#333333" p-id="7487"></path><path d="M475.733333 458.666667l-125.866666-110.933334-177.066667-6.4 17.066667 219.733334 93.866666 55.466666 72.533334 230.4 241.066666-256 6.4-132.266666h-128z m0 0" fill="#5C6BC0" p-id="7488"></path><path d="M827.733333 283.733333l-153.6-104.533333L618.666667 234.666667l21.333333 93.866666 104.533333 38.4 59.733334 59.733334 66.133333 49.066666-49.066667 59.733334-93.866666 281.6 149.333333-149.333334 21.333333-198.4-70.4-185.6z m0 0" fill="#333333" p-id="7489"></path><path d="M512 151.466667c198.4 0 360.533333 162.133333 360.533333 360.533333 0 198.4-162.133333 360.533333-360.533333 360.533333-198.4 0-360.533333-162.133333-360.533333-360.533333 0-198.4 162.133333-360.533333 360.533333-360.533333M512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z m0 0" fill="#333333" p-id="7490"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

Leaflet/leaflet.TileLayer.WMTS
Submodule
+1
Submodule Leaflet/leaflet.TileLayer.WMTS added at d5d162d60c
Leaflet/websocketDemo.html
+66
View File
@@ -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>