mapboxgl-tools 1.6.3 → 1.7.2

package/README.md

@@ -68,6 +68,8 @@ export default {
 
 </script>
 ```
+*组件效果*
+![img](./public/imgs/Geoserver.png)
 
 ### 2.Contextmenu
 > 右键菜单项目组件，基于vue2.x
@@ -125,7 +127,8 @@ export default {
 
 </script>
 ```
-
+*组件效果*
+![img](./public/imgs/contextmenu.png)
 
 ### 3.GeoserverAside
 > 继承Geoserver组件，快速弹窗
@@ -194,6 +197,8 @@ export default {
 
 </script>
 ```
+*控制器效果*
+![img](./public/imgs/PickCoordControl.png)
 
 ### 5.MouseRectControl
 > 框选控制器
@@ -232,6 +237,8 @@ export default {
 
 </script>
 ```
+*控制器效果*
+![img](./public/imgs/MouseRectControl.png)
 
 ### 6.MeasureDistanceControl
 > 测量距离mapboxgl控制器
@@ -264,6 +271,9 @@ export default {
 </script>
 ```
 
+*控制器效果*
+![img](./public/imgs/MeasureDistanceControl.png)
+
 ### 7.MeasureAreaControl
 > 测量面积mapboxgl控制器
 
@@ -294,6 +304,8 @@ export default {
 
 </script>
 ```
+*控制器效果*
+![img](./public/imgs/MeasureAreaControl.png)
 
 ### 8.PositionControl
 > mapboxgl定位撒点控制器
@@ -327,4 +339,124 @@ export default {
 }
 
 </script>
-```
+```
+*控制器效果*
+![img](./public/imgs/PositionControl.png)
+
+### 9.LayerTreeControl
+> 图层集合控制器
+
+| Property | Type | 默认值 | Description |
+| ----- | ------------- | ------------- | ------------------------ |
+| title  | String | 地图图层 | 入口按钮title |
+| isAutoShow  | Boolean | true | 是否默认展开图层框 |
+| titleWidth  | Number | 100 | 图层名称（父级）宽度 |
+| layers  | <font color="#f00">Layer</font>[] | [] | 图层配置 |
+| onAfterOrder  | Function |  | 排序之后的回调，参数（{allLayers: 所有图层配置(含未打开的), layers: 打开的图层配置, beforeIdMap: 所有已打开图层按照顺序下beforeId集合}） |
+
+###### <font color="#f00">Layer</font>对象参数
+| Property | Type | 默认值 | Description | 父级字段 | 子级字段 |
+| ----- | ------------- | ------------- | ------------------------ | ----- | ----- |
+| id  | String |  | 保持唯一，必填！ | true | true |
+| title  | String |  | 名称 | true | true |
+| checked  | Boolean | false | 初次是否选中打开 | false | true |
+| radio  | Boolean | false | 是否单选，true的时候和同组之间为true的其他图层互斥 | false | true |
+| zIndex  | Number | 1 | 当前图层的权重，越大权重越高，显示优先级越高 | false | true |
+| icon  | String/Array |  | 图片path，使用预制的icon(circle、eye、rect、diamond、star、water、loc),或使用iconfont中图层path的d属性集合| false | true |
+| color  | String |  | 名称颜色 | false | true |
+| sourceConfig  | Object | { type: 'raster', tileSize: 256 } | mapbox中source的配置文件 | false | true |
+| layerConfig  | Object | { type: 'raster' } | mapbox中图层的配置文件 | false | true |
+| children  | Array | [] | 子集 | true | false |
+| onChange  | Function | | 图层打开/关闭的回调 | false | true |
+
+```js
+<template>
+    <section id="map" style="width: 90%; height: 700px"></section>
+</template>
+
+<script>
+import { LayerTreeControl, transformRequest4326 } from 'mapboxgl-tools'
+
+const layerData = [
+    {
+        title: '基础地图',
+        id: 'base',
+        children: [
+            { title: '底图1', id: '1-1', radio: true, checked: true, color: '#f00', icon: 'water', zIndex: 0,
+                sourceConfig: { tiles: ['自己的模板地址']},
+                onChange(e) { alert('1-1) },
+            },
+            { title: '底图2', id: '1-2', radio: true, color: '#f00', icon: 'water', zIndex: 1,
+                sourceConfig: { tiles: ['自己的模板地址']},
+                onChange(e) { alert('1-2')},
+            },
+            { title: '资料1-3', id: '1-3', color: '#f00', icon: 'rect', zIndex: 0,
+                sourceConfig: { tiles: ['自己的模板地址']},
+                onChange(e) { alert('1-3')},
+            },
+        ]
+    },
+    {
+        title: '基础地图2',
+        id: 'base2', // children为空或不传值，则过滤之
+    },
+    {
+        title: '参考资料',
+        id: 'geoserver',
+        children: [
+            { title: '资料2-1', id: '2-1', checked: true, color: '#ff5299', icon: 'circle', zIndex: 2,
+                sourceConfig: { tiles: ['自己的模板地址']},
+            },
+            { title: '资料2-2', id: '2-2', checked: true, color: '#0f5264', icon: 'circle', zIndex: 3,
+                sourceConfig: { tiles: ['自己的模板地址']},
+            },
+        ]
+    },
+    {
+        title: '点图层',
+        id: 'point',
+        children: [
+            { title: '点-1', id: '3-1', color: '#ff5299', zIndex: 5,
+                icon: [
+                    "M831.996366 320.007996c0 163.498143-122.598608 298.396611-280.996809 317.596392-3.999955 0.499994-6.99992 3.899956-6.99992 7.899911V992.000363c0 8.7999-3.599959 16.799809-9.399894 22.599744-5.799934 5.799934-13.799843 9.399893-22.599743 9.399893-17.699799 0-31.999637-14.299838-31.999637-31.999637V645.604298c0-3.999955-2.999966-7.399916-6.99992-7.899911C315.002237 618.404607 192.503629 484.106132 192.003634 321.007984 191.403641 144.509989 332.702036 1.511613 509.200032 0.01163 687.19801-1.488353 831.996366 142.310014 831.996366 320.007996z"
+                ],// 使用自定义图标
+                sourceConfig: { tiles: ['自己的模板地址']},
+
+            },
+            { title: '点-2', id: '3-2', checked: true, color: '#009', zIndex: 5,
+                icon: [
+                    "M831.996366 320.007996c0 163.498143-122.598608 298.396611-280.996809 317.596392-3.999955 0.499994-6.99992 3.899956-6.99992 7.899911V992.000363c0 8.7999-3.599959 16.799809-9.399894 22.599744-5.799934 5.799934-13.799843 9.399893-22.599743 9.399893-17.699799 0-31.999637-14.299838-31.999637-31.999637V645.604298c0-3.999955-2.999966-7.399916-6.99992-7.899911C315.002237 618.404607 192.503629 484.106132 192.003634 321.007984 191.403641 144.509989 332.702036 1.511613 509.200032 0.01163 687.19801-1.488353 831.996366 142.310014 831.996366 320.007996z"
+                ],
+                sourceConfig: { tiles: ['自己的模板地址']},
+
+            },
+            { title: '点-3', id: '3-3', checked: true, color: '#a08', zIndex: 6,
+                icon: [
+                    "M831.996366 320.007996c0 163.498143-122.598608 298.396611-280.996809 317.596392-3.999955 0.499994-6.99992 3.899956-6.99992 7.899911V992.000363c0 8.7999-3.599959 16.799809-9.399894 22.599744-5.799934 5.799934-13.799843 9.399893-22.599743 9.399893-17.699799 0-31.999637-14.299838-31.999637-31.999637V645.604298c0-3.999955-2.999966-7.399916-6.99992-7.899911C315.002237 618.404607 192.503629 484.106132 192.003634 321.007984 191.403641 144.509989 332.702036 1.511613 509.200032 0.01163 687.19801-1.488353 831.996366 142.310014 831.996366 320.007996z"
+                ],
+                sourceConfig: { tiles: ['自己的模板地址']},
+            },
+        ]
+    }
+]
+
+export default {
+    mounted() {
+        const map = new mapboxgl.Map({
+            container: 'map',
+            style: 'mapbox://styles/mapbox/light-v11',
+            zoom: 18,
+            center: [114.26697720786854,30.63091896813168],
+            transformRequest: transformRequest4326,
+        })
+        map.addControl(new LayerTreeControl({
+            isAutoShow: true,
+            layers: layerData,
+        }), 'top-right')
+    }
+}
+
+</script>
+```
+*图层控件效果*
+![img](./public/imgs/layerTreeControl.png)