1

所以我正在尝试使用mapbox 和deck.gl 可视化数据。我想要某种悬停效果，但 onHover 属性不在边界层上运行

geojson数据来源：https ://data.cityofnewyork.us/City-Government/Borough-Boundaries/tqmj-j8zm

import boundaries from "./borough-boundaries.json";

import { Deck } from "@deck.gl/core";
import { ScatterplotLayer, GeoJsonLayer } from "@deck.gl/layers";
import { MapboxLayer } from "@deck.gl/mapbox";

var mapboxgl = require("mapbox-gl/dist/mapbox-gl.js");

let map;

const MAPBOX_ACCESS_TOKEN =
    "<mapbox-token>";

const MAPBOX_STYLE = "<mapbox-style>";

function initMap() {
    mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
    map = new mapboxgl.Map({
        center: [-73.715638255, 40.73577180300003],
        zoom: 10,
        container: "map",
        style: MAPBOX_STYLE
    });
}
const deckLayers = () =>
    new Deck({
        gl: map.painter.context.gl,
        pickable: true,
        layers: [],
        onHover: () => {
            console.log("Test");//Working
        }
    });
const boroughLayer = color =>
    new GeoJsonLayer({
        data: boundaries,
        pickable: true,
        getFillColor: color,
        onHover: () => {
            console.log("Test 2");//Doesn't working
        }
    });

initMap();

const deck = deckLayers();
map.on("load", () => {
    map.addLayer(new MapboxLayer({ id: "mapbox-layer", deck }));
    deck.setProps({ layers: [boroughLayer([255, 255, 255, 0])] });
});
4

1 回答 1

0

尝试event从悬停方法传递：

onHover: (e) => {
            if (e.object) {
                console.log(e.object);
                //do something with the geometry 
            }
        },
于 2021-03-16T14:08:57.517 回答