Adding Leaflet.timeline npm to Vue-cli 3 deprecated? TypeError: Cannot read property 'bottomleft' of undefined

Question

我的问题不是关于检测未定义对象属性。我正在尝试使用 npm 将 Leaflet.timeline 添加到 Vue-cli 3。我有一组功能 (geoJSON)，我正在尝试将它们添加到时间轴中，但是 L.timeline 引发错误：

TypeError: Cannot read property 'bottomleft' of undefined

在 leaflet.timeline 模块中

库是否已弃用或者我在这里遗漏了什么？

    import * as L from "leaflet"

    import "leaflet.timeline"
    import "leaflet.markercluster"
    import "leaflet.markercluster.layersupport"
    import "leaflet.markercluster/dist/MarkerCluster.css"
    import "leaflet.markercluster/dist/MarkerCluster.Default.css"
    import "leaflet.heat"
    import "leaflet-groupedlayercontrol"
    import "leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.css"


    methods: {
      createBookmarkTimeLine(){

            var timeLine = L.timeline(
              {
                type: "FeatureCollection",
                features: vm.bookmarks,
                position: 'bottomleft',
                enablePlayback: true,
                getInterval: {
                  start: 1495647158,
                  end: 1537799558
                }
              }
            )

            var timelineControl = L.timelineSliderControl({
              formatOutput(){
                let date = Date().toString()
                return date
              },
              duration: 100000,
            })

            timelineControl.addTo(vm.bookmarkLayer)
            timelineControl.addTimelines(timeLine)
            timeLine.addTo(vm.bookmarkLayer

      }
    }

// vm.bookmarks content:
// [
//         {
//             "type": "Feature",
//             "geometry": {
//                 "type": "Point",
//                 "coordinates": [
//                     -47.88264281443456,
//                     -15.788079277798529
//                 ]
//             },
//             "properties": {
//                 "bookmark_area_name": "PessoasAndando",
//                 "bookmark_area_camera_name": "PTZ_1",
//                 "start_time": "2018-09-24T14:12:41Z",
//                 "end_time": "2018-09-24T14:13:01Z",
//                 "date": "2018-09-24T14:12:41Z",
//                 "object_type": "Person",
//                 "object_id": 26560226,
//                 "pixel_start_position": "[1168.0, 116.0]",
//                 "pixel_end_position": "[892.0, 268.0]",
//                 "event_id": "1668531",
//                 "device_id": "70243c02-b030-11e6-8fa5-a41f725f89f6",
//                 "bookmark_area": 3
//             }
//         },
//         {
//             "type": "Feature",
//             "geometry": {
//                 "type": "Point",
//                 "coordinates": [
//                     -47.88262034830791,
//                     -15.788017998552633
//                 ]
//             },
//             "properties": {
//                 "bookmark_area_name": "PessoasAndando",
//                 "bookmark_area_camera_name": "PTZ_1",
//                 "start_time": "2018-09-24T14:14:39Z",
//                 "end_time": "2018-09-24T14:14:59Z",
//                 "date": "2018-09-24T14:14:39Z",
//                 "object_type": "Person",
//                 "object_id": 26560296,
//                 "pixel_start_position": "[860.0, 440.0]",
//                 "pixel_end_position": "[944.0, 590.0]",
//                 "event_id": "1668539",
//                 "device_id": "70243c02-b030-11e6-8fa5-a41f725f89f6",
//                 "bookmark_area": 3
//             }
//         }]

<template>
  <v-content class="map-container" >
    <div id="mapid"></div>
  </v-content>
</template>

Answer 1

您将 geoJSON 参数对象与时间轴参数对象混合在一起。你只需要将它们分开。将您的代码更改为此，它应该可以工作：

vm.bookmarkTimeLine = L.timeline(
       {
         type: "FeatureCollection",
         features: vm.bookmarks, 
       },
       {
         pointToLayer: vm.bookmarkMarkerOptions,
         onEachFeature: vm.addBookmarkPopUp
       }
     )

您还需要将时间线添加到地图而不是图层：

timelineControl.addTo(myMap)
timelineControl.addTimelines(vm.bookmarkTimeLine)
vm.bookmarkTimeLine.addTo(myMap)

Adding Leaflet.timeline npm to Vue-cli 3 deprecated? TypeError: Cannot read property 'bottomleft' of undefined

Adding Leaflet.timeline npm to Vue-cli 3 deprecated? TypeError: Cannot read property 'bottomleft' of undefined

vue.js

leaflet

geojson

timeline

vue-cli-3