@ware4l/lib-map-photo-trail NPM

前端库-轨迹照片墙

介绍

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