❤
npm
Sign UpSign In

mapboxgl-tools

1.7.6 • Public • Published

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>

组件效果 img

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>

组件效果 img

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>

控制器效果 img

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>

控制器效果 img

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>

控制器效果 img

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>

控制器效果 img

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>

控制器效果 img

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>

图层控件效果 img

Readme

Keywords

Package Sidebar

Install

npm i mapboxgl-tools

Weekly Downloads

71

Version

1.7.6

License

ISC

Unpacked Size

3.24 MB

Total Files

14

Last publish

Collaborators

  • wbiokr
Try on RunKit
Report malware