Question

我有一个坐标列表，我正在导入我的谷歌地图，然后从这些地图创建多边形，我的问题是多边形相互重叠，每个多边形的轮廓清晰可见，我需要找到一种方法将它们合并为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>
    );
  }
}

Answer 1

这可能是一种黑客行为。

＆＃13;

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;
}

＆＃13;

这样您就可以直接访问Google地图对象并阅读geojson。理想情况下，您在react-google-maps中编写了一个正确的函数来加载geojson并向管理员发送拉取请求，以便它合并到代码库中。

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

1 个答案: