Добавление Leaflet.timeline npm в Vue-cli 3 устарело?Ошибка типа: невозможно прочитать свойство 'bottomleft' из неопределенного - PullRequest
Новая
       28

Добавление Leaflet.timeline npm в Vue-cli 3 устарело?Ошибка типа: невозможно прочитать свойство 'bottomleft' из неопределенного

0 голосов
/ 25 сентября 2018

Мой вопрос не об обнаружении неопределенного свойства объекта.Я пытаюсь добавить Leaflet.timeline в Vue-cli 3, используя npm.У меня есть коллекция объектов (geoJSON), и я пытаюсь добавить их к временной шкале, однако L.timeline вызывает ошибку:

TypeError: Cannot read property 'bottomleft 'не определено

внутри модуля 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>

1 Ответ

0 голосов
/ 26 сентября 2018

Вы смешиваете объект params geoJSON с объектом params временной шкалы.Вам просто нужно отделить их.Измените свой код на этот, и он должен работать: 

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)
...