1.2.0 • Published 3 years ago
@ware4u/lib-map-photo-trail v1.2.0
前端库-轨迹照片墙
介绍
从原地图展示组件(照片墙)hb-map-display-component 中提取出来并重构的库。
该库基于vue开发。
请安装库以查看更详细的说明文档。
目录
安装教程
npm install @ware4u/lib-map-photo-trail --save
使用说明
导入所需组件:
import {
PhotoTrailMap,
PhotoTrailMapFilterByNameDate
} from '@ware4u/lib-map-photo-trail';
可供导入的组件请参考组件
导入css:
import '@ware4u/lib-map-photo-trail/dist/map-photo-trail.css';
注册组件后在模板中使用:
<template>
<photo-trail-map>
<photo-trail-map-filter-by-name-date/>
</photo-trail-map>
</template>
一个完整的单文件组件使用示例如下:
<template>
<div id="map">
<div v-if="isMapLoaded">
<photo-trail-map :env="env"
:map-obj="map_obj"
:public-config="publicConfig"
:filter-params="filterParams"
:do-filter-flag="doFilterFlag"
:new-photo-request-url="'https://www.someurl.com/api/photo/'"
:use-new-url="true">
<photo-trail-map-pop-up/>
<photo-trail-map-switch-display-line/>
<photo-trail-map-switch-trail-layer/>
<photo-trail-map-slider-timeline/>
<photo-trail-map-filter-by-name-date :top="32"/>
</photo-trail-map>
<button class="do-filter-button" @click="doFilter">模拟外部筛选</button>
</div>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import {
PhotoTrailMap,
PhotoTrailMapPopUp,
PhotoTrailMapSwitchTrailLayer,
PhotoTrailMapSwitchDisplayLine,
PhotoTrailMapFilterByNameDate,
PhotoTrailMapSliderTimeline
} from '@ware4u/lib-map-photo-trail'
import '@ware4u/lib-map-photo-trail/dist/map-photo-trail.css'
export default{
name: "testMap",
components:{
PhotoTrailMap,
PhotoTrailMapPopUp,
PhotoTrailMapSwitchTrailLayer,
PhotoTrailMapSwitchDisplayLine,
PhotoTrailMapFilterByNameDate,
PhotoTrailMapSliderTimeline
},
props:{},
data() {
return {
map_obj: {},
env: process.env,
isMapLoaded: false,
publicConfig:{
baseUrl:{
local_back_end_dev: '',
local_back_end:'',
hb:'',
hb_FileApi_prefix:'',
baidu_sdk_api:'',
baidu_pano:''
},
baidu_ak: '',
tdt_tk: '',
trailRadius: 1000, //单击缩略图打开照片墙,展示方圆{trailRadius}米内的轨迹点
trailColorPool: ['#FF0000','#FFA81C','#FFFF00','#00FF00','#00FFFF','#0000FF','#FF00FF']
},
filterParams:{
userId: 2,
payload:{
"usrIds":["2"],
"prjIds":["1"],
"startDate":"2019-03-01",
"endDate":"2022-04-09"
}
},
doFilterFlag: false
}
},
mounted() {
mapboxgl.accessToken = 'some access token';
this.map_obj = new mapboxgl.Map({
container: 'map', // container id
style: {
'version': 8,
'glyphs': "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
'sources': {},
'layers': []
},
crs: 'EPSG:3857',
center: [121.6, 31.23],
zoom: 11,
minZoom: 0,
maxZoom: 25
});
/*等mapboxgl对象加载完成后,再渲染轨迹照片墙组件。*/
this.map_obj.on('load', this.mapLoaded);
},
methods: {
mapLoaded() {
this.isMapLoaded = true;
},
doFilter(){
/*取反后,组件内部的监听生效,从而触发内部筛选。*/
this.doFilterFlag = !this.doFilterFlag;
}
}
}
</script>
<style lang="less">
html, body{
width:100%;
height:100%;
margin:0;
padding:0 !important;
}
#map{
width:100%;
height:100%;
.do-filter-button{
position: absolute;
top: 100px;
right: 200px;
width: 100px;
height: 40px;
z-index: 999;
}
}
</style>
组件
可供导入使用的组件如下: