前端库-轨迹照片墙

介绍

从原地图展示组件（照片墙）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>

组件

可供导入使用的组件如下：

PhotoTrailMap[必需] 主组件，用于展示轨迹点、线及处理各种交互逻辑。

PhotoTrailMapPopUp[必需]子组件，用于展示点击照片后的弹窗。

PhotoTrailMapFilterByNameDate子组件，用于通过人名、项目名、时间过滤轨迹。

PhotoTrailMapSliderTimeline子组件，用于根据时间轴播放轨迹照片。

PhotoTrailMapSwitchDisplayLine子组件，用于切换是否隐藏轨迹线，只展示轨迹点。

PhotoTrailMapSwitchTrailLayer子组件，用于切换是否在不同缩放比例下始终显示轨迹。