mapboxgl-tools
v2.0.0
Published
基于mapboxgl的一些实用工具
Downloads
35
Maintainers
wbiokrReadme
mapboxgl-tools
基于mapboxgl的一些工具组件
Installation
npm install mapboxgl-toolsModules
Geoserver
Contextmenu1.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>控制器效果 ![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>控制器效果
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]