soal / vue-mapbox

Vuejs 2 components for interacting with mapbox-gl-js
https://soal.github.io/vue-mapbox
MIT License
470 stars 148 forks source link

TypeError: Cannot use 'in' operator to search for 'ref' in point #266

Closed NorColumba closed 1 year ago

NorColumba commented 1 year ago

This is my layer information and data:

  geoJsonLayer: {
        type: 'symbol',
        source: 'devices',
        minzoom: 2,
        maxzoom: 18,
        layout: {
          'icon-size': 1, // 
          'icon-image': 'religious-buddhist', // icon
          'text-field': '设备id:{id} \r\nlastTime {lastTime} ', // 
          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'], // font
          'text-offset': [0, 1.25], // 
          'text-anchor': 'top', // 
          'text-size': 15 // 
        },
        paint: {}
      },
geoJsonSource:{
  "type": "geojson",
  "id": "devices",
  "data": {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [0, 0]
        },
        "properties": {
          "id": "123456789",
          "lastTime": "2023-07-21T02:15:30Z",
          "nextTime": "2023-07-21T02:15:30Z",
          "beyond": "my",
          "status": 1
        }
      },
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [null, null]
        },
        "properties": {
          "id": "864040064025761",
          "lastTime": "2023-07-15T14:14:06Z",
          "nextTime": "2023-07-15T14:14:06Z",
          "beyond": "friend",
          "status": 1
        }
      },
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [111.0415869, 25.9531944]
        },
        "properties": {
          "id": "869861064925428",
          "lastTime": "2023-07-19T00:18:21Z",  
          "nextTime": "2023-07-19T00:18:21Z",
          "beyond": "test only",
          "status": 2
        }
      }
    ]
  }
}

I hope to add them on onload,this my code:

<template>
  <MglMap :accessToken="accessToken" :mapStyle="mapStyle" ref="map" @load="onMapLoaded"> </MglMap>
</template>
......

methods: {
    metersToPixelsAtMaxZoom (meters, latitude) {
      return meters / 0.075 / Math.cos((latitude * Math.PI) / 180)
    },

    onMapLoaded (event) {
      this.map = event.map
      console.log('getSource:', this.map.getSource('devices'))
      this.map.addSource('devices', this.geoJsonSource)
      this.map.addLayer('point', this.geoJsonLayer)

    },

}
  When executing this.map.addLayer('point', this.geoJsonLayer) I get two error

image image

vue.runtime.esm.js:3049 TypeError: Cannot use 'in' operator to search for 'ref' in point vue.runtime.esm.js:4605 [Vue warn]: Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'ref' in point"

"dependencies": { "mapbox-gl": "^2.15.0", "vue-mapbox": "^0.4.1",

}

The same layer and source work normally in React I use, it should not be a layer and source problem, how to solve it, can you help me?

NorColumba commented 1 year ago

I work on another library used by react, MapboxGL 2.11 image

VueMapBox the version image

NorColumba commented 1 year ago

sorry guys,l use error API by setLayer(layer,__)