Question

我是地图的新手，而React还是个新手，但是我试图显示来自MapBox的地图，该地图显示悬停信息，最好显示在geo.json文件的地图侧面选项卡中。

我已经在MapBox中创建了一个Choropleth地图，方法是在GeoJSON中添加某些县的值，然后将其上传到MapBox，然后使用MapBox Studio过滤器过滤掉这些县。我的GeoJSON示例

 {
      "type": "Feature",
      "id": "MOZ",
      "properties": {
        "name": "Mozambique",
        "projectTitle": "ipsum lorem",
        "projectDescription": "lorem"

      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [ ...

我已经遵循了一些教程，现在尝试使用工具提示来显示MapBox中的数据，但是它无法运行。理想情况下，我想在具有这些属性的国家上空悬停时显示projectTitle和projectDescription。我还没走很远，所以如果可以简化事情，我很乐意切换到react-map-gl。我的地图现在变得像这样

Picture of map

我当前的代码主要基于示例，我尝试添加工具提示来显示数据，但是它不起作用，我打算删除它，但是由于Map.jsx仍在使用，因此可以暂时在此处发布代码它

Map.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import mapboxgl from 'mapbox-gl'
import Tooltip from './Tooltip'

mapboxgl.accessToken = '<mytoken>';

class Map extends React.Component {
  tooltipContainer;

  setTooltip(features) {
    if (features.length) {
      ReactDOM.render(
        React.createElement(
          Tooltip, {
            features
          }
        ),
        this.tooltipContainer
      );
    } else {
      this.tooltipContainer.innerHTML = '';
    }
  }

  componentDidMount() {

    // Container to put React generated content in.
    this.tooltipContainer = document.createElement('div');

    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: '<myStyle>',
      center: [-79.38, 43.65],
      zoom: 1
    });

    const tooltip = new mapboxgl.Marker(this.tooltipContainer, {
      offset: [-120, 0]
    }).setLngLat([0,0]).addTo(map);

    map.on('mousemove', (e) => {
      const features = map.queryRenderedFeatures(e.point);
      tooltip.setLngLat(e.lngLat);
      map.getCanvas().style.cursor = features.length ? 'pointer' : '';
      this.setTooltip(features);
    });
  }

  render() {
    return (
      <div ref={el => this.mapContainer = el} className="absolute custom-map top right left bottom" />
    );
  }
}

export default Map

Tooltip.jsx

import React from 'react'
import PropTypes from 'prop-types'

export default class Tooltip extends React.Component {

  static propTypes = {
    features: PropTypes.array.isRequired
  };

  render() {
    const { features } = this.props;

    const renderFeature = (feature, i) => {
      return (
        <div key={i}>
          <strong className='mr3'>{feature.layer['source-layer']}:</strong>
          <span className='color-gray-light'>{feature.layer.id}</span>
        </div>
      )
    };

    return (
      <div className="flex-parent-inline flex-parent--center-cross flex-parent--column absolute bottom">
        <div className="flex-child px12 py12 bg-gray-dark color-white shadow-darken10 round txt-s w240 clip txt-truncate">
          {features.map(renderFeature)}
        </div>
        <span className="flex-child color-gray-dark triangle triangle--d"></span>
      </div>
    );
  }
}

关于如何实现这一点的任何想法？

使用Mapbox-gl在鼠标悬停时显示信息，以显示合计地图

0 个答案: