mapboxgl-tools 1.2.3 → 1.3.0

package/README.md

@@ -10,9 +10,10 @@ npm install mapboxgl-tools
 ## Modules
 ```js
 Geoserver
+Contextmenu
 ```
-### Geoserver
-> 自定义栅格瓦片，记忆缓存
+### 1.Geoserver
+> 自定义栅格瓦片组件(基于vue2.x)，记忆缓存
 
 | Property | Type | 默认值 | Description |
 | ----- | ------------- | ------------- | ------------------------ |
@@ -66,4 +67,230 @@ export default {
 }
 
 </script>
-``
+```
+
+### 2.Contextmenu
+> 右键菜单项目组件，基于vue2.x
+
+| Property | Type | 默认值 | Description |
+| ----- | ------------- | ------------- | ------------------------ |
+| menus  | Array | [] | 菜单选项{ icons: [], name: '', click: Function, children: null，[] } |
+| left | Number | 0 | 定位left |
+| top | Number | 0 | 定位top |
+
+```js
+<template>
+    <div>
+        <Contextmenu :menus='menus' :top='100' :left='200' />
+    </div>
+</template>
+
+<script>
+import { Contextmenu } from 'mapboxgl-tools'
+
+export default {
+    components: {
+        Contextmenu,
+    },
+    data() {
+        return {
+            menus: [
+            {
+                name: '批量平移挪点',
+                click: () => { alert(1) },
+            },
+            {
+                icons: [
+                    'M934.184927 199.723787 622.457206 511.452531l311.727721 311.703161c14.334473 14.229073 23.069415 33.951253 23.069415 55.743582 0 43.430138-35.178197 78.660524-78.735226 78.660524-21.664416 0-41.361013-8.865925-55.642275-23.069415L511.149121 622.838388 199.420377 934.490384c-14.204513 14.20349-33.901111 23.069415-55.642275 23.069415-43.482327 0-78.737272-35.230386-78.737272-78.660524 0-21.792329 8.864902-41.513486 23.094998-55.743582l311.677579-311.703161L88.135828 199.723787c-14.230096-14.255679-23.094998-33.92567-23.094998-55.642275 0-43.430138 35.254945-78.762855 78.737272-78.762855 21.741163 0 41.437761 8.813736 55.642275 23.069415l311.727721 311.727721L822.876842 88.389096c14.281261-14.255679 33.977859-23.069415 55.642275-23.069415 43.557028 0 78.735226 35.332716 78.735226 78.762855C957.254342 165.798117 948.5194 185.468109 934.184927 199.723787'
+                ],
+                name: '取消操作',
+                click: () => { alert(2) },
+            },
+            {
+                icons: '',
+                name: '其他挪点',
+                children: [
+                    {
+                        icons: '',
+                        name: '附属挪点',
+                        click: () => alert(45)
+                    }
+                ]
+            }
+]
+
+        }
+    },
+}
+
+</script>
+```
+
+
+### 3.GeoserverAside
+> 继承Geoserver组件，快速弹窗
+
+| Property | Type | 默认值 | Description |
+| ----- | ------------- | ------------- | ------------------------ |
+| map  | Object | null | mapboxgl实例对象 |
+| itemClass | String |  | 单个geoserver展示class |
+| addClass | String | | 添加按钮class |
+| addBtnProps | Object | { type: 'primary', ghost: false, size: 'small', text: '新增图层' } | 添加按钮属性 |
+| left | Number | 0 | 定位left |
+| top | Number | 0 | 定位top |
+
+```js
+<template>
+    <div>
+        <GeoserverAside v-if="map" :map="map" itemClass="geo-item" addClass="add-btn" />
+    </div>
+</template>
+
+<script>
+import { GeoserverAside } from 'mapboxgl-tools'
+
+export default {
+    components: {
+        GeoserverAside,
+    },
+    data() {
+        return {
+
+        }
+    },
+}
+
+</script>
+```
+
+### 4.PickCoordControl
+> 拾取坐标mapboxgl控制器
+
+| Property | Type | 默认值 | Description |
+| ----- | ------------- | ------------- | ------------------------ |
+| title  | String | 拾取坐标 | 入口按钮title |
+| cb | Function |  | 复制完成坐标之后的回调 |
+
+```js
+<template>
+    <section id="map" style="width: 90%; height: 700px"></section>
+</template>
+
+<script>
+import { PickCoordControl, transformRequest4326 } from 'mapboxgl-tools'
+
+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 PickCoordControl({ cb: ()=>message.success('复制成功') }), 'top-right')
+    }
+}
+
+</script>
+```
+
+### 5.MouseRectControl
+> 拾取坐标mapboxgl控制器
+
+| Property | Type | 默认值 | Description |
+| ----- | ------------- | ------------- | ------------------------ |
+| title  | String | 框选 | 入口按钮title |
+| onClose | Function |  | 关闭控制器的回调 |
+| onOpen | Function |  | 打开控制器的回调 |
+| onEnd | Function |  | 完成框选的回调 |
+| onMousemove | Function |  | 框选拖拽的回调 |
+
+```js
+<template>
+    <section id="map" style="width: 90%; height: 700px"></section>
+</template>
+
+<script>
+import { MouseRectControl, transformRequest4326 } from 'mapboxgl-tools'
+
+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 MouseRectControl({ 
+            onClose: () => alert('close'),
+            onOpen: () => alert('open')
+        }), 'top-right')
+    }
+}
+
+</script>
+```
+
+### 6.MeasureDistanceControl
+> 测量距离mapboxgl控制器
+
+| Property | Type | 默认值 | Description |
+| ----- | ------------- | ------------- | ------------------------ |
+| title  | String | 测量距离 | 入口按钮title |
+
+```js
+<template>
+    <section id="map" style="width: 90%; height: 700px"></section>
+</template>
+
+<script>
+import { MeasureDistanceControl, transformRequest4326 } from 'mapboxgl-tools'
+
+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 MeasureDistanceControl(), 'top-right')
+    }
+}
+
+</script>
+```
+
+### 7.MeasureAreaControl
+> 测量面积mapboxgl控制器
+
+| Property | Type | 默认值 | Description |
+| ----- | ------------- | ------------- | ------------------------ |
+| title  | String | 测量面积 | 入口按钮title |
+
+```js
+<template>
+    <section id="map" style="width: 90%; height: 700px"></section>
+</template>
+
+<script>
+import { MeasureAreaControl, transformRequest4326 } from 'mapboxgl-tools'
+
+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 MeasureAreaControl(), 'top-right')
+    }
+}
+
+</script>
+```