npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mapboxgl-tools

v2.0.1

Published

基于mapboxgl的一些实用工具

Downloads

161

Readme

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][img-measurearea]

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][img-layertree]