3344 lines
143 KiB
HTML
3344 lines
143 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>自定义地图API测试</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||
<style>
|
||
#map {
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
|
||
body {
|
||
margin: 0px;
|
||
}
|
||
|
||
.leaflet-left,
|
||
.leaflet-right {
|
||
display: none;
|
||
}
|
||
</style>
|
||
<style>
|
||
/* 基础样式重置 */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 横屏核心样式 */
|
||
body {
|
||
height: 100vh;
|
||
/* width: 100vh; */
|
||
/* height: 100vw;
|
||
transform: rotate(90deg);
|
||
transform-origin: top left;
|
||
position: relative;
|
||
bottom: 0px;
|
||
background-color: #f5f5f5; */
|
||
}
|
||
|
||
/* 标题栏固定在顶部 */
|
||
header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
color: white;
|
||
z-index: 99999;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.back {
|
||
position: absolute;
|
||
left: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
border-radius: 100%;
|
||
border: 1px solid white;
|
||
background-color: #fff;
|
||
width: 24px;
|
||
height: 24px;
|
||
z-index: 99999999;
|
||
|
||
}
|
||
|
||
.save {
|
||
position: absolute;
|
||
right: 10px;
|
||
padding: 3px;
|
||
background-color: #009900;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.back .icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
/* 地图容器撑满中间部分 */
|
||
.map-container {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
/* 减去顶部标题和底部按钮的高度 */
|
||
margin: 0;
|
||
}
|
||
|
||
#map {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* 工具按钮固定在底部 */
|
||
.toolbox {
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 5px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 15px;
|
||
z-index: 100;
|
||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.toolbox button {
|
||
padding: 11px 14px;
|
||
background-color: #fff;
|
||
border: none;
|
||
color: #999;
|
||
font-size: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border-radius: 8px;
|
||
min-width: 43px;
|
||
height: 41px;
|
||
}
|
||
|
||
.toolbox button:active {
|
||
background-color: #ccc;
|
||
}
|
||
|
||
.toolbox button:active {
|
||
background-color: #1980ff;
|
||
|
||
}
|
||
|
||
.toolbox button .icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.toolbox button.none {
|
||
display: none;
|
||
}
|
||
|
||
/* 图标样式优化 */
|
||
.icon {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
select {
|
||
padding: 10px 15px;
|
||
font-size: 16px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
background-color: white;
|
||
flex: 1;
|
||
max-width: 163px;
|
||
color: #999;
|
||
}
|
||
|
||
select.none {
|
||
display: none;
|
||
}
|
||
|
||
.point-marker {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: inline-block;
|
||
border-radius: 50%;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.point-marker.red {
|
||
background-color: #e53935;
|
||
}
|
||
|
||
.point-marker.yellow {
|
||
background-color: #ffeb3b;
|
||
}
|
||
|
||
#control-panel {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
background-color: white;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||
z-index: 1000;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
#control-panel.none {
|
||
display: none;
|
||
}
|
||
|
||
.direction-selector {
|
||
width: 200px;
|
||
height: 200px;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid #ccc;
|
||
position: relative;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.direction-pointer {
|
||
position: absolute;
|
||
width: 2px;
|
||
height: 100px;
|
||
background-color: #f00;
|
||
left: 50%;
|
||
top: 0;
|
||
transform-origin: 50% 100%;
|
||
transform: translateX(-50%);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.direction-marker {
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background-color: #3498db;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.btn1 {
|
||
padding: 8px 12px;
|
||
background-color: #3498db;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.btn1:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
|
||
/* 竖屏样式（高度大于宽度） */
|
||
@media (orientation: portrait) {
|
||
body {}
|
||
|
||
.toolbox {
|
||
display: none;
|
||
}
|
||
|
||
.directionBox {
|
||
position: relative;
|
||
bottom: -10px;
|
||
width: 116%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: start;
|
||
align-items: center;
|
||
background: #fff;
|
||
height: 100%;
|
||
gap: 15px;
|
||
border-radius: 24px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||
padding-top: 10px;
|
||
transition: all 0.3s ease;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.directionBox .container {
|
||
width: 51px;
|
||
height: 31px;
|
||
position: relative;
|
||
}
|
||
|
||
/* Hide default HTML checkbox */
|
||
.directionBox .checkbox {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
position: absolute;
|
||
}
|
||
|
||
.directionBox .switch {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
background-color: #e9e9eb;
|
||
border-radius: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
|
||
/* The slider */
|
||
.directionBox .slider {
|
||
width: 27px;
|
||
height: 27px;
|
||
position: absolute;
|
||
left: calc(50% - 27px/2 - 10px);
|
||
top: calc(50% - 27px/2);
|
||
border-radius: 50%;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
|
||
transition: all 0.2s ease-out;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.directionBox .checkbox:checked+.switch {
|
||
background-color: #34C759;
|
||
}
|
||
|
||
.directionBox .checkbox:checked+.switch .slider {
|
||
left: calc(50% - 27px/2 + 10px);
|
||
top: calc(50% - 27px/2);
|
||
}
|
||
|
||
|
||
.directionBox .header {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.directionBox .form {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.directionBox .form>div {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.directionBox .form>div:nth-child(2) {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
justify-content: space-between;
|
||
align-items: start;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.form .slider-container {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.form .slider-container button {
|
||
border: none;
|
||
background-color: #ccc;
|
||
border: none;
|
||
border-radius: 2px;
|
||
color: #fff;
|
||
}
|
||
|
||
.form .slider-container button .icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.form .slider-container input {
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
flex: 1;
|
||
}
|
||
|
||
.directionBox .header>span:nth-child(2) {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.directionBox .header>span:nth-child(3) {
|
||
color: #009900
|
||
}
|
||
|
||
|
||
|
||
.toolboxBottom .boxcontainer {
|
||
position: relative;
|
||
|
||
bottom: -10px;
|
||
width: 116%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: start;
|
||
background-color: #fff;
|
||
height: 100%;
|
||
gap: 15px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||
padding-top: 10px;
|
||
transition: all 0.3s ease;
|
||
|
||
}
|
||
|
||
.boxcontainer .laststep {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 13px;
|
||
}
|
||
|
||
.boxcontainer .laststep .icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.boxcontainer .direction {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-top: 25px;
|
||
padding: 4px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.boxcontainer .direction>div {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.boxcontainer .direction>div:nth-child(2) button {
|
||
border: 1px solid #009900;
|
||
background-color: #fff;
|
||
color: #009900;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.boxcontainer .direction>div .number {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.boxcontainer .direction>div .number>input {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
border: none;
|
||
|
||
}
|
||
|
||
.boxcontainer .direction>div .number>button {
|
||
border: none;
|
||
background-color: #ccc;
|
||
border: none;
|
||
border-radius: 2px;
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
.toolboxBottom .add {
|
||
position: absolute;
|
||
width: 50px;
|
||
height: 50px;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
top: -10px;
|
||
|
||
|
||
|
||
}
|
||
|
||
.toolboxBottom .add .iconPic {
|
||
background-color: #009900;
|
||
border-radius: 50%;
|
||
width: 45px;
|
||
height: 45px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
|
||
}
|
||
|
||
.toolboxBottom .step {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 80%
|
||
}
|
||
|
||
.toolboxBottom .step>div {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 5px;
|
||
color: #999;
|
||
flex-direction: column;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.toolboxBottom .step>div:active {
|
||
background-color: #999;
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
.operation {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.operation>div {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.operation>div>select {
|
||
border: none;
|
||
color: #000;
|
||
}
|
||
|
||
.iconPic .icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.toolboxBottom .boxcontainer.noshow {
|
||
bottom: -64px;
|
||
}
|
||
|
||
|
||
|
||
.toolboxBottom.none {
|
||
bottom: -200px;
|
||
}
|
||
|
||
|
||
|
||
.stopContainer {
|
||
position: fixed;
|
||
right: 10px;
|
||
top: 153px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
|
||
.toolboxBottom button .icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.toolboxBottom button.none {
|
||
display: none;
|
||
}
|
||
|
||
#control-panel {
|
||
bottom: 30px;
|
||
}
|
||
|
||
.toolboxBottom {
|
||
padding: 5px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 15px;
|
||
z-index: 9999;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
height: 190px;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
padding-bottom: 0px;
|
||
padding-left: 0px;
|
||
padding-right: 0px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* From Uiverse.io by JaydipPrajapati1910 */
|
||
.btn-container {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.btn-container i {
|
||
display: inline-block;
|
||
position: relative;
|
||
top: -9px;
|
||
|
||
|
||
}
|
||
|
||
label {
|
||
font-size: 13px;
|
||
color: #424242;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.btn-color-mode-switch {
|
||
display: inline-block;
|
||
margin: 0px;
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-color-mode-switch>label.btn-color-mode-switch-inner {
|
||
margin: 0px;
|
||
width: 140px;
|
||
height: 30px;
|
||
background: #E0E0E0;
|
||
border-radius: 26px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
/*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/
|
||
display: block;
|
||
width: 100%
|
||
}
|
||
|
||
.btn-color-mode-switch>label.btn-color-mode-switch-inner:before {
|
||
content: attr(data-on);
|
||
position: absolute;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
top: 7px;
|
||
left: 50%;
|
||
|
||
width: 50%;
|
||
}
|
||
|
||
.btn-color-mode-switch>label.btn-color-mode-switch-inner:after {
|
||
content: attr(data-off);
|
||
width: 50%;
|
||
height: 88%;
|
||
background: #fff;
|
||
border-radius: 26px;
|
||
position: absolute;
|
||
left: 0%;
|
||
top: 2px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0px 0px 6px -2px #111;
|
||
padding: 5px 0px;
|
||
}
|
||
|
||
.btn-color-mode-switch>.alert {
|
||
display: none;
|
||
background: #FF9800;
|
||
border: none;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-color-mode-switch input[type="checkbox"] {
|
||
cursor: pointer;
|
||
width: 50px;
|
||
height: 100%;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
z-index: 1;
|
||
margin: 0px;
|
||
}
|
||
|
||
.btn-color-mode-switch input[type="checkbox"]:checked+label.btn-color-mode-switch-inner {
|
||
background: #E0E0E0;
|
||
color: #424242;
|
||
}
|
||
|
||
.btn-color-mode-switch input[type="checkbox"]:checked+label.btn-color-mode-switch-inner:after {
|
||
content: attr(data-on);
|
||
left: 50%;
|
||
background: #FFF;
|
||
}
|
||
|
||
.btn-color-mode-switch input[type="checkbox"]:checked+label.btn-color-mode-switch-inner:before {
|
||
content: attr(data-off);
|
||
|
||
left: 0%;
|
||
}
|
||
|
||
.btn-color-mode-switch input[type="checkbox"]:checked~.alert {
|
||
display: block;
|
||
}
|
||
|
||
.dark-preview {
|
||
background: #0d0d0d;
|
||
}
|
||
|
||
.white-preview {
|
||
background: #fff;
|
||
}
|
||
|
||
|
||
|
||
.toolboxBottom .boxcontainer {
|
||
position: relative;
|
||
bottom: -10px;
|
||
width: 116%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: start;
|
||
align-items: center;
|
||
background: #fff;
|
||
/* 渐变背景 */
|
||
height: 100%;
|
||
gap: 5px;
|
||
border-radius: 24px;
|
||
/* 更大的圆角 */
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||
/* 更明显的阴影 */
|
||
padding-top: 10px;
|
||
transition: all 0.3s ease;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
/* 隐藏溢出内容 */
|
||
}
|
||
|
||
.toolboxBottom .boxcontainer.noshow {
|
||
bottom: -64px;
|
||
opacity: 0;
|
||
/* 隐藏时添加透明度变化 */
|
||
transform: translateY(20px);
|
||
/* 隐藏时的位移 */
|
||
}
|
||
|
||
.toolboxBottom .collapse {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
visibility: visible;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
/* 半透明背景 */
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
/* 图标阴影 */
|
||
transition: all 0.3s ease;
|
||
/* 过渡动画 */
|
||
}
|
||
|
||
.toolboxBottom .collapse:hover {
|
||
background-color: rgba(255, 255, 255, 1);
|
||
/* 悬停时背景变不透明 */
|
||
transform: scale(1.1);
|
||
/* 悬停时缩放 */
|
||
}
|
||
|
||
.toolboxBottom button {
|
||
padding: 5px 10px;
|
||
border: none;
|
||
color: #999;
|
||
font-size: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border-radius: 16px;
|
||
/* 更大的圆角 */
|
||
max-width: 120px;
|
||
min-width: 43px;
|
||
transition: all 0.3s ease;
|
||
background-color: #009900;
|
||
/* 添加过渡动画 */
|
||
/* 按钮阴影 */
|
||
}
|
||
|
||
.toolboxBottom button:hover {
|
||
background-color: #009900;
|
||
/* 悬停时颜色变深 */
|
||
transform: translateY(-2px);
|
||
/* 悬停时上移 */
|
||
/* 悬停时阴影增强 */
|
||
}
|
||
|
||
.toolboxBottom button:active {
|
||
background-color: #009900;
|
||
/* 点击时颜色 */
|
||
transform: translateY(1px);
|
||
/* 点击时下移 */
|
||
2
|
||
/* 点击时阴影减弱 */
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.loading-container {
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: calc(100vh);
|
||
/* 减去顶部标题和底部按钮的高度 */
|
||
margin: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
opacity: 0.7;
|
||
background-color: #fff;
|
||
z-index: 100;
|
||
}
|
||
|
||
.item-list-loading {
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100%;
|
||
/* 减去顶部标题和底部按钮的高度 */
|
||
margin: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
opacity: 0.7;
|
||
background-color: #fff;
|
||
z-index: 99999;
|
||
}
|
||
|
||
.loading-container.none {
|
||
display: none;
|
||
|
||
}
|
||
|
||
|
||
/* 加载动画核心样式 */
|
||
.loading {
|
||
|
||
border: solid #e2e8f0;
|
||
/* 浅灰色边框 */
|
||
border-top-color: #165DFF;
|
||
/* 蓝色顶部边框 */
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
/* 旋转动画 */
|
||
display: inline-block;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
button[disabled] {
|
||
/* 基础禁用样式 */
|
||
opacity: 0.5;
|
||
/* 透明度降低 */
|
||
cursor: not-allowed;
|
||
/* 鼠标/触摸样式变为禁止 */
|
||
pointer-events: none;
|
||
/* 完全禁用点击事件 */
|
||
background-color: #cccccc;
|
||
/* 浅灰色背景（替代原颜色） */
|
||
border-color: #aaaaaa;
|
||
/* 边框变灰 */
|
||
color: #666666;
|
||
/* 文字变灰 */
|
||
}
|
||
|
||
/* 不同尺寸的加载动画示例 */
|
||
.loading.small {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-width: 2px;
|
||
}
|
||
|
||
|
||
/* 旋转动画定义 */
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
|
||
.control-container {
|
||
display: flex;
|
||
gap: 15px;
|
||
padding: 15px;
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
|
||
position: absolute;
|
||
right: 10px;
|
||
flex-direction: row;
|
||
}
|
||
|
||
|
||
.btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
width: 56px;
|
||
height: 56px;
|
||
border: none;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
color: white;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
.btn:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 暂停/继续按钮样式 */
|
||
#pause-resume {
|
||
background-color: #1677ff;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
#pause-resume.pause {
|
||
background-color: #1677ff;
|
||
}
|
||
|
||
#pause-resume.resume {
|
||
background-color: #1677ff;
|
||
}
|
||
|
||
/* 停止按钮样式 */
|
||
#stop1 {
|
||
background-color: #ff4d4f;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
/* 图标样式 */
|
||
.icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.fa-pause,
|
||
.fa-play {
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* 状态标签 */
|
||
.status-label {
|
||
position: absolute;
|
||
top: -30px;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
display: none;
|
||
}
|
||
|
||
|
||
|
||
.toggle-btn {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 16px;
|
||
background-color: #f0f0f0;
|
||
border: none;
|
||
border-radius: 24px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
min-width: 120px;
|
||
height: 40px;
|
||
}
|
||
|
||
.toggle-btn.none {
|
||
display: none;
|
||
}
|
||
|
||
.toggle-btn-text {
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.toggle-btn-switch {
|
||
position: relative;
|
||
width: 40px;
|
||
height: 20px;
|
||
background-color: #ddd;
|
||
border-radius: 10px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.toggle-btn-circle {
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background-color: white;
|
||
border-radius: 50%;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* 开启状态样式 */
|
||
.toggle-btn[data-status="on"] {
|
||
background-color: #1980ff;
|
||
box-shadow: inset 0 2px 4px rgba(25, 128, 255, 0.3);
|
||
}
|
||
|
||
.toggle-btn[data-status="on"] .toggle-btn-text {
|
||
color: white;
|
||
}
|
||
|
||
.toggle-btn[data-status="on"] .toggle-btn-switch {
|
||
background-color: #1980ff;
|
||
}
|
||
|
||
.toggle-btn[data-status="on"] .toggle-btn-circle {
|
||
left: 22px;
|
||
}
|
||
|
||
/* 悬停效果 */
|
||
.toggle-btn:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
.toggle-btn:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* From Uiverse.io by chase2k25 */
|
||
.glass-radio-group {
|
||
--bg: rgba(240, 240, 240, 0.7);
|
||
--text: #333333;
|
||
|
||
display: flex;
|
||
position: relative;
|
||
background: var(--bg);
|
||
border-radius: 1rem;
|
||
backdrop-filter: blur(8px);
|
||
box-shadow:
|
||
inset 1px 1px 3px rgba(255, 255, 255, 0.8),
|
||
inset -1px -1px 3px rgba(0, 0, 0, 0.05),
|
||
0 2px 8px rgba(0, 0, 0, 0.08);
|
||
overflow: hidden;
|
||
width: fit-content;
|
||
}
|
||
|
||
.glass-radio-group input {
|
||
display: none;
|
||
}
|
||
|
||
.glass-radio-group label {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 80px;
|
||
font-size: 14px;
|
||
padding: 0.8rem 1.6rem;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
letter-spacing: 0.3px;
|
||
color: var(--text);
|
||
position: relative;
|
||
z-index: 2;
|
||
transition: color 0.3s ease-in-out;
|
||
}
|
||
|
||
.glass-radio-group label:hover {
|
||
color: #1a73e8;
|
||
}
|
||
|
||
.glass-radio-group input:checked+label {
|
||
color: #fff;
|
||
}
|
||
|
||
.glass-glider {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: calc(100% / 2);
|
||
border-radius: 1rem;
|
||
z-index: 1;
|
||
transition:
|
||
transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
|
||
background 0.4s ease-in-out,
|
||
box-shadow 0.4s ease-in-out;
|
||
}
|
||
|
||
/* 蓝色 - 替代原银色 */
|
||
#glass-silver:checked~.glass-glider {
|
||
transform: translateX(0%);
|
||
background: linear-gradient(135deg, #a8c5e7 55%, #6aa0e0);
|
||
box-shadow:
|
||
0 0 12px rgba(106, 160, 224, 0.5),
|
||
0 0 8px rgba(255, 255, 255, 0.4) inset;
|
||
}
|
||
|
||
/* 青绿色 - 替代原金色 */
|
||
#glass-gold:checked~.glass-glider {
|
||
transform: translateX(100%);
|
||
background: linear-gradient(135deg, #80e2d7 55%, #26a69a);
|
||
box-shadow:
|
||
0 0 12px rgba(38, 166, 154, 0.5),
|
||
0 0 8px rgba(255, 255, 255, 0.4) inset;
|
||
}
|
||
|
||
/* 紫色 - 替代原铂金 */
|
||
#glass-platinum:checked~.glass-glider {
|
||
transform: translateX(100%);
|
||
background: linear-gradient(135deg, #b39ddb 55%, #7e57c2);
|
||
box-shadow:
|
||
0 0 12px rgba(126, 87, 194, 0.5),
|
||
0 0 8px rgba(255, 255, 255, 0.4) inset;
|
||
}
|
||
|
||
.modelChoose {
|
||
position: fixed;
|
||
z-index: 9999;
|
||
bottom: 0px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding: 10px;
|
||
gap: 10px;
|
||
height: 122px;
|
||
border-radius: 24px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||
background: #fff;
|
||
transition: all 0.3s ease;
|
||
|
||
}
|
||
|
||
.modelChoose.none {
|
||
bottom: -300px;
|
||
|
||
}
|
||
|
||
.modelChoose p {
|
||
|
||
font-size: 17px;
|
||
position: absolute;
|
||
top: -19px;
|
||
background: #009900;
|
||
border-radius: 13px;
|
||
color: #fff;
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.modelChoose .nextstep {
|
||
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
width: 100%;
|
||
|
||
}
|
||
|
||
.modelChoose .nextstep span {
|
||
|
||
font-size: 12px;
|
||
color: #666;
|
||
padding: 5px;
|
||
position: relative;
|
||
right: 10px;
|
||
}
|
||
|
||
.modelChoose .nextstep span .icon {
|
||
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.rightSide {
|
||
position: fixed;
|
||
right: 10px;
|
||
top: 85px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
z-index: 999;
|
||
padding: 5px 0px;
|
||
gap: 5px;
|
||
}
|
||
|
||
.location {
|
||
position: fixed;
|
||
right: 10px;
|
||
top: 398px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
z-index: 999;
|
||
padding: 5px 0px;
|
||
gap: 5px;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.location.clear {
|
||
top: 448px
|
||
}
|
||
|
||
|
||
.rightSide>div {
|
||
width: 40px;
|
||
height: 44px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 5px;
|
||
flex-direction: column;
|
||
border-bottom: 1px solid #eee;
|
||
padding: 5px;
|
||
}
|
||
|
||
.rightSide>div:active {
|
||
background-color: #ccc;
|
||
color: #fff;
|
||
}
|
||
|
||
.rightSide>div .icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
|
||
}
|
||
|
||
.rightSide>div:last-child {
|
||
|
||
border-bottom: none;
|
||
}
|
||
|
||
.rightSide>div>span {
|
||
font-size: 9px;
|
||
color: #666
|
||
}
|
||
|
||
.none {
|
||
display: none !important;
|
||
}
|
||
|
||
.modalSave {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -100%);
|
||
width: 300px;
|
||
height: 173px;
|
||
background-color: #fff;
|
||
border-radius: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: start;
|
||
align-items: center;
|
||
padding: 10px 20px;
|
||
gap: 20px;
|
||
z-index: 99999;
|
||
|
||
}
|
||
|
||
.modalSave .saveLoading {
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: -1;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.modalSave .saveLoading.active {
|
||
opacity: 0.7;
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
|
||
|
||
}
|
||
|
||
.modalSave .title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.modalSave input {
|
||
border: 2px solid transparent;
|
||
width: 15em;
|
||
height: 2.5em;
|
||
padding-left: 0.8em;
|
||
outline: none;
|
||
overflow: hidden;
|
||
background-color: #F3F3F3;
|
||
border-radius: 10px;
|
||
transition: all 0.5s;
|
||
}
|
||
|
||
.modalSave input:hover,
|
||
.modalSave input:focus {
|
||
border: 2px solid #4A9DEC;
|
||
box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
|
||
background-color: white;
|
||
}
|
||
|
||
.modalSave .button {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
gap: 10px;
|
||
z-index: 999999999;
|
||
}
|
||
|
||
.modalSave .button span {
|
||
padding: 5px;
|
||
background-color: #009900;
|
||
color: #fff;
|
||
border-radius: 1px;
|
||
|
||
|
||
}
|
||
|
||
.icon1 {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.list {
|
||
position: absolute;
|
||
bottom: -800px;
|
||
width: 100%;
|
||
height: 80%;
|
||
transition: all 0.3s ease;
|
||
background-color: #fff;
|
||
border-radius: 24px;
|
||
z-index: 99999999;
|
||
display: none;
|
||
|
||
|
||
|
||
}
|
||
|
||
.list.active {
|
||
bottom: -32px;
|
||
display: block;
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
.list .top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 20px;
|
||
z-index: 9999999999;
|
||
position: relative;
|
||
border-top-left-radius: 24px;
|
||
border-top-right-radius: 24px;
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
.list .item-list {
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
gap: 10px;
|
||
max-height: 80%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.list .item-list .item {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
gap: 10px;
|
||
width: 100%;
|
||
height: 40px;
|
||
}
|
||
|
||
.list .item-list .item img {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.list .top>div:nth-child(1)>span {
|
||
color: red;
|
||
margin-left: 5px;
|
||
margin-right: 5px;
|
||
|
||
}
|
||
|
||
.card {
|
||
position: fixed;
|
||
bottom: 10px;
|
||
background: #fff;
|
||
width: 100%;
|
||
height: 106px;
|
||
border-radius: 24px;
|
||
z-index: 9999;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 25px;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.card .card-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
gap: 10px;
|
||
|
||
|
||
}
|
||
|
||
.card .card-title img {
|
||
width: 50px;
|
||
height: 50px;
|
||
|
||
|
||
}
|
||
|
||
.card .buttonlist {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.card .buttonlist button {
|
||
background-color: #009900;
|
||
padding: 5px 10px;
|
||
color: #fff;
|
||
border-radius: 5px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.amap-overlay-text-container {
|
||
background-color: transparent;
|
||
border: none;
|
||
background: transparent;
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
.work-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
background: #f5f5f5;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.work-btn:hover {
|
||
background: #eaeaea;
|
||
}
|
||
|
||
.work-btn.active {
|
||
background: #d0f0d0;
|
||
box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
|
||
|
||
.popover {
|
||
position: absolute;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
padding: 12px;
|
||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
z-index: 1000;
|
||
animation: fadeIn 0.2s ease-out;
|
||
}
|
||
|
||
.popover-btn {
|
||
padding: 10px 18px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #4CAF50, #2E7D32);
|
||
color: white;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
.popover-btn:hover {
|
||
background: linear-gradient(135deg, #66BB6A, #388E3C);
|
||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.popover-btn:active {
|
||
background: linear-gradient(135deg, #388E3C, #1B5E20);
|
||
transform: translateY(0);
|
||
box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.popover-btn.active {
|
||
background: linear-gradient(135deg, #388E3C, #1B5E20);
|
||
transform: translateY(0);
|
||
box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* 动画 */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Modal 样式 */
|
||
#globalCutModal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 2000;
|
||
}
|
||
|
||
#globalCutModal .modal-content {
|
||
background: #fff;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
min-width: 300px;
|
||
}
|
||
|
||
#globalCutModal .modal-actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
|
||
gap: 10px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
#globalCutModal .modal-actions button {
|
||
min-width: 60px;
|
||
padding: 8px 18px;
|
||
font-size: 14px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
/* 确认按钮 */
|
||
#globalCutModal .modal-actions .btn-confirm {
|
||
background-color: #409EFF;
|
||
border-color: #409EFF;
|
||
color: #fff;
|
||
}
|
||
|
||
#globalCutModal .modal-actions .btn-confirm:hover {
|
||
background-color: #66b1ff;
|
||
border-color: #66b1ff;
|
||
}
|
||
|
||
#globalCutModal .modal-actions .btn-confirm:active {
|
||
background-color: #3a8ee6;
|
||
border-color: #3a8ee6;
|
||
}
|
||
|
||
/* 取消按钮 */
|
||
#globalCutModal .modal-actions .btn-cancel {
|
||
background-color: #fff;
|
||
border: 1px solid #dcdfe6;
|
||
color: #606266;
|
||
}
|
||
|
||
#globalCutModal .modal-actions .btn-cancel:hover {
|
||
border-color: #c6c8ce;
|
||
color: #409EFF;
|
||
}
|
||
|
||
#globalCutModal .modal-actions .btn-cancel:active {
|
||
border-color: #a6a9ad;
|
||
color: #3a8ee6;
|
||
}
|
||
|
||
#globalCutModal .content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
margin-top: 10px
|
||
}
|
||
|
||
#globalCutModal .content button {
|
||
border: none;
|
||
background-color: #ccc;
|
||
border: none;
|
||
border-radius: 2px;
|
||
color: #fff;
|
||
}
|
||
|
||
#globalCutModal input {
|
||
border: none;
|
||
text-align: center;
|
||
/* background-color: #ccc;
|
||
border: none;
|
||
border-radius: 2px;
|
||
color: #fff; */
|
||
}
|
||
|
||
#globalCutModal .content button:active {
|
||
transform: translateY(-2px);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<div class='back'>
|
||
<svg t="1748925372585" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="4688" width="16" height="16">
|
||
<path
|
||
d="M395.21518 513.604544l323.135538-312.373427c19.052938-18.416442 19.052938-48.273447 0-66.660212-19.053961-18.416442-49.910737-18.416442-68.964698 0L291.75176 480.290811c-19.052938 18.416442-19.052938 48.273447 0 66.660212l357.633237 345.688183c9.525957 9.207709 22.01234 13.796214 34.497699 13.796214 12.485359 0 24.971741-4.588505 34.466999-13.82896 19.052938-18.416442 19.052938-48.242747 0-66.660212L395.21518 513.604544z"
|
||
fill="#999" p-id="4689"></path>
|
||
</svg>
|
||
</div>
|
||
<div>路径规划</div>
|
||
<div class="save">保存</div>
|
||
|
||
</header>
|
||
<div id="map"></div>
|
||
<div class="rightSide">
|
||
<div><svg t="1752220034968" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="15138" width="24" height="24">
|
||
<path
|
||
d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0"
|
||
p-id="15139" fill="#666666"></path>
|
||
</svg><span>搜索</span></div>
|
||
<div onclick="handleChooseModel()"><svg t="1752224241866" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="22842" width="24" height="24">
|
||
<path
|
||
d="M256 85.333333a85.333333 85.333333 0 0 1 85.333333 85.333334v26.453333l345.856 74.112A85.333333 85.333333 0 0 1 768 213.333333h85.333333a85.333333 85.333333 0 0 1 85.333334 85.333334v85.333333a85.333333 85.333333 0 0 1-85.333334 85.333333v213.333334a85.333333 85.333333 0 0 1 85.333334 85.333333v85.333333a85.333333 85.333333 0 0 1-85.333334 85.333334h-85.333333a85.333333 85.333333 0 0 1-85.333333-85.333334v-9.045333l-341.845334-24.405333A85.333333 85.333333 0 0 1 256 896H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333v-85.333334a85.333333 85.333333 0 0 1 85.333334-85.333333V341.333333a85.333333 85.333333 0 0 1-85.333334-85.333333V170.666667a85.333333 85.333333 0 0 1 85.333334-85.333334h85.333333z m597.333333 682.666667h-85.333333v85.333333h85.333333v-85.333333zM256 725.333333H170.666667v85.333334h85.333333v-85.333334zM336.810667 283.434667A85.333333 85.333333 0 0 1 256 341.333333v298.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v9.002667l341.845334 24.448A85.333333 85.333333 0 0 1 768 682.666667v-213.333334a85.333333 85.333333 0 0 1-85.333333-85.333333v-26.453333L336.810667 283.434667zM853.333333 298.666667h-85.333333v85.333333h85.333333V298.666667zM256 170.666667H170.666667v85.333333h85.333333V170.666667z"
|
||
fill="#666666" p-id="22843"></path>
|
||
</svg><span>圈地</span></div>
|
||
<div onclick="handleShowList()"><svg t="1752220105392" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="18567" width="24" height="24">
|
||
<path
|
||
d="M98.357122 818.73194c-14.213723 0-25.764803 11.532661-25.764803 25.76071 0 14.233166 11.55108 25.770943 25.764803 25.770943M922.866648 818.73194 98.128925 818.73194c-14.21884 0-25.770943 11.532661-25.770943 25.76071 0 14.233166 11.552104 25.770943 25.770943 25.770943l824.737724 0c14.213723 0 25.764803-11.538801 25.764803-25.770943C948.633498 830.262554 937.081395 818.73194 922.866648 818.73194zM98.357122 483.770052c-14.213723 0-25.764803 11.537777-25.764803 25.76992 0 14.229073 11.55108 25.764803 25.764803 25.764803M922.866648 483.770052 98.128925 483.770052c-14.21884 0-25.770943 11.537777-25.770943 25.76992 0 14.229073 11.552104 25.764803 25.770943 25.764803l824.737724 0c14.213723 0 25.764803-11.537777 25.764803-25.764803C948.633498 495.307829 937.081395 483.770052 922.866648 483.770052zM98.357122 148.815327c-14.213723 0-25.764803 11.539824-25.764803 25.768897 0 14.227026 11.55108 25.76378 25.764803 25.76378M98.128925 200.346981l824.737724 0c14.213723 0 25.764803-11.536754 25.764803-25.76378 0-14.229073-11.55108-25.768897-25.764803-25.768897L98.128925 148.814304c-14.21884 0-25.770943 11.539824-25.770943 25.768897C72.359005 188.81125 83.911108 200.346981 98.128925 200.346981z"
|
||
fill="#666666" p-id="18568"></path>
|
||
</svg><span>列表</span></div>
|
||
|
||
<div onclick="" class="work-btn" data-type="巡检">
|
||
<svg t="1757745998966" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="7045" width="324" height="24">
|
||
<path
|
||
d="M517.654925 447.136478c68.837254 0 124.897433-54.210866 124.897433-120.908418 0-66.697552-56.060179-120.908418-124.897433-120.908418-68.837254 0-124.897433 54.210866-124.897432 120.908418 0 66.697552 56.044896 120.908418 124.897432 120.908418zm0-182.44012c34.647881 0 62.693254 27.86197 62.693254 62.234746 0 34.326925-28.045373 62.234746-62.693254 62.234747-34.60203 0-62.693254-27.907821-62.693253-62.234747 0-34.372776 28.091224-62.234746 62.693253-62.234746zm-120.893134 365.338746c1.803463 2.567642 3.576358 4.630925 5.028299 6.113433 42.136836 51.001313 84.60991 84.930866 86.44394 86.367523l29.589015 23.521433 29.466746-23.704836c1.83403-1.436657 44.169552-35.763582 86.22997-86.581493 1.436657-1.528358 3.270687-3.652776 5.058866-6.266268 60.140896-78.282507 134.908179-191.732537 151.811821-289.944836 3.255403-22.390448 3.347104-35.946985 3.347104-37.429493 0.565493-73.391761-28.717851-142.366567-82.409074-193.994507-51.994746-50.007881-120.801433-77.533612-193.673553-77.533612-72.597015 0-141.220299 27.525731-193.215044 77.533612-53.981612 51.903045-83.448358 121.229373-82.882866 195.156059 0 1.176836 0.091701 14.779224 3.224836 36.099821 18.141612 105.08991 102.537552 226.594388 151.97994 290.663164zm120.893134-522.988895c113.816836 0 206.985552 90.937313 206.160239 203.928836 0 0 0 10.224716-2.47594 27.174209-13.617672 79.123104-77.915701 177.136716-129.467224 244.078806-0.412657 0.794746-1.23797 1.558925-1.635343 1.971582-35.885851 43.680478-72.581731 73.223642-72.581732 73.223642s-36.711164-29.145791-72.581731-72.826269c-0.397373-0.397373-1.222687-1.207403-1.650627-1.971582-51.551522-66.529433-115.849552-164.955701-129.45194-243.712-2.47594-16.903642-2.47594-27.174209-2.47594-27.174209-0.840597-112.976239 92.343403-204.693015 206.160238-204.693015zM219.884896 993.432836 901.471522 993.432836c58.643104 0 107.229612-44.521075 107.229612-100.825791 0-56.304716-48.586507-100.810507-107.229612-100.810508L122.513194 791.796537c-22.023642 0-38.835582-15.405851-38.835582-32.98197 0-17.591403 16.81194-32.997254 38.835582-32.997254l121.718448 0a34.036537 34.036537 0 0 0 34.189373-33.914268 34.051821 34.051821 0 0 0-34.189373-33.914269L122.513194 657.988776c-58.627821 0-107.214328 44.505791-107.214328 100.825791 0 56.304716 48.586507 100.810507 107.214328 100.810508l778.958328 0c22.038925 0 38.850866 15.390567 38.850866 32.98197s-16.81194 32.98197-38.850866 32.98197L219.884896 925.589015a34.067104 34.067104 0 0 0-34.189374 33.929552A34.067104 34.067104 0 0 0 219.884896 993.432836z"
|
||
fill="#666666" p-id="7046"></path>
|
||
</svg>
|
||
<span>巡检</span>
|
||
</div>
|
||
<div onclick="" class="work-btn" data-type="清洗">
|
||
<svg t="1757746141604" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="8162" width="24" height="24">
|
||
<path
|
||
d="M496.359893 467.626667c-15.786667-3.285333-153.173333-227.797333-153.173333-313.130667S411.709227 0 496.317227 0c84.608 0 153.173333 69.162667 153.173333 154.496s-102.997333 152.874667-153.173333 313.173333z m48.896 84.693333c10.752-12.032 273.877333-18.773333 347.733334 23.893333 73.941333 42.666667 99.541333 136.661333 57.258666 209.92-42.325333 73.258667-136.533333 98.090667-210.432 55.424-73.898667-42.666667-80.853333-165.632-194.56-289.28z m-97.792 0c5.034667 15.36-120.704 246.613333-194.56 289.237333-73.898667 42.666667-168.106667 17.877333-210.432-55.424-42.282667-73.258667-16.682667-167.253333 57.216-209.92s183.893333 12.8 347.776-23.893333z m50.56 12.074667a40.32 40.32 0 1 1 0-80.64 40.32 40.32 0 0 1 0 80.64z m399.146667-225.749334a60.458667 60.458667 0 1 1 0-120.96 60.458667 60.458667 0 0 1 0 120.96z m-141.141333-161.28a32.256 32.256 0 1 1 0-64.469333 32.256 32.256 0 0 1 0 64.469333z m185.472 338.645334a32.256 32.256 0 1 1 0-64.469334 32.256 32.256 0 0 1 0 64.469334zM683.495893 943.36a32.256 32.256 0 1 1 0-64.512 32.256 32.256 0 0 1 0 64.512z m-346.709333 8.106667a32.256 32.256 0 1 1 0-64.554667 32.256 32.256 0 0 1 0 64.512zM54.503893 532.096a32.256 32.256 0 1 1 0-64.469333 32.256 32.256 0 0 1 0 64.469333z m185.472-354.773333a32.256 32.256 0 1 1 0-64.469334 32.256 32.256 0 0 1 0 64.469334zM510.09856 1024a60.458667 60.458667 0 1 1 0-120.96 60.458667 60.458667 0 0 1 0 120.96zM98.96256 338.645333a60.458667 60.458667 0 1 1 0-120.96 60.458667 60.458667 0 0 1 0 120.96z"
|
||
fill="#666666" p-id="8163"></path>
|
||
</svg>
|
||
<span>清洗</span>
|
||
</div>
|
||
<div onclick="" class="work-btn" data-type="割草" id="cutGrassBtn">
|
||
<svg t="1757746184101" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="9331" width="24" height="24">
|
||
<path
|
||
d="M878.148033 758.746563h-96.594448c-9.828909 0-17.355932-7.512901-17.355932-17.355933s7.527023-17.355932 17.355932-17.355932h72.883618l-85.028534-284.007447L189.234737 521.581774c-84.449532 12.144916-148.662244 85.607535-148.662245 171.215071v31.237853h63.054709c9.828909 0 17.355932 7.512901 17.355933 17.355932s-7.512901 17.355932-17.355933 17.355933H23.21656c-9.828909 0-17.355932-7.512901-17.355932-17.355933v-48.593785c0-102.963468 76.93663-191.466012 178.742094-205.347934l595.213858-83.87053c8.685027-1.158004 16.77693 4.053013 19.092937 12.144916l96.015446 320.456317c1.737005 5.211016 0.579002 10.986912-2.895009 15.618927-2.895009 4.053013-8.091903 6.9339-13.881921 6.9339z m0 0"
|
||
p-id="9332" fill="#666666"></path>
|
||
<path
|
||
d="M536.296893 758.746563H348.883893c-9.843031 0-17.355932-7.512901-17.355932-17.355933s7.512901-17.355932 17.355932-17.355932h187.413c9.828909 0 17.355932 7.512901 17.355932 17.355932s-7.512901 17.355932-17.355932 17.355933z m0 0"
|
||
p-id="9333" fill="#666666"></path>
|
||
<path
|
||
d="M898.977976 610.09844h-2.895009c-6.9339-1.158004-12.144916-6.354898-13.881922-12.723918l-41.066762-155.017142c-1.737005-5.775896 0-11.565914 4.053013-16.197928L993.84954 265.352291c4.632014-5.211016 12.144916-6.9339 19.078816-4.632014 6.9339 2.895009 10.986912 9.249907 10.986912 16.197929v153.859138c0 3.474011-1.158004 6.9339-2.895009 9.843031L913.438899 602.585539c-3.474011 4.632014-9.249907 7.512901-14.460923 7.512901z m-21.973825-167.74106l28.342845 108.753486 83.291528-125.530416v-104.700473l-111.634373 121.477403z m-576.389237-5.267504c-4.053013 0-8.091903-1.737005-11.565915-4.053013-4.053013-3.474011-5.790018-8.091903-5.790018-13.302919v-28.342845c0-62.461585 46.85678-115.687385 108.739364-123.779288l107.01648-14.460924c35.855746-4.632014 71.725614 6.36902 98.910455 30.07985 27.184841 23.71083 42.803768 57.843693 42.803768 94.292563 0 8.670905-6.354898 16.197929-15.039925 17.355932l-322.193322 42.803768c-1.158004-0.579002-1.737005-0.579002-2.895009-0.579002z m215.176842-150.39925c-4.053013 0-8.091903 0-12.144916 0.579002l-107.01648 14.460923c-44.540773 5.790018-78.659514 44.540773-78.659514 89.660548v8.670905l286.323454-38.171753c-3.474011-20.236819-13.881921-39.329757-29.500848-52.632676-16.197929-15.039925-37.592751-22.566948-59.001696-22.566949zM226.262608 849.565114C145.866089 849.565114 80.495373 784.194398 80.495373 703.797879s65.356594-145.767235 145.767235-145.767235 145.767235 65.370716 145.767236 145.767235-65.370716 145.767235-145.767236 145.767235z m0-256.243604c-61.317704 0-111.069493 49.751789-111.069492 111.055371s49.751789 110.476369 111.069492 110.476369 111.055371-49.751789 111.055371-111.055371-49.737667-110.476369-111.055371-110.476369zM658.9323 849.565114c-80.396519 0-145.767235-65.370716-145.767235-145.767235s65.370716-145.767235 145.767235-145.767235 145.767235 65.370716 145.767235 145.767235-65.370716 145.767235-145.767235 145.767235z m0-256.243604c-61.317704 0-111.055371 49.751789-111.055371 111.055371s49.737667 111.055371 111.055371 111.055371 111.055371-49.737667 111.055371-111.055371-49.751789-111.055371-111.055371-111.055371z m0 0"
|
||
p-id="9334" fill="#666666"></path>
|
||
<path
|
||
d="M162.614776 703.797879a63.629474 63.629474 0 0 0 95.436444 55.104026c19.686061-11.368206 31.816855-32.367613 31.816855-55.104026a63.629474 63.629474 0 0 0-95.436444-55.104026 63.629474 63.629474 0 0 0-31.816855 55.104026z m0 0M595.298589 703.797879a63.629474 63.629474 0 0 0 95.436444 55.104026c19.686061-11.368206 31.816855-32.367613 31.816856-55.104026a63.629474 63.629474 0 0 0-95.436444-55.104026 63.629474 63.629474 0 0 0-31.816856 55.104026z m0 0"
|
||
p-id="9335" fill="#666666"></path>
|
||
</svg>
|
||
<span>割草</span>
|
||
</div>
|
||
</div>
|
||
<div class="location" onclick="handleGotoView()">
|
||
<svg t="1752561121454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
p-id="3474" width="24" height="24">
|
||
<path
|
||
d="M554.666667 213.333333c157.866667 8.533333 285.866667 136.533333 298.666666 298.666667h85.333334v42.666667h-85.333334c-8.533333 157.866667-136.533333 285.866667-298.666666 298.666666v85.333334h-42.666667v-85.333334c-157.866667-8.533333-285.866667-136.533333-298.666667-298.666666H128v-42.666667h85.333333c8.533333-157.866667 136.533333-285.866667 298.666667-298.666667V128h42.666667v85.333333z m-21.333334 597.333334c153.6 0 277.333333-123.733333 277.333334-277.333334S686.933333 256 533.333333 256 256 379.733333 256 533.333333 379.733333 810.666667 533.333333 810.666667z"
|
||
fill="#666666" p-id="3475"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="location clear" onclick="location.reload()">
|
||
<svg t="1752654819621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||
p-id="5427" width="20" height="20">
|
||
<path
|
||
d="M452.225097 146.90005l-340.587939 340.587939c-13.073072 13.073072-34.058794 13.073072-47.131866 0-13.073072-13.073072-12.901058-34.058794 0-47.131866l340.587939-340.587939c13.073072-13.073072 34.058794-13.073072 47.131866 0C465.298169 112.841257 465.298169 133.826978 452.225097 146.90005L452.225097 146.90005z"
|
||
fill="#666666" p-id="5428"></path>
|
||
<path
|
||
d="M924.231816 618.734756l-340.587939 340.587939c-13.073072 13.073072-34.058794 13.073072-47.131866 0-13.073072-13.073072-12.901058-34.058794 0-47.131866l340.587939-340.587939c13.073072-13.073072 34.058794-13.073072 47.131866 0C937.304888 584.675962 937.132874 605.833697 924.231816 618.734756L924.231816 618.734756z"
|
||
fill="#666666" p-id="5429"></path>
|
||
<path
|
||
d="M451.193012 620.798925l-103.036452 103.036452c-13.073072 13.073072-34.058794 13.073072-47.131866 0-13.073072-13.073072-12.901058-34.058794 0-47.131866l103.036452-103.036452c13.073072-13.073072 34.058794-13.073072 47.131866 0C464.266084 586.740131 464.266084 607.897867 451.193012 620.798925L451.193012 620.798925z"
|
||
fill="#666666" p-id="5430"></path>
|
||
<path
|
||
d="M298.444482 524.987065l-74.654124 74.654124c-13.073072 13.073072-34.058794 13.073072-47.131866 0-13.073072-13.073072-12.901058-34.058794 0-47.131866l74.654124-74.654124c13.073072-13.073072 34.058794-13.073072 47.131866 0C311.34554 490.928271 311.34554 512.086007 298.444482 524.987065L298.444482 524.987065z"
|
||
fill="#666666" p-id="5431"></path>
|
||
<path
|
||
d="M545.28473 771.999328l-74.654124 74.654124c-13.073072 13.073072-34.058794 13.073072-47.131866 0-13.073072-13.073072-12.901058-34.058794 0-47.131866l74.654124-74.654124c13.073072-13.073072 34.058794-13.073072 47.131866 0C558.357803 737.940534 558.357803 758.926256 545.28473 771.999328L545.28473 771.999328z"
|
||
fill="#666666" p-id="5432"></path>
|
||
<path
|
||
d="M536.339997 959.322694 64.505291 487.660003c-13.073072-13.073072-13.073072-34.058794 0-47.131866 13.073072-13.073072 34.058794-12.901058 47.131866 0l471.834705 471.834705c13.073072 13.073072 13.073072 34.058794 0 47.131866C570.398791 972.395767 549.413069 972.395767 536.339997 959.322694L536.339997 959.322694z"
|
||
fill="#666666" p-id="5433"></path>
|
||
<path
|
||
d="M732.264069 763.570637 260.429363 291.735931c-13.073072-13.073072-13.073072-34.058794 0-47.131866 13.073072-13.073072 34.058794-12.901058 47.131866 0L779.223921 716.43877c13.073072 13.073072 13.073072 34.058794 0 47.131866C766.322862 776.643709 745.165127 776.471695 732.264069 763.570637L732.264069 763.570637z"
|
||
fill="#666666" p-id="5434"></path>
|
||
<path
|
||
d="M912.362842 219.490005l-107.680833-107.852847c-13.073072-13.073072-13.073072-34.058794 0-47.131866 13.073072-13.073072 34.058794-12.901058 47.131866 0l107.680833 107.852847c13.073072 13.073072 13.073072 34.058794 0 47.131866C946.421636 232.563077 925.263901 232.563077 912.362842 219.490005L912.362842 219.490005z"
|
||
fill="#666666" p-id="5435"></path>
|
||
<path
|
||
d="M587.256173 328.718965 405.437259 146.90005c-13.073072-13.073072-13.073072-34.058794 0-47.131866 13.073072-13.073072 34.058794-12.901058 47.131866 0l181.990929 181.990929c13.073072 13.073072 13.073072 34.058794 0 47.131866C621.486981 341.792038 600.329246 341.792038 587.256173 328.718965L587.256173 328.718965z"
|
||
fill="#666666" p-id="5436"></path>
|
||
<path
|
||
d="M877.09995 618.562741 695.281035 436.743827c-13.073072-13.073072-13.073072-34.058794 0-47.131866 13.073072-13.073072 34.058794-12.901058 47.131866 0l181.990929 181.990929c13.073072 13.073072 13.073072 34.058794 0 47.131866C911.330758 631.635814 890.173022 631.635814 877.09995 618.562741L877.09995 618.562741z"
|
||
fill="#666666" p-id="5437"></path>
|
||
<path
|
||
d="M959.322694 219.490005 742.240887 436.571813c-13.073072 13.073072-34.058794 13.073072-47.131866 0-13.073072-13.073072-12.901058-34.058794 0-47.131866l217.081807-217.081807c13.073072-13.073072 34.058794-13.073072 47.131866 0C972.395767 185.259197 972.395767 206.416933 959.322694 219.490005L959.322694 219.490005z"
|
||
fill="#666666" p-id="5438"></path>
|
||
<path
|
||
d="M851.641861 111.637158 634.38804 328.718965c-13.073072 13.073072-34.058794 13.073072-47.131866 0-13.073072-13.073072-12.901058-34.058794 0-47.131866L804.509995 64.505291c13.073072-13.073072 34.058794-13.073072 47.131866 0C864.714934 77.578364 864.54292 98.564085 851.641861 111.637158L851.641861 111.637158z"
|
||
fill="#666666" p-id="5439"></path>
|
||
</svg>
|
||
</div>
|
||
|
||
<div id="cutGrassPopover" class="popover" style="display:none;">
|
||
<button class="popover-btn" data-option="延边割草">延边割草</button>
|
||
<button class="popover-btn" data-option="全局割草">全局割草</button>
|
||
</div>
|
||
|
||
<!-- 全局割草弹框 -->
|
||
<div id="globalCutModal" class="modal" style="display:none;">
|
||
<div class="modal-content">
|
||
<div class="title">全局割草设置</div>
|
||
<div class="content">
|
||
<span>作业行距(米)</span>
|
||
<div class="number">
|
||
<button id="minus1" onclick="changeDistance(-1)"><svg t="1752455475653" class="icon1"
|
||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2358"
|
||
width="32" height="32">
|
||
<path
|
||
d="M801.171 547.589H222.83c-17.673 0-32-14.327-32-32s14.327-32 32-32h578.341c17.673 0 32 14.327 32 32s-14.327 32-32 32z"
|
||
fill="#000000" p-id="2359"></path>
|
||
</svg></button>
|
||
<input type="number" id="distance" value="0.8" min="0" max="10000" step="1"
|
||
oninput="changeDistance(0)" />
|
||
<button id="add1" onclick="changeDistance(1)"><svg t="1752455515534" class="icon1"
|
||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3404"
|
||
width="24" height="24">
|
||
<path
|
||
d="M921.013953 474.621694 549.377794 474.621694 549.377794 102.986559c0-20.635993-16.746406-37.381375-37.382399-37.381375-20.62883 0-37.373189 16.745383-37.373189 37.381375l0 371.635135L102.986047 474.621694c-20.635993 0-37.381375 16.746406-37.381375 37.382399 0 20.62883 16.745383 37.373189 37.381375 37.373189l371.635135 0 0 371.636159c0 20.669762 16.744359 37.380352 37.373189 37.380352 20.635993 0 37.382399-16.71059 37.382399-37.380352L549.376771 549.377282l371.636159 0c20.669762 0 37.380352-16.744359 37.380352-37.373189C958.394305 491.3681 941.683714 474.621694 921.013953 474.621694z"
|
||
fill="#000000" p-id="3405"></path>
|
||
</svg></button>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<span>作业边距(米)</span>
|
||
<div class="number">
|
||
<button id="minus2" onclick="changeDistance(-1)"><svg t="1752455475653" class="icon1"
|
||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2358"
|
||
width="32" height="32">
|
||
<path
|
||
d="M801.171 547.589H222.83c-17.673 0-32-14.327-32-32s14.327-32 32-32h578.341c17.673 0 32 14.327 32 32s-14.327 32-32 32z"
|
||
fill="#000000" p-id="2359"></path>
|
||
</svg></button>
|
||
<input type="number" id="distance" value="0.8" min="0" max="10000" step="1"
|
||
oninput="changeDistance(0)" />
|
||
<button id="add2" onclick="changeDistance(1)"><svg t="1752455515534" class="icon1"
|
||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3404"
|
||
width="24" height="24">
|
||
<path
|
||
d="M921.013953 474.621694 549.377794 474.621694 549.377794 102.986559c0-20.635993-16.746406-37.381375-37.382399-37.381375-20.62883 0-37.373189 16.745383-37.373189 37.381375l0 371.635135L102.986047 474.621694c-20.635993 0-37.381375 16.746406-37.381375 37.382399 0 20.62883 16.745383 37.373189 37.381375 37.373189l371.635135 0 0 371.636159c0 20.669762 16.744359 37.380352 37.373189 37.380352 20.635993 0 37.382399-16.71059 37.382399-37.380352L549.376771 549.377282l371.636159 0c20.669762 0 37.380352-16.744359 37.380352-37.373189C958.394305 491.3681 941.683714 474.621694 921.013953 474.621694z"
|
||
fill="#000000" p-id="3405"></path>
|
||
</svg></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-actions">
|
||
<button id="globalCutCancel" class="btn-cancle">取消</button>
|
||
<button id="globalCutConfirm" class="btn-confirm">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modelChoose none">
|
||
|
||
<p>
|
||
模式选择
|
||
</p>
|
||
<div class="nextstep" onclick="handleNextStep()">
|
||
<span><svg t="1752212182977" class="icon" viewBox="0 0 1213 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="2318" width="18" height="18">
|
||
<path
|
||
d="M1004.046124 568.908272l-379.622349 358.119266a54.421386 54.421386 0 0 0 0.26547 80.399538c23.778543 22.185722 62.195869 22.071949 85.822715-0.227546l470.3373-443.67651A56.886466 56.886466 0 0 0 1213.57794 510.580683a54.876477 54.876477 0 0 0-17.634804-41.489196L716.466076 16.844083A63.561145 63.561145 0 0 0 630.681286 16.578612a54.421386 54.421386 0 0 0-0.26547 80.437463L1010.038165 455.135341H56.886466a56.886466 56.886466 0 0 0 0 113.772931h947.159658z"
|
||
fill="#666666" p-id="2319"></path>
|
||
</svg></span>
|
||
</div>
|
||
|
||
<div class="glass-radio-group">
|
||
<input type="radio" name="plan" id="glass-silver" value="0" checked />
|
||
<label for="glass-silver">
|
||
|
||
弓字作业
|
||
|
||
</label>
|
||
|
||
|
||
<input type="radio" name="plan" id="glass-platinum" value="2" />
|
||
<label for="glass-platinum">单点定位</label>
|
||
|
||
<div class="glass-glider"></div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="toolboxBottom none ">
|
||
|
||
<div class="boxcontainer">
|
||
<!-- <div class="laststep" onclick="handleLastStep()">
|
||
<svg t="1752212908617" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3357" width="18" height="18">
|
||
<path
|
||
d="M456.064 949.248a29.44 29.44 0 0 1-20.928-8.704l-413.44-413.44a74.304 74.304 0 0 1 0-104.96L435.136 8.64a29.696 29.696 0 0 1 41.984 41.984l-413.44 413.44a14.976 14.976 0 0 0 0 21.12l413.44 413.376a29.76 29.76 0 0 1-21.056 50.688z"
|
||
fill="#666666" p-id="3358"></path>
|
||
<path
|
||
d="M989.824 504.256H70.144a29.632 29.632 0 1 1 0-59.264h919.68a29.568 29.568 0 0 1 0 59.264z"
|
||
fill="#666666" p-id="3359"></path>
|
||
</svg>
|
||
</div> -->
|
||
<!-- 地块代码 -->
|
||
<div class="add">
|
||
<div class="iconPic">
|
||
<svg t="1751854285076" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="5583" width="20" height="20">
|
||
<path
|
||
d="M554.76 549.889v341c0 26.51-21.491 48-48 48-26.51 0-48-21.49-48-48v-341H114.172c-26.51 0-48-21.49-48-48s21.49-48 48-48H458.76v-340c0-26.51 21.49-48 48-48s48 21.49 48 48v340h346.414c26.51 0 48 21.49 48 48s-21.49 48-48 48H554.76z"
|
||
fill="#ffffff" p-id="5584"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="operation">
|
||
|
||
<div><select onchange="handleSelecMethod()" id="methodSelect">
|
||
<option value="2">作业机器人</option>
|
||
<option value="1">十字准星</option>
|
||
|
||
</select></div>
|
||
<div id="startSelect"><svg t="1751872220000" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="6963" width="32" height="32">
|
||
<path
|
||
d="M512 298.666667c117.333333 0 213.333333 96 213.333333 213.333333s-96 213.333333-213.333333 213.333333-213.333333-96-213.333333-213.333333S394.666667 298.666667 512 298.666667z"
|
||
p-id="6964" fill="#d81e06"></path>
|
||
</svg>
|
||
<select>
|
||
<option value="1">作业区域</option>
|
||
<option value="2">障碍物</option>
|
||
</select>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="step">
|
||
<div id="delete"><svg t="1751872478696" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="9075" width="32" height="32">
|
||
<path
|
||
d="M814.29 136.567H207.664c-55.752 0-101.274 13.3-101.274 56.776v26.086h808.663v-26.086c0.511-42.965-45.011-56.776-100.763-56.776"
|
||
p-id="9076" fill="#999999"></path>
|
||
<path
|
||
d="M723.245 191.808l-19.948-140.66c-3.58-27.62-29.667-50.125-57.287-50.125H376.456c-28.132 0-53.707 22.505-57.799 50.126l-19.948 141.17c-3.58 27.621 15.856 22.506 43.477 22.506h337.07c28.133-0.511 47.57 4.604 43.989-23.017z m-360.6-28.643L377.99 51.66h265.463l15.344 111.505H362.645zM831.17 282.342H190.785c-36.827 0-64.959 30.177-61.378 67.005l55.24 607.648c3.58 36.827 36.316 67.005 73.655 67.005h505.35c36.828 0 70.074-30.178 73.655-67.005l55.24-607.137c3.58-36.827-24.04-67.516-61.378-67.516zM376.456 953.415H245.514l-43.476-592.816h174.418v592.816z m221.474 0H423.512V360.599H597.93v592.816z m177.487 0H646.01V360.599h172.883l-43.476 592.816z"
|
||
p-id="9077" fill="#999999"></path>
|
||
</svg>
|
||
<span>删除</span>
|
||
</div>
|
||
<div id="retreate"><svg t="1751872557869" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="10218" width="32" height="32">
|
||
<path
|
||
d="M581.056 288.32H232.96l108.352-102.208c15.552-15.744 19.456-31.104 4.16-46.208-16.064-15.872-32.576-15.808-48.64 0l-145.92 144.768c-8.768 8.832-23.488 20.608-22.08 32.448l0.64 4.8-0.64 4.864c-1.344 11.776 6.4 18.24 14.848 26.816l147.648 145.216c16.064 15.808 38.08 20.992 54.144 5.12 15.296-15.104 3.84-38.208-11.328-53.504L233.152 353.6 581.056 352c126.464 0 250.944 111.488 250.944 236.16C832 712.832 707.52 832 581.056 832H246.4c-22.592 0-29.696 9.6-29.696 32.256s7.04 31.744 29.696 31.744H581.12C755.136 896 896 757.696 896 588.16c0-169.408-140.8-299.84-314.944-299.84z"
|
||
fill="#999999" p-id="10219"></path>
|
||
<path
|
||
d="M323.392 192a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM320.192 514.048a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM237.824 896a32 32 0 1 1 0-64 32 32 0 0 1 0 64z"
|
||
fill="#999999" p-id="10220"></path>
|
||
</svg><span>撤回</span></div>
|
||
<div id="done"><svg t="1751872597458" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="11275" width="32" height="32">
|
||
<path
|
||
d="M439.3984 677.1712l411.8016-411.8016a32 32 0 0 1 45.2608 45.2608l-434.432 434.432a32 32 0 0 1-45.2608 0L127.1296 455.424a32 32 0 1 1 45.2608-45.2608l267.008 267.008z"
|
||
fill="#999999" p-id="11276"></path>
|
||
</svg><span>完成</span></div>
|
||
</div>
|
||
<!-- 航线代码 -->
|
||
<div class="direction none">
|
||
<div><span>作业行距（米）</span>
|
||
<div class="number">
|
||
<button id="minus" onclick="changeDistance(-1)"><svg t="1752455475653" class="icon"
|
||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2358"
|
||
width="32" height="32">
|
||
<path
|
||
d="M801.171 547.589H222.83c-17.673 0-32-14.327-32-32s14.327-32 32-32h578.341c17.673 0 32 14.327 32 32s-14.327 32-32 32z"
|
||
fill="#000000" p-id="2359"></path>
|
||
</svg></button>
|
||
<input type="number" id="distance" value="0.8" min="0" max="10000" step="1"
|
||
oninput="changeDistance(0)" />
|
||
<button id="add" onclick="changeDistance(1)"><svg t="1752455515534" class="icon"
|
||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3404"
|
||
width="24" height="24">
|
||
<path
|
||
d="M921.013953 474.621694 549.377794 474.621694 549.377794 102.986559c0-20.635993-16.746406-37.381375-37.382399-37.381375-20.62883 0-37.373189 16.745383-37.373189 37.381375l0 371.635135L102.986047 474.621694c-20.635993 0-37.381375 16.746406-37.381375 37.382399 0 20.62883 16.745383 37.373189 37.381375 37.373189l371.635135 0 0 371.636159c0 20.669762 16.744359 37.380352 37.373189 37.380352 20.635993 0 37.382399-16.71059 37.382399-37.380352L549.376771 549.377282l371.636159 0c20.669762 0 37.380352-16.744359 37.380352-37.373189C958.394305 491.3681 941.683714 474.621694 921.013953 474.621694z"
|
||
fill="#000000" p-id="3405"></path>
|
||
</svg></button>
|
||
</div>
|
||
</div>
|
||
<div><span>航线方向</span>
|
||
<button onclick="setDirectionEvent()">设置</button>
|
||
</div>
|
||
</div>
|
||
<!-- From Uiverse.io by JaydipPrajapati1910 -->
|
||
<div class="btn-container">
|
||
|
||
<label class="switch btn-color-mode-switch">
|
||
<input value="1" id="color_mode" name="color_mode" type="checkbox">
|
||
<label class="btn-color-mode-switch-inner" data-off="地块" data-on="航线" for="color_mode"></label>
|
||
</label>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="directionBox none">
|
||
<div class="header">
|
||
<span onclick="handleCancelDirection()"><svg t="1752212908617" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3357" width="18" height="18">
|
||
<path
|
||
d="M456.064 949.248a29.44 29.44 0 0 1-20.928-8.704l-413.44-413.44a74.304 74.304 0 0 1 0-104.96L435.136 8.64a29.696 29.696 0 0 1 41.984 41.984l-413.44 413.44a14.976 14.976 0 0 0 0 21.12l413.44 413.376a29.76 29.76 0 0 1-21.056 50.688z"
|
||
fill="#666666" p-id="3358"></path>
|
||
<path
|
||
d="M989.824 504.256H70.144a29.632 29.632 0 1 1 0-59.264h919.68a29.568 29.568 0 0 1 0 59.264z"
|
||
fill="#666666" p-id="3359"></path>
|
||
</svg></span>
|
||
<span>航线方向</span>
|
||
<span></span>
|
||
</div>
|
||
<div class="form">
|
||
<div><span>最优航向</span>
|
||
<div class="container">
|
||
<input type="checkbox" class="checkbox" id="checkbox" checked onchange="changeAngle(this) ">
|
||
<label class="switch" for="checkbox">
|
||
<span class="slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>航线方向</div>
|
||
<div class="slider-container"><button onclick="changeDirection(-1)"><svg t="1752455475653"
|
||
class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="2358" width="28" height="28">
|
||
<path
|
||
d="M801.171 547.589H222.83c-17.673 0-32-14.327-32-32s14.327-32 32-32h578.341c17.673 0 32 14.327 32 32s-14.327 32-32 32z"
|
||
fill="#000000" p-id="2359"></path>
|
||
</svg></button>
|
||
<input type="range" min="0" max="360" value="0" id="directionSlider"
|
||
oninput="changeDirectionValue(this.value)">
|
||
<button onclick="changeDirection(1)"><svg t="1752455515534" class="icon"
|
||
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3404"
|
||
width="20" height="20">
|
||
<path
|
||
d="M921.013953 474.621694 549.377794 474.621694 549.377794 102.986559c0-20.635993-16.746406-37.381375-37.382399-37.381375-20.62883 0-37.373189 16.745383-37.373189 37.381375l0 371.635135L102.986047 474.621694c-20.635993 0-37.381375 16.746406-37.381375 37.382399 0 20.62883 16.745383 37.373189 37.381375 37.373189l371.635135 0 0 371.636159c0 20.669762 16.744359 37.380352 37.373189 37.380352 20.635993 0 37.382399-16.71059 37.382399-37.380352L549.376771 549.377282l371.636159 0c20.669762 0 37.380352-16.744359 37.380352-37.373189C958.394305 491.3681 941.683714 474.621694 921.013953 474.621694z"
|
||
fill="#000000" p-id="3405"></path>
|
||
</svg></button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 航线方向 -->
|
||
</div>
|
||
<div class="loading-container none ">
|
||
<div class="loading small" title="小尺寸"></div>
|
||
</div>
|
||
|
||
<!-- 列表-->
|
||
<div class="list">
|
||
<div class="top">
|
||
<div>共有<span class="count">1条</span>数据</div>
|
||
<div onclick="handleHideList()"><svg t="1752496625732" class="icon" viewBox="0 0 1024 1024"
|
||
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2318" width="20" height="20">
|
||
<path
|
||
d="M551.424 512l195.072-195.072c9.728-9.728 9.728-25.6 0-36.864l-1.536-1.536c-9.728-9.728-25.6-9.728-35.328 0L514.56 475.136 319.488 280.064c-9.728-9.728-25.6-9.728-35.328 0l-1.536 1.536c-9.728 9.728-9.728 25.6 0 36.864L477.696 512 282.624 707.072c-9.728 9.728-9.728 25.6 0 36.864l1.536 1.536c9.728 9.728 25.6 9.728 35.328 0L514.56 548.864l195.072 195.072c9.728 9.728 25.6 9.728 35.328 0l1.536-1.536c9.728-9.728 9.728-25.6 0-36.864L551.424 512z"
|
||
fill="#666666" p-id="2319"></path>
|
||
</svg></div>
|
||
</div>
|
||
<div class="item-list">
|
||
|
||
<div class="item" onclick="handleItemClick(event)" data-name="234">
|
||
<img src="" alt="">
|
||
<div class="areaname">123</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||
<script src="dj.js"></script>
|
||
<script src="./coordtransform.js"></script>
|
||
<script src="./TracePoint/tracePoint.js"> </script>
|
||
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
||
<script src="./websocket.js"></script>
|
||
<script src="https://unpkg.com/leaflet-simple-map-screenshoter"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||
<script>
|
||
document.querySelector('header .back').addEventListener('click', handkegoback);
|
||
function handkegoback() {
|
||
console.log('返回')
|
||
RPJavaFragmentInterface.navigateTo("StatusFragment");
|
||
}
|
||
|
||
// 绑定保存按钮事件（如果按钮是动态生成的，需确保选择器正确）
|
||
|
||
</script>
|
||
|
||
<script>
|
||
// 1. 初始化地图（默认 OSM + 本地瓦片）
|
||
const mapManager = new MapManager("map", {
|
||
center: [41.201539, 120.592946,],
|
||
zoom: 18,
|
||
baseLayer: "gaode" // ✅ 默认就是 OSM，可改成 "satellite" 或 "cartodb"
|
||
});
|
||
|
||
// 巡检
|
||
// fetch('./liaoning_inspection.json')
|
||
// .then(response => response.json())
|
||
// .then(config => {
|
||
// mapManager.drawPath(config, "pink");
|
||
// })
|
||
|
||
// 延边割草
|
||
// mapManager.drawLineHole();
|
||
// mapManager.drawOuterLine([
|
||
// {
|
||
// "lat": 41.20159352618409,
|
||
// "lon": 120.59300243854524
|
||
// },
|
||
// {
|
||
// "lat": 41.20159554426899,
|
||
// "lon": 120.59276908636095
|
||
// },
|
||
// {
|
||
// "lat": 41.20143006110195,
|
||
// "lon": 120.59253305196765
|
||
// },
|
||
// {
|
||
// "lat": 41.201187889859376,
|
||
// "lon": 120.59226751327516
|
||
// },
|
||
// {
|
||
// "lat": 41.20116569078397,
|
||
// "lon": 120.59192687273027
|
||
// },
|
||
// {
|
||
// "lat": 41.20114752789848,
|
||
// "lon": 120.59180885553361
|
||
// },
|
||
// {
|
||
// "lat": 41.20104864098909,
|
||
// "lon": 120.59166401624681
|
||
// },
|
||
// {
|
||
// "lat": 41.20099011601318,
|
||
// "lon": 120.59143334627153
|
||
// },
|
||
// {
|
||
// "lat": 41.200899301291756,
|
||
// "lon": 120.59126168489458
|
||
// },
|
||
// {
|
||
// "lat": 41.20079637778845,
|
||
// "lon": 120.59101760387422
|
||
// },
|
||
// {
|
||
// "lat": 41.20067125488018,
|
||
// "lon": 120.59093177318574
|
||
// },
|
||
// {
|
||
// "lat": 41.20058447594846,
|
||
// "lon": 120.59091567993165
|
||
// },
|
||
// {
|
||
// "lat": 41.20049164254529,
|
||
// "lon": 120.59105515480043
|
||
// },
|
||
// {
|
||
// "lat": 41.20040486337544,
|
||
// "lon": 120.59119731187822
|
||
// },
|
||
// {
|
||
// "lat": 41.20031606596621,
|
||
// "lon": 120.59133946895601
|
||
// },
|
||
// {
|
||
// "lat": 41.20023937719769,
|
||
// "lon": 120.59147357940675
|
||
// },
|
||
// {
|
||
// "lat": 41.20020708716299,
|
||
// "lon": 120.59159964323045
|
||
// },
|
||
// {
|
||
// "lat": 41.20027570346765,
|
||
// "lon": 120.59181153774263
|
||
// },
|
||
// {
|
||
// "lat": 41.200398809010444,
|
||
// "lon": 120.59196442365648
|
||
// },
|
||
// {
|
||
// "lat": 41.20052796867526,
|
||
// "lon": 120.59206634759906
|
||
// },
|
||
// {
|
||
// "lat": 41.200651073743536,
|
||
// "lon": 120.59220314025879
|
||
// },
|
||
// {
|
||
// "lat": 41.20061071145159,
|
||
// "lon": 120.59239357709886
|
||
// },
|
||
// {
|
||
// "lat": 41.20065309185747,
|
||
// "lon": 120.59261351823808
|
||
// },
|
||
// {
|
||
// "lat": 41.2008286675324,
|
||
// "lon": 120.592779815197
|
||
// },
|
||
// {
|
||
// "lat": 41.20096993497486,
|
||
// "lon": 120.59283077716829
|
||
// },
|
||
// {
|
||
// "lat": 41.20105065909079,
|
||
// "lon": 120.59297829866411
|
||
// },
|
||
// {
|
||
// "lat": 41.20121614321718,
|
||
// "lon": 120.59298366308214
|
||
// },
|
||
// {
|
||
// "lat": 41.20132915652644,
|
||
// "lon": 120.59306144714357
|
||
// },
|
||
// {
|
||
// "lat": 41.20158545384395,
|
||
// "lon": 120.59314191341402
|
||
// },
|
||
// {
|
||
// "lat": 41.20159251714162,
|
||
// "lon": 120.59307888150217
|
||
// }
|
||
// ]);
|
||
// mapManager.generateRoute();
|
||
|
||
// 1. 创建一个自定义中心点 Marker（divIcon）
|
||
|
||
|
||
// 2. 加一个点
|
||
// const marker = L.marker([32.043, 120.808]).addTo(mapManager.map);
|
||
// marker.bindPopup("这是一个标记点").openPopup();
|
||
// const point = [32.08599985199932, 120.77586450935124];
|
||
// const gcj02Point = gaodePoint(point[1], point[0]);
|
||
// const marker = L.marker(gcj02Point).addTo(mapManager.map);
|
||
// marker.bindPopup("目标点").openPopup();
|
||
const wgs84Coord = [32.08599985199932, 120.77586450935124]; // [lat, lng]
|
||
|
||
// 转换为 GCJ-02（高德使用的坐标）
|
||
// const gcjCoord = coordtransform.wgs84togcj02(wgs84Coord[1], wgs84Coord[0]);
|
||
// const gcjLatLng = [gcjCoord[1], gcjCoord[0]]; // Leaflet [lat, lng]
|
||
// const centerMarker1 = L.marker(gcjLatLng, { draggable: true }).addTo(mapManager.map)
|
||
// .bindPopup("当前位置（GCJ-02）").openPopup();
|
||
|
||
// 3. 画一条线
|
||
// const polyline = L.polyline([
|
||
// [32.043, 120.808],
|
||
// [32.044, 120.809]
|
||
// ], { color: 'red' }).addTo(mapManager.map);
|
||
|
||
// polyline.remove();
|
||
|
||
// 4. 画一个多边形
|
||
// const polygon = L.polygon([
|
||
// [32.0425, 120.8075],
|
||
// [32.0435, 120.8075],
|
||
// [32.043, 120.8065]
|
||
// ], { color: 'blue' }).addTo(mapManager.map);
|
||
|
||
// 5. 设置中心点
|
||
mapManager.setBaseLayer("gaode"); // 切换到底图（卫星）
|
||
// let ismaker = false;//打点标记
|
||
// let makerpoints = []; // 存储标记点坐标(GCJ-02)
|
||
// let makerpoints1 = []; // 存储标记点坐标(WGS-84)
|
||
// let targetpoint = {};
|
||
let pointdom = document.querySelector('#startpoint');
|
||
let completedom = document.querySelector('.complete');
|
||
// let lastReceivedData = null;
|
||
// let isreceive = false;
|
||
// let maker222;//手动打点
|
||
// let newPoints = [];
|
||
// let endPoint = null;//方向上的终点
|
||
// let point_start = null;//起始点的坐标
|
||
// let directionAngle = 0;//路径规划角度
|
||
// let currentSelectedIndex = -1;//选择起始点的index
|
||
// let currentMarker = null; // 当前选中的标记
|
||
|
||
// var trackPoints = []; // 存储轨迹点(GCJ-02)
|
||
// var completedTrackPoints = []; // 存储完成后的轨迹点(GCJ-02)
|
||
// let isCompleted = false; // 标记是否已点击完成
|
||
|
||
// let lon = 120.81992468426961;
|
||
// let beforeGeneratePointNum = 0;
|
||
// let map;
|
||
// let lock = 0;
|
||
// let isclickgenerate = false;//是否点击生成路径
|
||
|
||
// let isgenerate = false;//是否生成路径
|
||
// let currentPolyline = null;//绘制方向线变量
|
||
// let polyline1 = null;
|
||
// let newtargetFlag = 0;
|
||
// let isResume = false;//是否停止还是恢复
|
||
// let bakcmarker = null;
|
||
// let isObstacleEnabled = false;//是否选择避障
|
||
// let startMarker = null;//选择方向的marker
|
||
// let step = 1;
|
||
|
||
const tp = new TracePoint();
|
||
|
||
|
||
// 都是未转换过的点
|
||
// let startpoint = null;//起始点
|
||
// let endpoint = null;//终点
|
||
// let angle = -1;//角度
|
||
// let outerPoint = [];//外边框的点
|
||
// let outerPoint1 = [];//外边框的点（十字准星）
|
||
// let holePoints = [];//孔洞点
|
||
// let holePoints1 = [];//孔洞点（十字准星）
|
||
|
||
|
||
|
||
|
||
// // 实际点击完成之后的点
|
||
// let _outerPoints = [];
|
||
// let _holePoints = [];
|
||
// let _startpoint = null;
|
||
// let _endpoint = null;
|
||
// let _angle = 0;
|
||
|
||
// let directionLine = null;//方向线
|
||
// let backPoint = null;//返航点
|
||
// let mapStep = 1;//1 作业区域 2障碍物
|
||
// let centerMarker = null;//中心点
|
||
// let method = 2;//1:十字准星 2：手机
|
||
// let planModel = 0;//0 弓字 1 回子 2 单点
|
||
|
||
|
||
// let markers = []; // 存储所有手机AMap.Marker实例
|
||
// let markers1 = []; // 存储所有十字准星AMap.Marker实例
|
||
// let markerHole = [];
|
||
// let markerHole1 = [];//十字准星
|
||
// let polygon = null;//圈地的区域
|
||
// let polygonHole = null;//孔洞的区域
|
||
// let completeFlag = false; // 标记是否点击完成
|
||
// let savePath = {
|
||
// name: '',
|
||
// path: [],
|
||
// outer: [],
|
||
// img: '',
|
||
// planModel: 0,
|
||
|
||
// }
|
||
// let polybefore = null;//之前绘制的路径
|
||
// let isreceiveCompletePointFirst = false;//是否收到第一个完成点
|
||
// // 状态变量
|
||
// let isPaused = true;
|
||
// let isStopped = true;
|
||
// let saveData = [];//保存的咧白哦数据
|
||
// let needFitView = false; // 标记是否需要调整视图
|
||
// let twopolyline = null;//两点之间的连线
|
||
// let twopolyArea = null;
|
||
// let lineLengthLabel = null;//距离标志
|
||
// let headingAngel = 0;//航向角
|
||
// let polylinePath = null;//绘制路径的、线
|
||
// let pointCenter = [];//打点 高德点
|
||
|
||
|
||
const wsClient = new WebSocketClient('ws://127.0.0.1:8088/websocket');
|
||
wsClient.connect();
|
||
|
||
// 设置事件回调
|
||
wsClient.onConnect = () => {
|
||
console.log('连接成功，发送初始化消息');
|
||
//;
|
||
};
|
||
function handleHideList() {
|
||
document.querySelector('.list').classList.remove('active')
|
||
}
|
||
function sendWorkFinishSignal() {
|
||
const pauseResumeBtn = document.getElementById('pause-resume');
|
||
const stopBtn = document.getElementById('stop1');
|
||
const statusLabel = document.getElementById('status-label');
|
||
mapManager.setStatus("isStopped", true);
|
||
mapManager.setStatus("isPaused", true);
|
||
// 切换到暂停状态（显示暂停图标）
|
||
pauseResumeBtn.classList.remove('resume');
|
||
pauseResumeBtn.classList.add('pause');
|
||
pauseResumeBtn.innerHTML = '<i class="fa fa-pause icon"></i>';
|
||
|
||
pauseResumeBtn.disabled = true; // 禁用暂停/继续按钮
|
||
pauseResumeBtn.style.opacity = '0.5';
|
||
|
||
statusLabel.textContent = '已停止';
|
||
showStatusLabel();
|
||
console.log('已停止');
|
||
|
||
|
||
}
|
||
|
||
|
||
function showStatusLabel() {
|
||
const pauseResumeBtn = document.getElementById('pause-resume');
|
||
const stopBtn = document.getElementById('stop1');
|
||
const statusLabel = document.getElementById('status-label');
|
||
statusLabel.style.display = 'block';
|
||
|
||
// 3秒后隐藏状态标签
|
||
clearTimeout(statusLabel.timer);
|
||
statusLabel.timer = setTimeout(() => {
|
||
statusLabel.style.display = 'none';
|
||
}, 3000);
|
||
}
|
||
function handleStart() {
|
||
document.querySelector('#startwork').classList.add('none');
|
||
document.querySelector('.control-container').classList.remove('none');
|
||
if (mapManager.planModel == 2) {
|
||
tp.setMode(TPMode.TRACK);
|
||
} else {
|
||
tp.setMode(TPMode.NAVIGATION);
|
||
|
||
}
|
||
stopEvent();
|
||
RPJavaInterface.startRPWork();
|
||
}
|
||
function stopEvent() {
|
||
const pauseResumeBtn = document.getElementById('pause-resume');
|
||
const stopBtn = document.getElementById('stop1');
|
||
const statusLabel = document.getElementById('status-label');
|
||
mapManager.setStatus("isStopped", false);
|
||
mapManager.setStatus("isPaused", false);
|
||
// 暂停/继续按钮点击事件
|
||
pauseResumeBtn.addEventListener('click', function () {
|
||
if (mapManager.isStopped) return; // 已停止时不响应
|
||
mapManager.setStatus("isPaused", !mapManager.isPaused);
|
||
if (mapManager.isPaused) {
|
||
// 切换到暂停状态
|
||
pauseResumeBtn.classList.remove('resume');
|
||
pauseResumeBtn.classList.add('pause');
|
||
pauseResumeBtn.innerHTML = '<i class="fa fa-play icon"></i>';
|
||
statusLabel.textContent = '暂停中';
|
||
showStatusLabel();
|
||
RPJavaInterface.pauseRPWork();
|
||
console.log('已暂停');
|
||
} else {
|
||
// 切换到继续状态
|
||
pauseResumeBtn.classList.remove('pause');
|
||
pauseResumeBtn.classList.add('resume');
|
||
pauseResumeBtn.innerHTML = '<i class="fa fa-pause icon"></i>';
|
||
statusLabel.textContent = '运行中';
|
||
showStatusLabel();
|
||
RPJavaInterface.resumeRPWork()
|
||
console.log('已继续');
|
||
}
|
||
});
|
||
|
||
// 停止按钮点击事件
|
||
stopBtn.addEventListener('click', function () {
|
||
mapManager.setStatus("isStopped", true);
|
||
mapManager.setStatus("isPaused", true);
|
||
|
||
// 切换到暂停状态（显示暂停图标）
|
||
pauseResumeBtn.classList.remove('resume');
|
||
pauseResumeBtn.classList.add('pause');
|
||
pauseResumeBtn.innerHTML = '<i class="fa fa-play icon"></i>';
|
||
|
||
pauseResumeBtn.disabled = true; // 禁用暂停/继续按钮
|
||
pauseResumeBtn.style.opacity = '0.5';
|
||
|
||
statusLabel.textContent = '已停止';
|
||
showStatusLabel();
|
||
setInterval(() => {
|
||
document.querySelector('.card').remove();
|
||
|
||
}, 1000)
|
||
init();
|
||
mapManager.clearAllLayer();
|
||
|
||
// if (currentMarker) {
|
||
// map.add(currentMarker);
|
||
// }
|
||
RPJavaInterface.stopRPWork();
|
||
console.log('已停止');
|
||
});
|
||
|
||
// 显示状态标签
|
||
|
||
// 鼠标悬停效果
|
||
pauseResumeBtn.addEventListener('mouseenter', function () {
|
||
if (mapManager.isPaused) {
|
||
statusLabel.textContent = '点击继续';
|
||
showStatusLabel();
|
||
} else {
|
||
statusLabel.textContent = '点击暂停';
|
||
showStatusLabel();
|
||
}
|
||
});
|
||
|
||
stopBtn.addEventListener('mouseenter', function () {
|
||
statusLabel.textContent = '点击停止';
|
||
showStatusLabel();
|
||
});
|
||
}
|
||
|
||
function handleItemClick(e) {
|
||
if (!document.querySelector('.modelChoose').classList.contains('none')) {
|
||
document.querySelector('.modelChoose').classList.add('none');
|
||
}
|
||
if (!mapManager.isStopped) {
|
||
alert('请先停止作业');
|
||
return;
|
||
}
|
||
const element = e.currentTarget;
|
||
|
||
// 获取data-name属性值
|
||
const name = element.dataset.name;
|
||
const data = {
|
||
"module": "RoutePlan",
|
||
"action": "getPointDataByWorkNameFromDB",
|
||
"from": "JS",
|
||
"to": "Android",
|
||
"data": {
|
||
"workName": name
|
||
}
|
||
}
|
||
wsClient.send(JSON.stringify(data));
|
||
wsClient.onMessage = function (event) {
|
||
console.log('收到web消息', event);
|
||
const itemData = JSON.parse(JSON.parse(event).data).jsonData;
|
||
console.log(JSON.parse(itemData).path, '收到单块数据', JSON.parse(itemData));
|
||
const outer = JSON.parse(itemData).outer;
|
||
const path = JSON.parse(itemData).path;
|
||
const model = JSON.parse(itemData).planModel;
|
||
mapManager.clearAllLayer();
|
||
// if (currentMarker) {
|
||
// map.add(currentMarker);
|
||
// }
|
||
|
||
|
||
console.log(path, '路径', outer)
|
||
if (model != 2) {
|
||
mapManager.drawPath(path, "white");
|
||
|
||
} else {
|
||
mapManager.drawPath(outer, "white");
|
||
|
||
}
|
||
|
||
if (model != 2) {
|
||
mapManager.drawArea(outer, 'green');
|
||
}
|
||
if (document.querySelector('.card')) {
|
||
document.querySelector('.card').remove();
|
||
}
|
||
|
||
|
||
let html = `<div class="card">
|
||
<div class="card-title"><img src="${JSON.parse(itemData).img}" alt="">
|
||
<p>${JSON.parse(itemData).name}</p>
|
||
</div>
|
||
<div class="buttonlist">
|
||
<button onclick="handleStart()" id="startwork">开始作业</button>
|
||
<div class="control-container none">
|
||
<div id="pause-resume-container" class="relative">
|
||
<button id="pause-resume" class="btn pause">
|
||
<i class="fa fa-pause icon"></i>
|
||
</button>
|
||
<div id="status-label" class="status-label">运行中</div>
|
||
</div>
|
||
<button id="stop1" class="btn">
|
||
<i class="fa fa-stop icon"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>`;
|
||
const range = document.createRange();
|
||
// 2. 将HTML字符串转换为文档片段（无外层div）
|
||
const fragment = range.createContextualFragment(html);
|
||
// 3. 获取片段中的目标元素（.modalSave）
|
||
const modalElement = fragment.firstElementChild;
|
||
|
||
// 4. 添加到页面
|
||
document.body.appendChild(modalElement);
|
||
console.log('发点', planModel, model)
|
||
if (model != 2) {
|
||
RPJavaInterface.generatePointToJava(JSON.stringify(path));
|
||
} else {
|
||
RPJavaInterface.generatePointToJava(JSON.stringify(outer));
|
||
}
|
||
}
|
||
document.querySelector('.list').classList.remove('active');
|
||
document.querySelector('.toolboxBottom').classList.add('none');
|
||
}
|
||
function handleShowList() {
|
||
|
||
|
||
const html = ` <div class="item-list-loading">
|
||
<div class="loading small" title=""></div>
|
||
</div>`;
|
||
document.querySelector('.item-list').innerHTML = html;
|
||
document.querySelector('.list').classList.add('active');
|
||
|
||
const data = {
|
||
"module": "RoutePlan",
|
||
"action": "getAllPointDataFromDB",
|
||
"from": "JS",
|
||
"to": "Android",
|
||
"data": {
|
||
|
||
}
|
||
}
|
||
wsClient.send(JSON.stringify(data));
|
||
wsClient.onMessage = function (event) {
|
||
console.log(event.data, '收到web消息', event)
|
||
const list = JSON.parse(event).data;
|
||
console.log(JSON.parse(list), '收到地块列表')
|
||
const html = JSON.parse(list).map(item =>
|
||
|
||
|
||
` <div class="item" onclick="handleItemClick(event)" data-name="${JSON.parse(item.jsonData).name}">
|
||
<img src="${JSON.parse(item.jsonData).img}" alt="">
|
||
<div class="areaname">${JSON.parse(item.jsonData).name}</div>
|
||
</div>`).join('');
|
||
document.querySelector('.item-list').innerHTML = html;
|
||
document.querySelector('.list .count').innerHTML = JSON.parse(list).length + '条';
|
||
|
||
console.log("展示地块列表", list)
|
||
}
|
||
|
||
// const list = localStorage.getItem('savePath');
|
||
|
||
}
|
||
|
||
|
||
|
||
function handleChooseModel() {
|
||
// if (!isStopped) {
|
||
// // 发送弹窗信号
|
||
// }
|
||
document.querySelector('.modelChoose').classList.remove('none');
|
||
document.querySelector('.toolboxBottom').classList.add('none');
|
||
document.querySelector('.list').classList.remove('ative');
|
||
if (document.querySelector('.card')) {
|
||
document.querySelector('.card').remove();
|
||
}
|
||
|
||
}
|
||
function handleCancelDirection() {
|
||
document.querySelector('.directionBox').classList.add('none');
|
||
document.querySelector('.boxcontainer').classList.remove('none');
|
||
}
|
||
|
||
function changeDirectionValue(val) {
|
||
// debugger;
|
||
// mapManager.generateRoute(angle);
|
||
// if (!mapManager.completeFlag) {
|
||
// return;
|
||
// }
|
||
document.getElementById('checkbox').checked = false;
|
||
let angle = Number(document.querySelector('#directionSlider').value);
|
||
mapManager.generateRoute(angle);
|
||
|
||
}
|
||
|
||
// 展示作业类型
|
||
// function handleShowWorkType() {
|
||
// let domHtml = `
|
||
// <div class="workType">
|
||
// <div class="title">请选择作业类型</div>
|
||
// <div class="buttons">
|
||
// <button class="btn work-btn" data-type="巡检">巡检</button>
|
||
// <button class="btn work-btn" data-type="割草">割草</button>
|
||
// <button class="btn work-btn" data-type="无人机清洗">无人机清洗</button>
|
||
// <button class="btn cancel-btn">取消</button>
|
||
// </div>
|
||
// </div>
|
||
// `;
|
||
|
||
// const range = document.createRange();
|
||
// const fragment = range.createContextualFragment(domHtml);
|
||
// const modalElement = fragment.firstElementChild;
|
||
|
||
// // 添加到页面
|
||
// document.body.appendChild(modalElement);
|
||
|
||
// // 按钮事件绑定
|
||
// modalElement.querySelectorAll('.work-btn').forEach(btn => {
|
||
// btn.addEventListener('click', () => {
|
||
// const type = btn.dataset.type;
|
||
// console.log("选择了作业类型:", type);
|
||
// modalElement.remove(); // 点击后关闭弹窗
|
||
// });
|
||
// });
|
||
|
||
// // 取消按钮
|
||
// modalElement.querySelector('.cancel-btn').addEventListener('click', () => {
|
||
// modalElement.remove();
|
||
// });
|
||
// }
|
||
|
||
// 点击设置航向
|
||
function setDirectionEvent() {
|
||
document.querySelector('.directionBox').classList.remove('none');
|
||
document.querySelector('.boxcontainer').classList.add('none');
|
||
}
|
||
function changeAngle(checkbox) {
|
||
let angle = 0;
|
||
if (checkbox.checked) {
|
||
angle = -1;
|
||
} else {
|
||
angle = Number(document.querySelector('#directionSlider').value);
|
||
}
|
||
mapManager.generateRoute(angle);
|
||
}
|
||
function handleNextStep() {
|
||
// 获取页面上name为plan的input的value
|
||
const plan = document.querySelector('input[name="plan"]:checked');
|
||
if (plan) {
|
||
document.querySelector('.toolboxBottom').classList.remove('none');
|
||
document.querySelector('.modelChoose').classList.add('none');
|
||
console.log(plan, 877);
|
||
mapManager.setPlanModel(plan.value);
|
||
|
||
if (plan.value == 2) {
|
||
document.querySelector('#startSelect').classList.add('none');
|
||
document.querySelector('.btn-container').classList.add('none');
|
||
document.querySelector('.toolboxBottom').style.height = '138px';
|
||
}
|
||
} else {
|
||
alert('请选择工作模式');
|
||
return;
|
||
}
|
||
|
||
|
||
}
|
||
function handleLastStep() {
|
||
document.querySelector('.toolboxBottom').classList.add('none');
|
||
document.querySelector('.modelChoose').classList.remove('none');
|
||
}
|
||
|
||
function receiveDataFromAndroid(data) {
|
||
console.log('接受数据', data);
|
||
const lngItem = JSON.parse(data).find(item => item.name === '经度');
|
||
const latItem = JSON.parse(data).find(item => item.name === '纬度');
|
||
headingAngel = JSON.parse(data)[JSON.parse(data).length - 1].value;
|
||
if (!lngItem || !latItem) {
|
||
console.error('未找到经度或纬度数据');
|
||
return;
|
||
}
|
||
|
||
const trackPoint = {
|
||
lng: parseFloat(lngItem.value),
|
||
lat: parseFloat(latItem.value)
|
||
};
|
||
tp.upsert(trackPoint);
|
||
console.log(trackPoint);
|
||
updateAllTrack();
|
||
|
||
}
|
||
function gaodePoint(lon, lat) {
|
||
const point = coordtransform.wgs84togcj02(lon, lat);
|
||
return point;//数组
|
||
}
|
||
|
||
function updateAllTrack() {
|
||
console.log('开始作业路径');
|
||
const _newPoints = tp.getTracePoint();
|
||
console.log(JSON.stringify(_newPoints), '作业点')
|
||
|
||
|
||
|
||
const gcj02Point = gaodePoint(_newPoints[_newPoints.length - 1].lng, _newPoints[_newPoints.length - 1].lat);
|
||
initMarker({
|
||
lon: gcj02Point[0],
|
||
lat: gcj02Point[1]
|
||
});
|
||
|
||
|
||
if (_newPoints.length > 1) {
|
||
console.log('开始绘制路径:', isgenerate);
|
||
const amapPoints = _newPoints.map(point => {
|
||
|
||
const gcj02Point = [point.lng, point.lat];
|
||
return [gcj02Point[0], gcj02Point[1]];
|
||
});
|
||
if (polybefore) {
|
||
polyline.remove();
|
||
}
|
||
polybefore = L.polyline(amapPoints, {
|
||
color: "green", // 等价于 strokeColor
|
||
weight: 2, // 等价于 strokeWeight
|
||
opacity: 1, // 等价于 strokeOpacity
|
||
lineJoin: 'round', // 等价于 lineJoin
|
||
lineCap: 'round' // 等价于 lineCap
|
||
});
|
||
|
||
// 添加到地图
|
||
polybefore.addTo(mapManager.map);
|
||
|
||
// const polyline = L.polyline([
|
||
// [32.043, 120.808],
|
||
// [32.044, 120.809]
|
||
// ], { color: 'red' }).addTo(mapManager.map);
|
||
needFitView = true;
|
||
if (!needFitView) {
|
||
// map.setFitView([polybefore]);
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
function changeDistance(value) {
|
||
const distanceInput = document.querySelector('#distance');
|
||
let currentValue = Number(distanceInput.value);
|
||
|
||
// 如果是手动输入触发，value 为 0
|
||
if (value !== 0) {
|
||
currentValue += value;
|
||
if (currentValue < 0) currentValue = 0; // 阻止负值
|
||
distanceInput.value = currentValue;
|
||
} else {
|
||
// 手动输入时，读取输入框的值
|
||
if (currentValue < 0) {
|
||
currentValue = 0;
|
||
distanceInput.value = currentValue;
|
||
}
|
||
}
|
||
// if (!mapManager.completeFlag) return;
|
||
mapManager.setDistance(currentValue);
|
||
mapManager.generateRoute();
|
||
}
|
||
|
||
|
||
|
||
function initMarker(data) {
|
||
console.log('初始化标记')
|
||
// 1. 删除之前的Marker（如果存在）
|
||
if (currentMarker) {
|
||
currentMarker.remove();
|
||
currentMarker = null; // 重置引用
|
||
}
|
||
const point = [data.lon, data.lat];
|
||
// currentMarker = new AMap.Marker({
|
||
// position: point,
|
||
// draggable: false,
|
||
// content: `
|
||
// <svg t="1750682044400" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
||
// <!-- 1. 圆圈（位置底座） -->
|
||
// <circle cx="20" cy="20" r="10" fill="#1afa29" fill-opacity="0.7" stroke="#fff" stroke-width="2"/>
|
||
|
||
// <!-- 2. 航向箭头（动态旋转） -->
|
||
// <g transform="translate(20, 20) rotate(${headingAngel})"> <!-- 以圆心为旋转中心，根据航向角旋转 -->
|
||
// <path d="M0,-8 L4,4 L0,1 L-4,4 Z" fill="#fff"/> <!-- 箭头形状 -->
|
||
// </g>
|
||
// </svg>
|
||
// `,
|
||
// offset: new AMap.Pixel(-16, -16),
|
||
// // icon: svgIcon
|
||
// });
|
||
|
||
const svgIcon = L.divIcon({
|
||
html: `
|
||
<svg t="1750682044400" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
||
<!-- 1. 圆圈（位置底座） -->
|
||
<circle cx="20" cy="20" r="10" fill="#1afa29" fill-opacity="0.7" stroke="#fff" stroke-width="2"/>
|
||
|
||
<!-- 2. 航向箭头（动态旋转） -->
|
||
<g transform="translate(20, 20) rotate(${headingAngel})">
|
||
<path d="M0,-8 L4,4 L0,1 L-4,4 Z" fill="#fff"/>
|
||
</g>
|
||
</svg>
|
||
`,
|
||
className: "", // 不要默认的 leaflet-div-icon 样式
|
||
iconSize: [32, 32], // 对应 SVG 尺寸
|
||
iconAnchor: [16, 16] // 等价于 offset: new AMap.Pixel(-16, -16)
|
||
});
|
||
|
||
// 2. 添加 Marker
|
||
const currentMarker = L.marker([point[1], point[0]], { // ⚠️ 注意 Leaflet 是 [lat, lng]
|
||
icon: svgIcon,
|
||
draggable: false
|
||
}).addTo(mapManager.map);
|
||
console.log('初始化标记4')
|
||
|
||
}
|
||
|
||
function handleSelecMethod() {
|
||
const selectElement = document.getElementById('methodSelect');
|
||
const selectedValue = selectElement.value; // 选中项的 value（1 或 2）
|
||
mapManager.setMethod(selectedValue);
|
||
|
||
}
|
||
function handleSave() {
|
||
console.log('保存');
|
||
if (!mapManager.completeFlag) {
|
||
alert('请先点击完成生成路径');
|
||
return;
|
||
}
|
||
let domHtml = `<div class="modalSave">
|
||
<div class="saveLoading">
|
||
<div class="loading small" title=""></div>
|
||
</div>
|
||
<div class="title">地块名称</div>
|
||
<div><input type="text" name="name" placeholder="请输入地块名称"></div>
|
||
<div class="button">
|
||
<span>取消</span>
|
||
<span>确定</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
const range = document.createRange();
|
||
// 2. 将HTML字符串转换为文档片段（无外层div）
|
||
const fragment = range.createContextualFragment(domHtml);
|
||
// 3. 获取片段中的目标元素（.modalSave）
|
||
const modalElement = fragment.firstElementChild;
|
||
// 4. 添加到页面
|
||
document.body.appendChild(modalElement);
|
||
modalElement.querySelector('.button span:first-child').addEventListener('click', () => {
|
||
modalElement.remove();
|
||
});
|
||
// 确定按钮
|
||
modalElement.querySelector('.button span:last-child').addEventListener('click', () => {
|
||
const name = modalElement.querySelector('input[name="name"]').value;
|
||
if (!name) {
|
||
alert('请输入地块名称');
|
||
return;
|
||
}
|
||
document.querySelector('.saveLoading').classList.add('active');
|
||
// const screenshot = new AMap.Screenshot(map);
|
||
// const { width, height } = map.getSize();
|
||
const mapContainer = document.querySelector("#map");
|
||
|
||
// 使用 html2canvas 把整个 container 渲染为 canvas
|
||
html2canvas(mapContainer, {
|
||
backgroundColor: "#ffffff", // 背景颜色
|
||
scale: 0.7, // 提高清晰度
|
||
}).then((canvas) => {
|
||
const url = canvas.toDataURL("image/png");
|
||
console.log(url, 8888);
|
||
mapManager.saveArea({
|
||
...mapManager.savePath,
|
||
name: name,
|
||
img: url
|
||
});
|
||
if (mapManager.planModel == 2) {
|
||
mapManager.saveArea({
|
||
...mapManager.savePath,
|
||
path: '',
|
||
outer: mapManager._outerPoints.map(item => {
|
||
return {
|
||
lon: item.lng,
|
||
lat: item.lat
|
||
}
|
||
}),
|
||
planModel: mapManager.planModel,
|
||
|
||
})
|
||
}
|
||
// saveData.push(savePath);
|
||
const data = {
|
||
"module": "RoutePlan",
|
||
"action": "addPointData",
|
||
"from": "JS",
|
||
"to": "Android",
|
||
"data": {
|
||
"workName": name,
|
||
"jsonData": JSON.stringify(mapManager.savePath)
|
||
}
|
||
}
|
||
wsClient.send(JSON.stringify(data));
|
||
document.querySelector('.saveLoading').classList.remove('active');
|
||
document.querySelector('#retreate').classList.remove('none');
|
||
|
||
// map.add(centerMarker);
|
||
// if (currentMarker) {
|
||
// map.add(currentMarker);
|
||
// }
|
||
|
||
|
||
modalElement.remove();
|
||
document.querySelector('.toolboxBottom').classList.add('none');
|
||
location.reload();
|
||
|
||
}).catch(err => {
|
||
console.error("下载图像失败:", err);
|
||
alert("❌ 下载失败，请检查控制台");
|
||
});
|
||
|
||
|
||
});
|
||
}
|
||
|
||
|
||
function startpointevent() {
|
||
if (method == 1) {
|
||
const point = map.getCenter();
|
||
pointCenter.push(point);
|
||
const wgsPoint = { lng: coordtransform.gcj02towgs84(point.lng, point.lat)[0], lat: coordtransform.gcj02towgs84(point.lng, point.lat)[1] };
|
||
outerPoint1.push(wgsPoint); // 添加打点
|
||
// const svgString1 = `
|
||
// <div style="position: relative;">
|
||
// <div style="width: 12px; height: 12px; background: rgba(255, 0, 0, 0.8); border-radius: 50%; border: 1px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.3);box-sizing: border-box;"></div>
|
||
|
||
// </div>
|
||
// `;
|
||
// 优化后的SVG（简化 viewBox 并确保圆点居中）
|
||
const svgString1 = `
|
||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="12" cy="12" r="6" fill="#d81e06" stroke="#fff" stroke-width="1"/>
|
||
</svg>
|
||
`;
|
||
|
||
const svgDataUrl1 = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString1)));
|
||
|
||
let marker = new AMap.Marker({
|
||
position: point,
|
||
anchor: 'center', // 将锚点设为中心
|
||
offset: new AMap.Pixel(0, 0), // 中心点不需要偏移
|
||
draggable: false,
|
||
zIndex: 100
|
||
});
|
||
|
||
marker.setIcon(new AMap.Icon({
|
||
image: svgDataUrl1,
|
||
size: new AMap.Size(24, 24), // 明确图标尺寸
|
||
anchor: 'center' // 确保图标内部锚点为中心
|
||
}));
|
||
|
||
map.add(marker);
|
||
if (mapManager.planModel != 2) {
|
||
updateOuter(pointCenter, 'gaode');
|
||
drawPath(pointCenter, '#fff', 'gaode');
|
||
} else {
|
||
drawPath(pointCenter, '#fff', 'gaode');
|
||
}
|
||
|
||
markers1.push(marker);
|
||
} else {
|
||
const pointData = tp.getTracePoint();
|
||
const svgString1 = `
|
||
<svg t="1750648620779" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6086" width="24" height="24"><path d="M541.190891 1009.293248C544.52832 1005.885275 548.383707 1001.898704 552.713978 997.36109 565.025302 984.460186 578.71838 969.688892 593.450024 953.266626 635.514509 906.374618 677.575463 855.548152 716.899743 802.505285 772.694379 727.246301 818.336558 653.733231 850.310552 583.915306 882.791737 512.990107 900.380982 447.547911 900.380982 388.380982 900.380982 173.884097 726.496814 0 512 0 297.503186 0 123.619018 173.884097 123.619018 388.380982 123.619018 453.914994 148.112442 529.89656 192.638909 615.024269 222.801105 672.689965 261.563999 733.327147 306.917011 795.635831 346.163792 849.555204 388.144069 901.753449 430.125229 950.301866 444.824743 967.300737 458.485691 982.641645 470.765062 996.079009 475.081033 1000.802039 478.922121 1004.956003 482.24525 1008.510078 484.268362 1010.673642 485.687365 1012.175194 486.459184 1012.983838 500.133902 1027.31116 522.916683 1027.589594 536.93759 1013.600746 537.722472 1012.817576 539.154539 1011.372534 541.190891 1009.293248ZM537.540816 964.228432C536.933529 963.592087 535.680295 962.265819 533.824363 960.28098 530.682538 956.921044 527.024342 952.964783 522.892674 948.443587 511.036286 935.468873 497.80291 920.608075 483.539265 904.113199 442.768795 856.965196 401.997442 806.270003 364.009369 754.079684 320.553597 694.377636 283.599147 636.569422 255.210969 582.295634 215.493894 506.362491 194.233742 440.41104 194.233742 388.380982 194.233742 212.883532 336.502462 70.614724 512 70.614724 687.497538 70.614724 829.766258 212.883532 829.766258 388.380982 829.766258 436.039636 814.709257 492.060238 786.108175 554.512959 756.432867 619.311431 713.270146 688.831132 660.173876 760.450492 622.263303 811.586462 581.572627 860.7571 540.885482 906.113538 526.654144 921.978212 513.452721 936.219066 501.628286 948.609655 497.511094 952.924056 493.867022 956.692128 490.739495 959.885697 488.896804 961.767332 487.65681 963.018643 487.06241 963.611524L537.540816 964.228432ZM670.883129 388.380982C670.883129 300.632248 599.748681 229.497853 512 229.497853 424.251319 229.497853 353.116871 300.632248 353.116871 388.380982 353.116871 476.129715 424.251319 547.26411 512 547.26411 599.748681 547.26411 670.883129 476.129715 670.883129 388.380982ZM423.731595 388.380982C423.731595 339.631683 463.250772 300.112577 512 300.112577 560.749228 300.112577 600.268405 339.631683 600.268405 388.380982 600.268405 437.13028 560.749228 476.649387 512 476.649387 463.250772 476.649387 423.731595 437.13028 423.731595 388.380982Z" fill="#f81212" p-id="6087"></path></svg>`;
|
||
const svgDataUrl1 = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString1)));
|
||
const gcj02PointStart = gaodePoint(pointData[pointData.length - 1].lng, pointData[pointData.length - 1].lat);
|
||
const marker1 = new AMap.Marker({
|
||
position: gcj02PointStart,
|
||
offset: new AMap.Pixel(-6, -6), // 偏移量，使标记点底部对准中心点
|
||
content: `
|
||
<div style="position: relative;">
|
||
<div style="width: 12px; height: 12px; background: rgba(255, 0, 0, 0.8); border-radius: 50%; border: 1px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.3);"></div>
|
||
|
||
</div>
|
||
`,
|
||
draggable: false, // 禁止拖动
|
||
zIndex: 100 // 设置较高的层级
|
||
|
||
});
|
||
|
||
map.add(marker1);
|
||
outerPoint.push(pointData[pointData.length - 1]); // 添加打点
|
||
if (mapManager.planModel != 2) {
|
||
updateOuter(outerPoint);
|
||
|
||
} else {
|
||
drawPath(outerPoint, '#fff');
|
||
}
|
||
|
||
markers.push(marker1);
|
||
}
|
||
|
||
}
|
||
|
||
function clickDirection() {
|
||
|
||
document.querySelector('.boxcontainer .add').classList.add('none');
|
||
document.querySelector('.boxcontainer .operation').classList.add('none');
|
||
document.querySelector('.boxcontainer .step').classList.add('none');
|
||
document.querySelector('.boxcontainer .direction').classList.remove('none');
|
||
}
|
||
function clickArea() {
|
||
document.querySelector('.boxcontainer .add').classList.remove('none');
|
||
document.querySelector('.boxcontainer .operation').classList.remove('none');
|
||
document.querySelector('.boxcontainer .step').classList.remove('none');
|
||
document.querySelector('.boxcontainer .direction').classList.add('none');
|
||
}
|
||
|
||
|
||
document.querySelector('.boxcontainer .add').addEventListener('click', function () {
|
||
// switch (mapManager.mapStep) {
|
||
// case 1:
|
||
mapManager.enableClickPoint();
|
||
// mapManager.addCenterPoint();
|
||
// startpointevent();
|
||
// break;
|
||
// case 2:
|
||
// handleHole();
|
||
// break;
|
||
|
||
// }
|
||
});
|
||
|
||
document.getElementById('color_mode').addEventListener('change', function () {
|
||
// 点击航线
|
||
console.log(this.checked)
|
||
|
||
if (this.checked == true) {
|
||
clickDirection();
|
||
} else {
|
||
clickArea();
|
||
}
|
||
})
|
||
|
||
|
||
document.querySelector('#done').addEventListener('click', function () {
|
||
|
||
// document.getElementById('retreate').classList.add('none');
|
||
// console.log('完成');
|
||
// mapManager.setComplete(true);
|
||
// mapManager.drawPolygon();
|
||
// mapManager.generateRoute();
|
||
// return;
|
||
// 单点
|
||
if (mapManager.planModel == 2) {
|
||
if (mapManager.method == 1) {
|
||
mapManager.setSingleOuterPoint(outerPoint);
|
||
} else {
|
||
mapManager.setSingleOuterPoint(outerPoint1);
|
||
}
|
||
mapManager.setComplete(true);
|
||
return;
|
||
}
|
||
switch (mapManager.mapStep) {
|
||
// 作业区域
|
||
case 1:
|
||
if (mapManager.method == 1) {
|
||
if (mapManager.outerPoint.length <= 2) {
|
||
alert('作业区域至少三个点');
|
||
return;
|
||
}
|
||
// _outerPoints = outerPoint1;
|
||
mapManager.setComplete(true);
|
||
// mapManager.drawPolygon();
|
||
mapManager.generateRoute();
|
||
document.getElementById('retreate').classList.add('none');
|
||
} else {
|
||
if (mapManager.outerPoint1.length <= 2) {
|
||
alert('作业区域至少三个点');
|
||
return;
|
||
}
|
||
// _outerPoints = outerPoint;
|
||
mapManager.setComplete(true);
|
||
// mapManager.drawPolygon();
|
||
mapManager.generateRoute();
|
||
document.getElementById('retreate').classList.add('none');
|
||
}
|
||
break;
|
||
case 2:
|
||
if (mapManager.method == 1) {
|
||
if (mapManager.holePoints.length <= 2) {
|
||
alert('孔洞区域至少三个点');
|
||
return;
|
||
}
|
||
// debugger;
|
||
mapManager.setHolePointsList();
|
||
|
||
mapManager.generateRoute();
|
||
// }
|
||
} else {
|
||
// if (holePoints.length <= 2) {
|
||
// alert('作业区域至少三个点');
|
||
// return;
|
||
// }
|
||
// _holePoints = holePoints;
|
||
// if (outerPoint.length > 2) {
|
||
// completeFlag = true;
|
||
// handlegenerateRoute(angle);
|
||
// }
|
||
}
|
||
break;
|
||
}
|
||
});
|
||
document.querySelector('#delete').addEventListener('click', function () {
|
||
console.log('删除');
|
||
document.querySelector('#retreate').classList.remove('none');
|
||
mapManager.clearAllLayer();
|
||
|
||
return;
|
||
map.remove(map.getAllOverlays());
|
||
map.add(centerMarker);
|
||
if (currentMarker) {
|
||
map.add(currentMarker);
|
||
}
|
||
completeFlag = false;
|
||
document.getElementById('retreate').classList.remove('none');
|
||
switch (mapStep) {
|
||
case 1:
|
||
if (method == 1) {
|
||
outerPoint1 = [];
|
||
marker1 = [];
|
||
markers1.length > 0 && map.remove(markers1)
|
||
markers1 = [];
|
||
|
||
} else {
|
||
outerPoint = [];
|
||
markers = [];
|
||
markers.length > 0 && map.remove(markers)
|
||
markers = [];
|
||
}
|
||
_outerPoints = [];
|
||
pointCenter = [];
|
||
map.remove(polygon);
|
||
polygon = null; // 重置变量
|
||
|
||
break;
|
||
case 2:
|
||
if (method == 1) {
|
||
holePoints1 = [];
|
||
markerHole1.length && map.remove(markerHole1);
|
||
markerHole1 = [];
|
||
updateHole(holePoints1);
|
||
} else {
|
||
holePoints = [];
|
||
markerHole.length && map.remove(markerHole);
|
||
markerHole = [];
|
||
updateHole(holePoints);
|
||
}
|
||
break;
|
||
|
||
}
|
||
});
|
||
|
||
document.querySelector('#retreate').addEventListener('click', function () {
|
||
console.log('撤回')
|
||
mapManager.undoLastPoint();
|
||
});
|
||
|
||
document.getElementById('startSelect').addEventListener('change', function () {
|
||
const dom = this.querySelector('select');
|
||
var selectedIndex = parseInt(dom.value);
|
||
console.log(selectedIndex)
|
||
mapManager.setMapStep(selectedIndex);
|
||
});
|
||
const workTypeStatus = {
|
||
"巡检": false,
|
||
"清洗": false,
|
||
"延边割草": false,
|
||
"全局割草": false
|
||
};
|
||
|
||
document.querySelectorAll('.work-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const type = btn.dataset.type;
|
||
if (type != "割草") {
|
||
btn.classList.toggle('active');
|
||
// 更新状态变量
|
||
workTypeStatus[type] = btn.classList.contains('active');
|
||
mapManager.setWorkTypeStatus(workTypeStatus);
|
||
|
||
console.log("当前选中状态:", workTypeStatus);
|
||
mapManager.generateRouteByWorkType();
|
||
}
|
||
|
||
// 切换 active 样式
|
||
|
||
});
|
||
});
|
||
const cutGrassBtn = document.getElementById('cutGrassBtn');
|
||
const popover = document.getElementById('cutGrassPopover');
|
||
const globalModal = document.getElementById('globalCutModal');
|
||
let selectedCutOption = null;
|
||
|
||
// 点击割草按钮
|
||
cutGrassBtn.addEventListener('click', (e) => {
|
||
// toggle active 样式
|
||
|
||
// 只在激活状态下显示 Popover
|
||
// if (workTypeStatus["割草"]) {
|
||
const rect = cutGrassBtn.getBoundingClientRect();
|
||
popover.style.top = rect.bottom + window.scrollY + 'px';
|
||
popover.style.left = '644px';
|
||
popover.style.display = 'flex';
|
||
// } else {
|
||
// popover.style.display = 'none';
|
||
// }
|
||
});
|
||
|
||
// Popover 内按钮点击
|
||
popover.querySelectorAll('.popover-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
btn.classList.toggle('active');
|
||
|
||
selectedCutOption = btn.dataset.option;
|
||
if (selectedCutOption == "延边割草") {
|
||
workTypeStatus[selectedCutOption] = btn.classList.contains('active');
|
||
mapManager.setWorkTypeStatus(workTypeStatus);
|
||
|
||
console.log("当前选中状态:", workTypeStatus);
|
||
mapManager.generateRouteByWorkType();
|
||
}
|
||
|
||
// mapManager.setCutOption(selectedCutOption);
|
||
console.log("选择了割草类型:", selectedCutOption);
|
||
|
||
popover.style.display = 'none'; // 隐藏 Popover
|
||
|
||
if (selectedCutOption === "全局割草") {
|
||
globalModal.style.display = 'flex'; // 弹出全局割草 Modal
|
||
}
|
||
|
||
});
|
||
});
|
||
|
||
// Modal 操作
|
||
document.getElementById('globalCutConfirm').addEventListener('click', () => {
|
||
console.log("全局割草参数确认");
|
||
globalModal.style.display = 'none';
|
||
mapManager.generateRouteByWorkType();
|
||
});
|
||
|
||
document.getElementById('globalCutCancel').addEventListener('click', () => {
|
||
globalModal.style.display = 'none';
|
||
mapManager.generateRouteByWorkType();
|
||
});
|
||
document.querySelector('.save').addEventListener('click', handleSave);
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |