Mapboxgl-tools NPM

mapboxgl-tools

基于mapboxgl的一些工具组件

Installation

npm install mapboxgl-tools

Modules

Geoserver
Contextmenu

1.Geoserver

自定义栅格瓦片组件(基于vue2.x)，记忆缓存

Property	Type	默认值	Description
map	Object	null	mapboxgl实例对象
itemClass	String		单个geoserver展示class
addClass	String		添加按钮class
addBtnProps	Object	{ type: 'primary', ghost: false, size: 'small', text: '新增图层' }	添加按钮属性

<template>
    <div>
        <section style="width: 90%; height: 700px" id="map"></section>
        <Geoservers v-if="map" :map="map" itemClass="geo-item" addClass="add-btn" />
    </div>
</template>

<script>
import { Geoserver } from 'mapboxgl-tools'

export default {
    components: {
        Geoserver,
    },
    data() {
        return {
            map: null,
        }
    },
    mounted() {
        this.map = new mapboxgl.Map({
            container: 'map',
            zoom: 15,
            center: [114.26697720786854,30.63091896813168],
            transformRequest: (url) => {
                if (
                    url.includes('4326')
                ) {
                    url = url.toLowerCase().replace(/(bbox=)([^&]+)/, ($0, $1, $2) => {
                        let points = $2.split(',')
                        let leftLngLat = onMercatorToLnglat(points[0], points[1])
                        let rightLngLat = onMercatorToLnglat(points[2], points[3])
                        return `${$1}${leftLngLat[0]},${leftLngLat[1]},${rightLngLat[0]},${rightLngLat[1]}`
                    })
                }
                return {
                    url,
                }
            },
        })
    },
}

</script>

组件效果

2.Contextmenu

右键菜单项目组件，基于vue2.x

Property	Type	默认值	Description
menus	Array	[]	菜单选项{ icons: [], name: '', click: Function, children: null，[] }
left	Number	0	定位left
top	Number	0	定位top

<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

<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
onCopy	Function		复制完成坐标之后的回调

<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

框选控制器

Property	Type	默认值	Description
title	String	框选	入口按钮title
onClose	Function		关闭控制器的回调
onOpen	Function		打开控制器的回调
onEnd	Function		完成框选的回调
onMousemove	Function		框选拖拽的回调

<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

<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

<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>

控制器效果

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
paint	String	{}	mapboxgl-paint
onMini	Function		有重复数据被过滤掉时候的回调

<template>
    <section id="map" style="width: 90%; height: 700px"></section>
</template>

<script>
import { PositionControl, 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 PositionControl(), 'top-right')
    }
}

</script>

控制器效果

9.LayerTreeControl

图层集合控制器

Property	Type	默认值	Description
title	String	地图图层	入口按钮title
isAutoShow	Boolean	true	是否默认展开图层框
titleWidth	Number	100	图层名称（父级）宽度
layers	Layer[]	[]	图层配置
onAfterOrder	Function		排序之后的回调，参数（{allLayers: 所有图层配置(含未打开的), layers: 打开的图层配置, beforeIdMap: 所有已打开图层按照顺序下beforeId集合}）

Layer对象参数

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,或使用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

预制icon

key	Description
circle	圆形
eye	眼睛
eye_close	眼睛-闭着
rect	方形
diamond	菱形
star	五角星
water	水滴
loc	定位点
triable	三角形
hexagon	六变形
pentagon	5变形
tag	标签
balloon	气球
layer	图层
flag	红旗
pen	笔
tack	大头钉

<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>

图层控件效果

Geoserver mapboxgl vector 栅格瓦片 control

@turf/turf @wbiokr/css-class @wbiokr/indexdb @wbiokr/keybinding ant-design-vue gis-plugins

27 days ago

1 month ago

2 months ago

2 months ago