react-google-maps 合并多个多边形答案

【问题标题】：react-google-maps merge multiple polygonsreact-google-maps 合并多个多边形
【发布时间】：2018-03-09 01:48:42
【问题描述】：

我有一个坐标列表，我要导入我的谷歌地图，然后从中创建多边形，我遇到的问题是多边形相互重叠并且每个多边形的轮廓清晰可见，我需要找到一种方法将它们合并为 1 个多边形，移除所有相交线并在外部仅留下 1 条边界线。

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

我可以看到这可能通过使用此处提到的 geoJSON 数据来实现：

GoogleMaps API V3 Build Polygon Containing Multiple ZipCodes

但是我找不到任何与 react-google-maps 一起使用的示例

看起来也可以使用此处提到的 JSTS 和 wicket：

GoogleMaps API V3 Build Polygon Containing Multiple ZipCodes

再次，我不确定如何将这些集成到 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>
    );
  }
}

【问题讨论】：

标签： javascript reactjs google-maps google-maps-api-3 react-google-maps

【解决方案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;
}

这样你可以直接访问谷歌地图对象并在geojson中读取。理想情况下，您在 react-google-maps 中编写一个适当的函数来加载 geojson 并向管理员发送拉取请求，以便将其合并到代码库中。

【讨论】：