mapboxgl-tools 2.2.6 → 2.2.7

package/README.md

@@ -309,13 +309,24 @@ export default {
 ### 8.PositionControl
 > mapboxgl定位撒点控制器
 
+**功能特性：**
+- 支持手动输入坐标进行定位撒点
+- 支持区域快速定位（省市选择）
+- 支持度分秒坐标格式
+- 自动去重重复坐标
+- 点击地图点位可切换选中状态
+- 清空功能一键清除所有坐标
+
 | Property | Type | 默认值 | Description |
 | ----- | ------------- | ------------- | ------------------------ |
 | title  | String | 定位撒点 | 入口按钮title |
-| layout  | String | { icon-size: 0.2, icon-anchor: 'bottom', icon-image: ['case', ['get', 'current'],  IMAGE_POSCONTROL_ACT, IMAGE_POSCONTROL_NOR ] } | mapboxgl-layout, 当前的定位点current属性为true |
+| type  | String | 'feature' | 定位点类型：'feature' 使用地图图层，'marker' 使用 Marker |
+| layout  | Object | { icon-size: 0.2, icon-anchor: 'bottom', icon-image: ['case', ['get', 'current'],  IMAGE_POSCONTROL_ACT, IMAGE_POSCONTROL_NOR ] } | mapboxgl-layout, 当前的定位点current属性为true |
 | paint  | String | {} | mapboxgl-paint |
 | onMini  | Function |  | 有重复数据被过滤掉时候的回调 |
 
+**使用示例：**
+
 ```js
 <template>
     <section id="map" style="width: 90%; height: 700px"></section>
@@ -333,12 +344,29 @@ export default {
             center: [114.26697720786854,30.63091896813168],
             transformRequest: transformRequest4326,
         })
-        map.addControl(new PositionControl(), 'top-right')
+        map.addControl(new PositionControl({
+            title: '坐标定位',
+            type: 'feature'
+        }), 'top-right')
     }
 }
 
 </script>
 ```
+
+**坐标格式说明：**
+- 十进制度数：`114.266977,30.630919`
+- 度分格式：`114°16'1.15"E,30°37'51.31"N`
+- 度分秒格式：`114°16'1.15"E,30°37'51.31"N`
+- 多个坐标使用换行或分号(;)分隔
+
+**使用方法：**
+1. 点击定位按钮打开控制面板
+2. 在输入框中输入坐标（支持多个）
+3. 点击"区域定位"快速选择省市
+4. 点击坐标列表中的项可切换选中状态
+5. 点击"清空"按钮清除所有坐标
+
 *控制器效果*
 ![img](./public/imgs/PositionControl.png)
 

package/dist/index.css

@@ -1 +1 @@
-.wbk-contextmenus{pointer-events:auto;box-shadow:0 0 3px 1px #8e8e8e;border-radius:5px}.wbk-contextmenus-item{padding:3px 10px;cursor:pointer;transition:all ease .3s;color:#666;fill:#666}.wbk-contextmenus-item:hover .wbk-contextmenus-submenu{display:block!important}.wbk-contextmenus-item:hover{background:#c9e0e0a8;fill:#1890ff}.wbk-contextmenus-item:hover>.wbk-menu-item{color:#1890ff}.wbk-drop-other-menu .ant-dropdown-menu{box-shadow:0 2px 8px #00000029;transform:translate(calc(100% + 10px)) translateY(-39px)}.aside-content{box-shadow:0 0 4px 1px #8e8e8e}.aside-hidden{transform:scale(0) translateY(-50%) translate(50%);transform-origin:right top}.btn-hidden{transform:scale(0) translate(50%) translateY(-50%);transform-origin:right top;opacity:0}.aside-visible{transform:scale(1) translateY(0) translate(0);opacity:1}.wbiokr-geoserver-modal{background:rgba(0,0,0,0);animation:opactiy-in .3s ease 1 forwards}.wbiokr-geoserver-modal>.wbiokr-geoserver-modal-wrappper{transform:scale(0);animation:scale-in .4s ease 1 forwards;width:700px}@-moz-keyframes opactiy-in{0%{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@-webkit-keyframes opactiy-in{0%{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@-o-keyframes opactiy-in{0%{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@keyframes opactiy-in{0%{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@-moz-keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}@-o-keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}.wbiokr-com-checkbox.wbiokr-com-checked .wbiokr-com-checkbox-content{margin-bottom:1px}.wbiokr-com-checkbox .wbiokr-com-checkbox-content.w-5.h-5{width:7px;height:7px}.wbiokr-ctrl-main{transition:all ease .4s;transform:scale(0);opacity:0;background-color:#fff;box-shadow:0 0 3px 1px #8e8e8e;border-radius:4px;overflow:hidden;padding:0 10px}.wbiokr-ctrl-entry{display:flex!important;align-items:center;justify-content:center}.wbiokr-ctrl-entry path{transition:all ease-in .5s}.wbiokr-ctrl-active .wbiokr-ctrl-main{transform:none;opacity:1}.wbiokr-ctrl-active .wbiokr-ctrl-entry path{fill:#189fff}.wbiokr-ctrl-close{cursor:pointer;background:rgba(241,37,37,.91)!important;color:#fff;font-size:16px}.mapboxgl-ctrl-top-left .wbiokr-ctrl-absolute{position:absolute!important;left:33px;top:0;transform-origin:left top}.mapboxgl-ctrl-bottom-left .wbiokr-ctrl-absolute{position:absolute!important;left:33px;bottom:0;transform-origin:left bottom}.mapboxgl-ctrl-top-right .wbiokr-ctrl-absolute{position:absolute!important;right:33px;top:0;transform-origin:right top}.mapboxgl-ctrl-bottom-right .wbiokr-ctrl-absolute{position:absolute!important;right:33px;bottom:0;transform-origin:right bottom}.wbiokr-control-measureDistance-result,.wbiokr-control-measureArea-result{padding:1px 5px;background:#ffffffe8;border-radius:5px;box-shadow:0 0 4px 1px #999}.wbiokr-control-pick .wbiokr-control-pick-main{min-width:115px;white-space:nowrap}.mapboxgl-wbkrect-control .mapboxgl-wbkrect-control-entry{transition:all ease .3s}.mapboxgl-wbkrect-control .mapboxgl-wbkrect-control-entry.wbk-show path{fill:#189fff}.wbiokr-control-mouseRect-result{padding:1px 5px;background:#ffffffe8;border-radius:5px}.wbiokr-control-positionControl-main textarea{border:1px solid #eee}.wbiokr-control-positionControl-main textarea:hover,.wbiokr-control-positionControl-main textarea:focus{border:1px solid #189fff}.wbiokr-control-positionControl-main textarea:focus{box-shadow:0 0 3px #189fff}.wbiokr-control-positionControl-main ul{max-height:200px}.wbiokr-control-positionControl-main ul li:hover .wbiokr-position-loc{color:#189fff}.wbiokr-control-positionControl-main .wbiokr-position-tag{color:#389e0d;height:24px;min-width:30px;background:#e6f7ff;border:1px solid #b7eb8f;border-radius:3px;padding:0 2px}.wbiokr-control-positionControl-main .wbokr-position-selected .wbiokr-position-tag{color:#096dd9;border-color:#91d5ff}.wbiokr-control-positionControl-main .wbokr-position-selected .wbiokr-position-loc{color:#189fff}.wbiokr-control-layersTree-main{background-color:#fffffff2}.wbiokr-control-layersTree-main-ul li{color:#ccc}.wbiokr-control-layersTree-main-ul li.wbiokr-active{color:#333}.wbiokr-control-layersTree-main-ul li:not(.wbiokr-active) svg{fill:#ccc!important}
+.wbk-contextmenus{pointer-events:auto;box-shadow:0 0 3px 1px #8e8e8e;border-radius:5px}.wbk-contextmenus-item{padding:3px 10px;cursor:pointer;transition:all ease .3s;color:#666;fill:#666}.wbk-contextmenus-item:hover .wbk-contextmenus-submenu{display:block!important}.wbk-contextmenus-item:hover{background:#c9e0e0a8;fill:#1890ff}.wbk-contextmenus-item:hover>.wbk-menu-item{color:#1890ff}.wbk-drop-other-menu .ant-dropdown-menu{box-shadow:0 2px 8px #00000029;transform:translate(calc(100% + 10px)) translateY(-39px)}.aside-content{box-shadow:0 0 4px 1px #8e8e8e}.aside-hidden{transform:scale(0) translateY(-50%) translate(50%);transform-origin:right top}.btn-hidden{transform:scale(0) translate(50%) translateY(-50%);transform-origin:right top;opacity:0}.aside-visible{transform:scale(1) translateY(0) translate(0);opacity:1}.wbiokr-geoserver-modal{background:rgba(0,0,0,0);animation:opactiy-in .3s ease 1 forwards}.wbiokr-geoserver-modal>.wbiokr-geoserver-modal-wrappper{transform:scale(0);animation:scale-in .4s ease 1 forwards;width:700px}@-moz-keyframes opactiy-in{0%{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@-webkit-keyframes opactiy-in{0%{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@-o-keyframes opactiy-in{0%{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@keyframes opactiy-in{0%{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@-moz-keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}@-o-keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}.wbiokr-com-checkbox.wbiokr-com-checked .wbiokr-com-checkbox-content{margin-bottom:1px}.wbiokr-com-checkbox .wbiokr-com-checkbox-content.w-5.h-5{width:7px;height:7px}.wbiokr-ctrl-main{transition:all ease .4s;transform:scale(0);opacity:0;background-color:#fff;box-shadow:0 0 3px 1px #8e8e8e;border-radius:4px;overflow:hidden;padding:0 10px}.wbiokr-ctrl-entry{display:flex!important;align-items:center;justify-content:center}.wbiokr-ctrl-entry path{transition:all ease-in .5s}.wbiokr-ctrl-active .wbiokr-ctrl-main{transform:none;opacity:1}.wbiokr-ctrl-active .wbiokr-ctrl-entry path{fill:#189fff}.wbiokr-ctrl-close{cursor:pointer;background:rgba(241,37,37,.91)!important;color:#fff;font-size:16px}.mapboxgl-ctrl-top-left .wbiokr-ctrl-absolute{position:absolute!important;left:33px;top:0;transform-origin:left top}.mapboxgl-ctrl-bottom-left .wbiokr-ctrl-absolute{position:absolute!important;left:33px;bottom:0;transform-origin:left bottom}.mapboxgl-ctrl-top-right .wbiokr-ctrl-absolute{position:absolute!important;right:33px;top:0;transform-origin:right top}.mapboxgl-ctrl-bottom-right .wbiokr-ctrl-absolute{position:absolute!important;right:33px;bottom:0;transform-origin:right bottom}.wbiokr-control-measureDistance-result,.wbiokr-control-measureArea-result{padding:1px 5px;background:#ffffffe8;border-radius:5px;box-shadow:0 0 4px 1px #999}.wbiokr-control-pick .wbiokr-control-pick-main{min-width:115px;white-space:nowrap}.mapboxgl-wbkrect-control .mapboxgl-wbkrect-control-entry{transition:all ease .3s}.mapboxgl-wbkrect-control .mapboxgl-wbkrect-control-entry.wbk-show path{fill:#189fff}.wbiokr-control-mouseRect-result{padding:1px 5px;background:#ffffffe8;border-radius:5px}.wbiokr-control-positionControl-main textarea{border:1px solid #eee}.wbiokr-control-positionControl-main textarea:hover,.wbiokr-control-positionControl-main textarea:focus{border:1px solid #189fff}.wbiokr-control-positionControl-main textarea:focus{box-shadow:0 0 3px #189fff}.wbiokr-control-positionControl-main ul{max-height:200px}.wbiokr-control-positionControl-main ul li:hover .wbiokr-position-loc{color:#189fff}.wbiokr-control-positionControl-main .wbiokr-position-tag{color:#389e0d;height:24px;min-width:30px;background:#e6f7ff;border:1px solid #b7eb8f;border-radius:3px;padding:0 2px}.wbiokr-control-positionControl-main .wbokr-position-selected .wbiokr-position-tag{color:#096dd9;border-color:#91d5ff}.wbiokr-control-positionControl-main .wbokr-position-selected .wbiokr-position-loc{color:#189fff}.wbiokr-control-positionControl-city-panel{position:absolute;background:#fff;border-radius:6px;box-shadow:0 0 3px 1px #8e8e8e;z-index:100;display:flex;flex-direction:column;overflow:hidden;top:0;height:220px}.wbiokr-control-positionControl-city-panel .city-panel-close{position:absolute;top:6px;right:8px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#999;cursor:pointer;z-index:10;border-radius:50%;transition:all .2s}.wbiokr-control-positionControl-city-panel .city-panel-close:hover{background:#f5f5f5;color:#333}.wbiokr-control-positionControl-city-panel .city-panel-title{padding:8px 10px;font-size:12px;font-weight:600;border-bottom:1px solid #eee;background:#fafafa;color:#333;text-align:left}.wbiokr-control-positionControl-city-panel .city-list-container{flex:1;overflow-y:auto;padding:3px 0}.wbiokr-control-positionControl-city-panel .city-list-container::-webkit-scrollbar{width:4px}.wbiokr-control-positionControl-city-panel .city-list-container::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.wbiokr-control-positionControl-city-panel .city-list-container::-webkit-scrollbar-thumb:hover{background:#bbb}.wbiokr-control-positionControl-city-panel .province-title{padding:4px 8px;font-size:11px;font-weight:600;color:#333;background:#f5f5f5;border-bottom:1px solid #eee}.wbiokr-control-positionControl-city-panel .cities-wrapper{display:flex;flex-wrap:wrap;padding:3px;gap:3px}.wbiokr-control-positionControl-city-panel .city-item{padding:3px 6px;font-size:11px;color:#666;background:#f9f9f9;border:1px solid #e8e8e8;border-radius:3px;cursor:pointer;transition:all .2s;white-space:nowrap}.wbiokr-control-positionControl-city-panel .city-item:hover{background:#e6f7ff;color:#189fff;border-color:#91d5ff}.wbiokr-control-layersTree-main{background-color:#fffffff2}.wbiokr-control-layersTree-main-ul li{color:#ccc}.wbiokr-control-layersTree-main-ul li.wbiokr-active{color:#333}.wbiokr-control-layersTree-main-ul li:not(.wbiokr-active) svg{fill:#ccc!important}