时间戳

首页 > 解决方案 > 来自外部geojson的标记不在MapBox中呈现

javascript - 来自外部geojson的标记不在MapBox中呈现

问题描述

我是 React 和 MapBox 的新手，我创建了一个可以渲染的地图，但是我试图从 geojson 显示的标记没有显示出来。我初始化了地图并像这样添加了图层：

import React from 'react';
import ReactDOM from 'react-dom';
import mapboxgl from 'mapbox-gl';


mapboxgl.accessToken = 'token';


class Application extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        lng: -98.4936,
        lat: 29.4241,
        zoom: 10
        };
        }
        componentDidMount() {
            const map = new mapboxgl.Map({

            container: this.mapContainer,
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [this.state.lng, this.state.lat],
            zoom: this.state.zoom

            });


    
            
            map.on('load', function() {
                map.addSource("points", {
                  "type": "geojson",
                  "data": 'https://raw.githubusercontent.com/saucedaf/geo-jason/main/sa-stores.geojson'
                })
                map.addLayer({
                  "id": "points",
                  "type": "symbol",
                  "source": "points",
                  "layout": {
                    "icon-image": "{icon}-15",
                    "text-field": "{title}",
                    "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                    "text-offset": [0, 0.6],
                    "text-anchor": "top"
                  }
                });
              });
            
              
                    };
            render() {
                return (
                <div>
                <div ref={el => this.mapContainer = el} className="mapContainer" />
                </div>
                )
                }
    }
     
    ReactDOM.render(<Application />, document.getElementById('app'));

我的 index.html 看起来像这样：

<!DOCTYPE html>
<html lang='en'>
<head>
  <title>Mapbox GL JS and React</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
  <link href='site.css' rel='stylesheet'/>
</head>
<body>
  <div id='app'></div>
</body>
</html>

最后这是我的CSS：

.mapContainer {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 80%;
height: 80%;

}

.marker {
    border: none;
    cursor: pointer;
    height: 56px;
    width: 56px;
    background-color: rgba(0, 0, 0, 0);
  }

我将不胜感激任何帮助

标签： javascriptreactjsgismapboxgeojson

解决方案

推荐阅读