leaflet-component-map
Version:
### 快速开始
88 lines (86 loc) • 10.4 kB
CSS
.map-box[data-v-06a7ff48]{width:100%;height:100vh;margin:0}
#toolBox[data-v-484192d1]{position:fixed;top:200px;right:24px;z-index:999;background:url(./images/tool_bg.png) no-repeat;background-size:100% 100%;width:56px;max-height:479px;text-align:center}.tool-right[data-v-484192d1]{width:24px;height:24px;margin:40px auto;cursor:pointer}#distance[data-v-484192d1]{background:url(./images/tool_icon_measure-range_default.png) no-repeat;background-size:100% 100%}#distance[data-v-484192d1]:hover{background:url(./images/tool_icon_measure-range_selected.png) no-repeat;background-size:100% 100%}#area[data-v-484192d1]{background:url(./images/tool_icon_measure-surface_default.png) no-repeat;background-size:100% 100%}#area[data-v-484192d1]:hover{background:url(./images/tool_icon_measure-surface_selected.png) no-repeat;background-size:100% 100%}#angle[data-v-484192d1]{background:url(./images/tool_icon_angle.png) no-repeat;background-size:100% 100%}#angle[data-v-484192d1]:hover{background:url(./images/tool_icon_angle_selected.png) no-repeat;background-size:100% 100%}#pointMarker[data-v-484192d1]{background:url(./images/tool_icon_gauge-point_default.png) no-repeat;background-size:100% 100%}#pointMarker[data-v-484192d1]:hover{background:url(./images/tool_icon_gauge-point_selected.png) no-repeat;background-size:100% 100%}#lineMarker[data-v-484192d1]{background:url(./images/tool_icon_gauge-line_default.png) no-repeat;background-size:100% 100%}#lineMarker[data-v-484192d1]:hover{background:url(./images/tool_icon_gauge-line_selected.png) no-repeat;background-size:100% 100%}#areaMarker[data-v-484192d1]{background:url(./images/tool_icon_gauge-surface_default.png) no-repeat;background-size:100% 100%}#areaMarker[data-v-484192d1]:hover{background:url(./images/tool_icon_gauge-surface_selected.png) no-repeat;background-size:100% 100%}#clearMarker[data-v-484192d1]{background:url(./images/tool_icon_delete_default.png) no-repeat;background-size:100% 100%}#clearMarker[data-v-484192d1]:hover{background:url(./images/tool_icon_delete_selected.png) no-repeat;background-size:100% 100%}
.leaflet-control-measure {
background-color: #FFFFFF;
}
.leaflet-measure-toggle {
background-size: 20px 20px;
background-image: url("data:image/svg+xml;utf8,<svg t=\"1599643864260\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"26869\" width=\"32\" height=\"32\"><path d=\"M910.623 777.748h-79.725V325.977l-53.15 53.149v398.622H282.715l580.416-605.875-37.58-37.578-579.299 604.707v-492.75h372.591l48.92-53.149H246.252v-79.725c0-14.688-11.886-26.575-26.575-26.575-14.688 0-26.575 11.886-26.575 26.575v79.725h-79.724c-14.689 0-26.575 11.886-26.575 26.575s11.886 26.575 26.575 26.575h79.724v584.646h584.646v79.725c0 14.688 11.887 26.574 26.574 26.574 14.689 0 26.576-11.887 26.576-26.574v-79.725h79.725c14.688 0 26.574-11.887 26.574-26.576 0-14.688-11.886-26.575-26.574-26.575z\"></path></svg>");
border: 0;
border-radius: 4px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
box-shadow: none;
border-radius: 4px;
}
.leaflet-measure-contents {
padding: 10px;
display: none;
}
.leaflet-control-measure h3 {
margin: 0;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
}
.leaflet-measure-actions {
margin: 0;
padding: 5px 0 0;
text-align: right;
list-style: none;
list-style-image: none;
}
.leaflet-control-measure a.start {
display: block;
width: auto;
padding: 0 5px 0 25px;
border: 0;
text-align: left;
background-image: url("data:image/svg+xml;utf8,<svg t=\"1599647825038\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"8356\" width=\"16\" height=\"16\"><path d=\"M113.777778 682.666667H0v227.555555c0 62.577778 51.2 113.777778 113.777778 113.777778h227.555555v-113.777778H113.777778v-227.555555zM113.777778 113.777778h227.555555V0H113.777778C51.2 0 0 51.2 0 113.777778v227.555555h113.777778V113.777778z m796.444444-113.777778h-227.555555v113.777778h227.555555v227.555555h113.777778V113.777778c0-62.577778-51.2-113.777778-113.777778-113.777778z m0 910.222222h-227.555555v113.777778h227.555555c62.577778 0 113.777778-51.2 113.777778-113.777778v-227.555555h-113.777778v227.555555zM512 284.444444C386.275556 284.444444 284.444444 386.275556 284.444444 512s101.831111 227.555556 227.555556 227.555556 227.555556-101.831111 227.555556-227.555556-101.831111-227.555556-227.555556-227.555556z m0 341.333334c-62.577778 0-113.777778-51.2-113.777778-113.777778s51.2-113.777778 113.777778-113.777778 113.777778 51.2 113.777778 113.777778-51.2 113.777778-113.777778 113.777778z\" p-id=\"8357\"></path></svg>");
background-repeat: no-repeat;
background-position: 5px 50%;
background-size: 14px 14px;
background-color: transparent;
text-decoration: none;
}
.leaflet-control-measure a.start:hover {
opacity: .5;
background-color: transparent;
}
.leaflet-measure-expanded .leaflet-measure-contents {
display: block;
}
.leaflet-measure-map {
cursor: crosshair ;
}
.leaflet-measure-lable {
padding: 1px 7px;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
border-radius: 4px;
white-space: nowrap;
display: inline-block;
position: absolute;
}
.leaflet-measure-lable .content {
width: auto;
display: inline-block;
}
.leaflet-measure-lable .close {
width: 15px;
height: 15px;
position: relative ;
top: 0px ;
left: 5px ;
cursor: pointer;
}
.leaflet-measure-lable .close .icon {
width: 15px;
height: 15px;
cursor: pointer;
top: 2px;
position: relative;
}
#pointMarkPop[data-v-42bf5091]{position:fixed;z-index:9999;background:url(./images/tool_bg_point-msg.png) no-repeat;background-size:100% 100%;width:260px;height:196px}.popHead[data-v-42bf5091]{color:#76ffff;margin:5px 0 0 16px;height:30px}.close-btn[data-v-42bf5091]{position:absolute;right:20px;top:-2px;cursor:pointer}.popDiv[data-v-42bf5091]{display:flex;margin:30px 9px 30px 9px}.popDiv .popLabel[data-v-42bf5091]{margin-right:12px;color:#76ffff;line-height:40px;font-size:14px}.popBtn[data-v-42bf5091]{text-align:center}.canotclick[data-v-42bf5091]{pointer-events:none}[data-v-42bf5091] #nameInput{display:inline;background-image:url(./images/tool_point-msg_input_default.png);background-repeat:no-repeat;background-size:100% 100%;width:186px;height:40px;background-color:rgba(0,0,0,0) ;border:0 none ;color:#fff}
.map-search[data-v-e436e6f2]{position:absolute;z-index:1002;left:82px;top:10px}.map-search .map-search-box[data-v-e436e6f2]{padding:5px 10px 10px 10px;font-size:14px;background:rgba(31,72,73,.8);border-radius:5px}.map-search .map-search-btn[data-v-e436e6f2]{width:70px;text-align:right}.location-name[data-v-e436e6f2]{font-size:14px;height:24px;line-height:24px;margin-top:5px}.address-desc[data-v-e436e6f2]{font-size:12px;height:24px;line-height:24px;margin-bottom:5px}[data-v-e436e6f2] .el-input__inner{width:322px;height:32px;font-size:12px ;background:url(./images/shield_input_default@2x.png) no-repeat;background-size:100% 100%;border:0 none ;color:#13e4e4;cursor:text }[data-v-e436e6f2] .el-form-item{margin-bottom:0}[data-v-e436e6f2] .el-select-dropdown{z-index:9999 ;border:1px solid #13e4e4}[data-v-e436e6f2] .el-select-dropdown__item{color:#13e4e4}[data-v-e436e6f2] .el-select-dropdown__item .search-result-item{flex:1;padding:0 20px}[data-v-e436e6f2] .el-input__inner,[data-v-e436e6f2] .el-select-dropdown__item.selected{color:#13e4e4;font-weight:normal;background-color:rgba(19,228,228,.2)}[data-v-e436e6f2] .resource-search.el-select-dropdown__item{height:34px}[data-v-e436e6f2] .el-select-dropdown__item.hover,[data-v-e436e6f2] .el-select-dropdown__item:hover{background-color:rgba(19,228,228,.2)}[data-v-e436e6f2] .el-select__input,[data-v-e436e6f2] .el-select-dropdown__empty{color:#13e4e4}[data-v-e436e6f2] .el-select-dropdown{background:#1f4849 ;box-shadow:0px 10px 20px 0px rgba(0,0,0,.6),0px 2px 4px 0px rgba(19,76,45,.6);border:1px solid #13e4e4 }[data-v-e436e6f2] .el-radio__label,[data-v-e436e6f2] .el-radio__input.is-checked+.el-radio__label,[data-v-e436e6f2] .el-button--text,[data-v-e436e6f2] .el-select-dropdown__item.selected{color:#13e4e4}[data-v-e436e6f2] .el-radio{margin-right:10px}[data-v-e436e6f2] .el-radio__inner{border:1px solid #13e4e4;background-color:rgba(0,0,0,0)}[data-v-e436e6f2] .el-radio__inner:hover{border-color:#be221d}[data-v-e436e6f2] .el-radio__input.is-checked .el-radio__inner{border-color:#be221d;background:rgba(0,0,0,0)}[data-v-e436e6f2] .el-radio__inner::after{background-color:#be221d;width:6px;height:6px}[data-v-e436e6f2] .el-select .el-input__inner:focus{border-color:#13e4e4}[data-v-e436e6f2] .el-radio__label,[data-v-e436e6f2] .el-radio__input.is-checked+.el-radio__label,[data-v-e436e6f2] .el-button--text,[data-v-e436e6f2] .el-select-dropdown__item.selected{color:#13e4e4}.search-empty[data-v-e436e6f2]{padding:5px 15px;color:#13e4e4}.search-empty[data-v-e436e6f2]:hover{background-color:rgba(19,228,228,.2);cursor:pointer}.el-select-dropdown__item.selected[data-v-e436e6f2]{color:#13e4e4}.resource-icon-front[data-v-e436e6f2],.device-icon-front[data-v-e436e6f2],.manual-icon-front[data-v-e436e6f2]{width:14px;height:14px;background:url(./images/icon_point_mark@2x.png) no-repeat;background-size:100% 100%;display:inline-block}.device-icon-front[data-v-e436e6f2]{background:url(./images/RVC_icon_camera_selected.png) no-repeat;background-size:100% 100%}.manual-icon-front[data-v-e436e6f2]{background:url(./images/icon_point_resource@2x.png) no-repeat;background-size:100% 100%}.el-button--text[data-v-e436e6f2]:hover{opacity:.8;color:#13e4e4}.el-autocomplete-suggestion[data-v-e436e6f2]{display:none}
.my-autocomplete.el-autocomplete-suggestion{background:#1f4849 ;box-shadow:0 10px 20px 0 rgba(0,0,0,.6),0 2px 4px 0 rgba(19,76,45,.6);border:1px solid #13e4e4 ;width:342px}.my-autocomplete.el-autocomplete-suggestion li.highlighted,.el-autocomplete-suggestion li:hover{background-color:rgba(19,228,228,.2) }.el-autocomplete-suggestion li{color:#13e4e4 }.popper__arrow{display:none }