对象值返回 "Undefined"

Question

当 鼠标悬停在 Deck.gl 中的 HexagonLayer 上 时，我试图显示 json 数据集的信息用 Vuejs 写的。然而，这是我将鼠标悬停在每个六边形层上时得到的结果：

Name: undefined
Number of students: undefined

注意：我认为问题出在 mouseHover 函数“object.name”和“object.num_student”中。它们未被识别，这就是为什么它没有显示它们来自 data.json 的值的原因。这是我想要的：

Name: university A

Number of students: 3000

这是我的代码，所以有人知道如何解决这个问题吗？


<script>
import mapboxgl from "mapbox-gl";

export default {
  name: "mapbox",
  data() {
    return {
      deck: null
    };
  },
  methods: {
    mouseHover: function({x, y, object}) {
      const tooltip = document.getElementById('tooltip');
      if (object) {
        tooltip.style.top = `${y}px`;
        tooltip.style.left = `${x}px`;
        tooltip.innerHTML = `
    <div><b>Name: ${object.name} &nbsp;</b></div>
    <div><b>Number of students: </b>${object.num_student}</div>
    `;
      } else { 
        tooltip.innerHTML = '';
      }
    }
  },
  mounted() { 
    const INITIAL_VIEW_STATE = {  
      latitude: 36.078456,
      longitude: 136.231530,
      zoom: 6,
      minZoom: 3,
      maxZoom: 17,
      pitch: 41,
      coverage: 0.6,
      upperPercentile: 100
    };

    mapboxgl.accessToken = "your-token"; 

    const map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/dark-v9",
      center: [136.231530, 36.078456],
      zoom: 6
    });

    map.getCanvas().style.position = "static";

    const COLOR_RANGE = [
      [1, 152, 189],
      [73, 227, 206],
      [216, 254, 181],
      [254, 237, 177],
      [254, 173, 84],
      [209, 55, 78]
    ];

    this.deck = new Deck({
      canvas: "my-canvas",
      initialViewState: INITIAL_VIEW_STATE,
      controller: true,
      onViewStateChange: ({ viewState }) => {
        map.jumpTo({
          center: [viewState.longitude, viewState.latitude],
          zoom: viewState.zoom
        });
      },
      layers: [
        new HexagonLayer({
          data: university_data.map(function(value){
            return {
              position: [value.longitude, value.latitude],
              name: value.name,
              num_student: value.num_student
            }
          }),
          colorRange: COLOR_RANGE,
          elevationRange: [0, 1000],
          elevationScale: 250,
          extruded: true,
          opacity: 1,
          getRadius: d => 3000,
          pickable: true,
          autoHighlight: true,
          onHover: mouseHover
        })
      ]
    }); 
  }
};
</script>

Answer 1

这不是 Vue.js 答案，但我发布这个答案是为了展示 API 的工作方式，您映射的数据也可以按如下方式完成：

data: data.map(function(value) {
      return [Number(value.longitude), Number(value.latitude), value]
}),

此外，要检索 onHover 中的对象，您可以使用 object.points[0][2]，它将为您提供原始数据对象。示例：

const {
  DeckGL,
  HexagonLayer
} = deck;



let data = [{
    "name": "university A",
    "num_student": 3000,
    "latitude": 37.5271822,
    "longitude": 140.394005
  },
  {
    "name": "university B",
    "num_student": 1000,
    "latitude": 34.6882226,
    "longitude": 135.6060808
  }
];

const COLOR_RANGE = [
  [1, 152, 189],
  [73, 227, 206],
  [216, 254, 181],
  [254, 237, 177],
  [254, 173, 84],
  [209, 55, 78]
];

function renderLayer() {
  mapboxgl.config.ACCESS_TOKEN = "pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pwY3owbGFxMDVwNTNxcXdwMms2OWtzbiJ9.1PPVl0VLUQgqrosrI2nUhg";
  const map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/dark-v9",
    center: [136.231530, 36.078456],
    zoom: 10
  });
  //map.getCanvas().style.position = "static";
  const INITIAL_VIEW_STATE = {
    latitude: 34.6882226,
    longitude: 135.6060808,
    zoom: 10,
  };

  const hexagonLayer = new HexagonLayer({
    id: 'heatmap',
    colorRange: COLOR_RANGE,
    data: data.map(function(value) {
      return [Number(value.longitude), Number(value.latitude), value]
    }),
    elevationRange: [0, 1000],
    elevationScale: 250,
    extruded: true,
    getPosition: d => d,
    opacity: 1,
    pickable: true,
    autoHighlight: true,
    onHover: ({
      object,
      x,
      y
    }) => {
      if (object) {
        console.log(object.points[0][2], x, y);
        object = object.points[0][2];
        const tooltip = document.getElementById('tooltip');
        tooltip.style.top = `${y}px`;
        tooltip.style.left = `${x}px`;
        tooltip.innerHTML = `
    <div><b>Name: ${object.name} &nbsp;</b></div>
    <div><b>Number of students: </b>${object.num_student}</div>
    `;

      } else {
        tooltip.innerHTML = '';
      }
    },
    radius: 2000,
    coverage: 1
  });

  new Deck({
    initialViewState: INITIAL_VIEW_STATE,
    controller: true,
    canvas: "my-canvas",
    onViewStateChange: ({
      viewState
    }) => {
      map.jumpTo({
        center: [viewState.longitude, viewState.latitude],
        zoom: viewState.zoom
      });
    },
    layers: [hexagonLayer]
  });
}
renderLayer();

#tooltip:empty {
  display: none;
}

#tooltip {
  font-family: Helvetica, Arial, sans-serif;
  position: absolute;
  padding: 4px;
  margin: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  max-width: 300px;
  font-size: 14px;
  z-index: 9;
  pointer-events: none;
  height: 50px !important;
  width: 200px !important;
}

#mapbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#mapbox>* {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>

<div id="mapbox">
  <div id="map"></div>
  <canvas id="my-canvas"></canvas>
  <div id="tooltip"></div>
</div>

编辑：数据可以在object.points[0](Sample):

中找到

<div><b>Name: ${object.points[0].name} &nbsp;</b></div>
<div><b>Number of students: </b>${object.points[0].num_student}</div>

对象值返回 "Undefined"

Object value returning "Undefined"

javascript

mapbox

mapbox-gl