@ware4l/lib-map-photo-trail
v2.0.1
Published
从原地图展示组件（照片墙）hb-map-display-component 中提取出来并重构的库。
Readme
前端库-轨迹照片墙
介绍
从原地图展示组件（照片墙）hb-map-display-component 中提取出来并重构的库。
该库基于vue开发。
请安装库以查看更详细的说明文档。
目录
安装教程
npm install @ware4l/lib-map-photo-trail --save更新说明
1.2.4 适应data: {tables[[ {...} ]]} 的结构
1.2.6 修复了项目编号的问题，灵活使用。
1.3.0 修改照片API可高度自定义
1.3.10 修改css引用
1.4.0 增加了全屏按钮,轨迹线开关更改为下拉框
1.5.0 增加地图底图切换按钮,轨迹线下拉框修改为可配置,轨迹点改为红色,默认不显示轨迹线
1.5.2 修复不能设置默认底图的问题,将全屏按钮改为地图全屏,修改地图照片显示,在图片地址为空的情况下不显示图片只显示点
1.6.0 修改底图切换UI
2.0.0 将原有iview框架替换为elementUI使用说明
导入所需组件：
import {
PhotoTrailMap,
PhotoTrailMapFilterByNameDate
} from '@ware4l/lib-map-photo-trail';可供导入的组件请参考组件
导入css：
import '@ware4l/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="url"
:use-new-url="useNewUrl">
<photo-trail-map-pop-up/>
<photo-trail-map-slider-timeline/>
<photo-trail-map-filter-by-name-date :top="32"/>
<photo-trail-map-button-full-screen/>
<photo-trail-map-dropdown-trail-line :trail-line-dialog-visible="dialogVisible"/>
<photo-trail-map-switch-bottom-map @selectBottomMap="selectBottomMap" :init-map="initMap"/>
</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,
PhotoTrailMapFilterByNameDate,
PhotoTrailMapSliderTimeline,
PhotoTrailMapButtonFullScreen,
PhotoTrailMapDropdownTrailLine,
PhotoTrailMapSwitchBottomMap
} from '@ware4l/lib-map-photo-trail'
import '@ware4l/lib-map-photo-trail/dist/map-photo-trail.css'
export default{
name: "testMap",
components:{
PhotoTrailMap,
PhotoTrailMapPopUp,
PhotoTrailMapFilterByNameDate,
PhotoTrailMapSliderTimeline,
PhotoTrailMapButtonFullScreen,
PhotoTrailMapDropdownTrailLine,
PhotoTrailMapSwitchBottomMap
},
props:{},
data() {
return {
map_obj: {},
env: process.env,
isMapLoaded: false,
publicConfig:{
baseUrl:{
local_back_end_dev: '',
local_back_end:'',
hb:'',
hb_FileApi:'',
baidu_sdk_api:'',
baidu_pano:''
},
baidu_ak: '',
tdt_tk: '',
trailRadius: 1000, //单击缩略图打开照片墙，展示方圆{trailRadius}米内的轨迹点
trailColorPool: ['#FF0000','#FFA81C','#FFFF00','#00FF00','#00FFFF','#0000FF','#FF00FF'],
proCode: 'ProManage'
},
filterParams:{
userId: 2,
payload:{
"usrIds":["2"],
"prjIds":["1"],
"startDate":"2019-03-01",
"endDate":"2022-04-09",
"path": ""
}
},
doFilterFlag: false,
useNewUrl:true,
url:'https://www.someurl.com/api/photo/',
dialogVisible:true, //是否显示轨迹线开关
bottomMap2LayerId: {
tdt_img: ['tianditu1-tiles', 'tianditu2-tiles'],
tdt_vec:['tianditu-vec-tiles', 'tianditu-vec-cva-tiles'],
gd: ['gaode1-tiles', 'gaode2-tiles']
},
initMap:"tdt_vec" //默认展示的底图
}
},
mapOptions() {
return {
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
}
},
mounted() {
mapboxgl.accessToken = 'some access token';
this.map_obj = new mapboxgl.Map(this.mapOptions);
/*等mapboxgl对象加载完成后，再渲染轨迹照片墙组件。*/
this.map_obj.on('load', this.mapLoaded);
},
methods: {
mapLoaded() {
this.isMapLoaded = true;
},
selectBottomMap(mapName){
//TODO:高德地图api坐标转换 https://lbs.amap.com/api/webservice/guide/api/convert gps转高德即可。
for (let [k, v] of Object.entries(this.bottomMap2LayerId)){
for(let idName of v)
this.map_obj.setLayoutProperty(idName,'visibility',k === mapName?'visible':'none');
}
},
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>组件
可供导入使用的组件如下：