react-google-maps合並多個多邊形

Question

我有一個要導入到我的谷歌地圖中的坐標列表，然后根據這些坐標創建多邊形，我的問題是多邊形彼此重疊並且每個多邊形的輪廓清晰可見，我需要找到一種方法將它們合並為1個多邊形，刪除所有相交的線，並在外部僅保留1條邊界線。

我的地圖 -https://codesandbox.io/s/4ywq78407

我可以看到通過使用此處提到的geoJSON數據可能實現了這一點：

包含多個ZipCode的GoogleMaps API V3構建多邊形

但是我無法找到任何與react-google-maps一起使用的示例

似乎也可以使用JSTS和檢票口，如下所述：

包含多個ZipCode的GoogleMaps API V3構建多邊形

同樣，我不確定如何將它們集成到react-google-maps中

如何使用geoJSON數據或JSTS / wicket與react-google-maps合並我的多邊形？

Hello.js

import React from 'react';
import MyGoogleMap from './GoogleMap'
import coords from './const'

export default class Hello extends React.Component {
  render() {
    return(
      <MyGoogleMap coords={coords} lat={50.0883800089} lng={14.3196645721} zoom={8} />
    )
  }
}

GoogleMap.js

import React, { Component } from "react";
import withScriptjs from "react-google-maps/lib/async/withScriptjs";
import { withGoogleMap, GoogleMap, Polygon } from "react-google-maps";
export default class GoogleMaps extends Component {
  constructor() {
    super();
    this.state = {};
    this.handleMapLoad = this.handleMapLoad.bind(this);
  }
  handleMapLoad(map) {
    this._mapComponent = map;
  }

  render() {
    const MyGoogleMap = withScriptjs(
      withGoogleMap(props => (
        <GoogleMap
          ref={props.onMapLoad}
          defaultZoom={props.zoom}
          defaultCenter={{ lat: props.lat, lng: props.lng }}
          onClick={props.onMapClick}
        >
          {props.coords.map(coord => (
            <Polygon
              path={coord.area}
              options={{
                fillColor: "red",
                fillOpacity: 0.4,
                strokeColor: "red",
                strokeOpacity: 1,
                strokeWeight: 1
              }}
            />
          ))}
        </GoogleMap>
      ))
    );

    // Use this by settings props in e.g <MyGoogleMap coords={coords} lat={50.0883800089} lng={14.3196645721} zoom={8}/>
    return (
      <div style={{ height: '640px', width: '100%' }}>
      <div style={{ height: "100%" }}>
        <MyGoogleMap
          googleMapURL={`https://maps.googleapis.com/maps/api/js?key=AIzaSyBOGV1MxJRcgXxNULDXk1eUx_QQ6nftEP4`}
          loadingElement={<div style={{ height: "100%" }} />}
          containerElement={<div style={{ height: "100%" }} />}
          mapElement={<div style={{ height: "100%" }} />}
          onMapLoad={this.handleMapLoad}
          coords={this.props.coords}
          lat={this.props.lat}
          lng={this.props.lng}
          zoom={this.props.zoom}
        />
      </div>
      </div>
    );
  }
}

Answer 1

誠然，這可能是駭客。

 handleMapLoad(ref) { const map = ref.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.data.map; map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json'); this._mapComponent = map; } 

這樣，您可以直接訪問google map對象並讀取geojson。 理想情況下，您可以在react-google-maps中編寫適當的函數來加載geojson並將提取請求發送給管理員，以使其合並到代碼庫中。