Question

我正在用React编写我的第一个更大的项目，我需要在地图组件中设置标记。我已经按照tutorial中的显示设置了所有内容，但是它不能与我的代码一起正常工作，并且标记也没有显示在地图上。

const dummyGeoJson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Point",
        coordinates: [16.959285736083984, 52.40472293138462]
      }
    }
  ]
};

class EventMap extends React.Component {
  componentDidMount() {
    this.map = L.map("map", {
      center: [51.9194, 19.1451],
      zoom: 6
    });

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 20
    }).addTo(this.map);
    var geoJsonLayer = L.geoJSON().addTo(this.map);
    geoJsonLayer.addData(dummyGeoJson);
  }

  render() {
    return <Wrapper width="100%" height="800px" id="map" />;
  }
}

根据我在官方传单指南中所读的内容，此代码应创建一个新的geojson层，并在geojson引用的位置中创建一个标记，但实际上唯一显示的是我的图块层。

Answer 1

像这样创建GeoJSON图层时，需要在GeoJSON选项对象中使用pointToLayer函数：

componentDidMount() {
    const map = L.map("map", {
      center: [51.9194, 19.1451],
      zoom: 6
    });

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 20
    }).addTo(map);

    L.geoJSON(dummyGeoJson, {
      pointToLayer: (feature, latlng) => {
        return L.marker(latlng, { icon: customMarker });
      }
    }).addTo(map);
}

然后您可以传递一个customMarker变量来定义一些选项，以使您的标记显示在用户界面上

Demo

Answer 2

欢迎您！

最可能的原因是您捆绑了应用程序（通常是与webpack捆绑在一起），但是该版本缺少Leaflet默认图标图像。

因此您的标记在那儿，但是因为缺少其图标图像而看不到它。

一种简单的调试方法是按照kboul's answer的建议改用另一个图标，或者甚至更简单地使用CircleMarker。

然后解决构建引擎无法处理默认图标图像的问题，请参见Leaflet #4968：

明确导入/要求Leaflet默认图标图像，并修改L.Icon.Default选项以使用新导入的路径
或使用leaflet-defaulticon-compatibility插件（我是作者）。

GeoJSON标记未显示在我的leaflet.js地图上

2 个答案: