Google Mapsで一度に1つのポリゴンに制限する

Question

私はReact-Google-Mapsコンポーネントを使用して、ユーザーがポリゴンを描き、そのポリゴンの関連GeoJSONをコールバックを介して親コンポーネントに渡します。

私がしたいのは、ユーザーを一度に1つのポリゴンに制限することです。つまり、ユーザーがポリゴンを完成すると、以前にレンダリングされたすべてのポリゴンが削除されます。

バニラJS、jQuery、Angular 2でこれを行う方法の例をいくつか見てきましたが、Reactでは何もありません。

マイコンポーネント：

import React, { Component } from 'react'; 
const { compose, withProps } = require('recompose'); 
const { withScriptjs, withGoogleMap, GoogleMap } = require('react-google-maps'); 
const { 
    DrawingManager 
} = require('react-google-maps/lib/components/drawing/DrawingManager'); 

const editTrack = polygon => { 
    let GeoJSON = { 
     type: 'Feature', 
     geometry: { 
      type: 'Polygon', 
      coordinates: [] 
     }, 
     properties: {} 
    }; 
    for (let point of polygon.getPath().getArray()) { 
     GeoJSON.geometry.coordinates.push([point.lng(), point.lat()]); 
    } 
    return GeoJSON; 
}; 

const PlotMap = compose(
    withProps({ 
     googleMapURL: 
      'https://maps.googleapis.com/maps/api/js?key=mykey&v=3.exp&libraries=geometry,drawing,places', 
     loadingElement: <div style={{ height: `100%` }} />, 
     containerElement: <div style={{ height: `400px` }} />, 
     mapElement: <div style={{ height: `100%` }} /> 
    }), 
    withScriptjs, 
    withGoogleMap 
)(props => (
    <GoogleMap 
     defaultZoom={8} 
     defaultCenter={new google.maps.LatLng(32.095, 35.398)}> 
     <DrawingManager 
      onPolygonComplete={polygon => { 
       polygon.setEditable(true); 
       props.getGeoJSON(editTrack(polygon)); 
       google.maps.event.addListener(polygon.getPath(), 'insert_at', function(
        index, 
        obj 
       ) { 
        props.getGeoJSON(editTrack(polygon)); 
       }); 
       google.maps.event.addListener(polygon.getPath(), 'set_at', function(
        index, 
        obj 
       ) { 
        props.getGeoJSON(editTrack(polygon)); 
       }); 
      }} 
      defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON} 
      defaultOptions={{ 
       drawingControl: true, 
       drawingControlOptions: { 
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
        position: google.maps.ControlPosition.TOP_CENTER, 
        drawingModes: [google.maps.drawing.OverlayType.POLYGON] 
       } 
      }} 
     /> 
    </GoogleMap> 
)); 

export default PlotMap; 

Answer 1

OKには、それを得ました。

import React, { Component } from 'react'; 
const { compose, withProps } = require('recompose'); 
const { withScriptjs, withGoogleMap, GoogleMap } = require('react-google-maps'); 
const { 
    DrawingManager 
} = require('react-google-maps/lib/components/drawing/DrawingManager'); 

const editTrack = polygon => { 
    let GeoJSON = { 
     type: 'Feature', 
     geometry: { 
      type: 'Polygon', 
      coordinates: [[]] 
     }, 
     properties: {} 
    }; 
    for (let point of polygon.getPath().getArray()) { 
     GeoJSON.geometry.coordinates[0].push([point.lng(), point.lat()]); 
    } 
    GeoJSON.geometry.coordinates[0].push(GeoJSON.geometry.coordinates[0][0]); 
    return GeoJSON; 
}; 
//this is where we will keep our polygon when it is drawn 
let latestPolygon; 

const PlotMap = compose(
    withProps({ 
     googleMapURL: 
      'https://maps.googleapis.com/maps/api/js?key=mykey&v=3.exp&libraries=geometry,drawing,places', 
     loadingElement: <div style={{ height: `100%`, width: `100%` }} />, 
     containerElement: <div style={{ height: `400px`, width: `100%` }} />, 
     mapElement: <div style={{ height: `100%`, width: `100%` }} /> 
    }), 
    withScriptjs, 
    withGoogleMap 
)(props => (
    <GoogleMap 
     defaultZoom={8} 
     defaultCenter={new google.maps.LatLng(32.095, 35.398)}> 
     <DrawingManager 
      onPolygonComplete={polygon => { 
//if we have a polygon on the map, delete it now 
       latestPolygon && latestPolygon.setMap(null); 
       polygon.setEditable(true); 
       props.getGeoJSON(editTrack(polygon)); 
       google.maps.event.addListener(polygon.getPath(), 'insert_at', function(
        index, 
        obj 
       ) { 
        props.getGeoJSON(editTrack(polygon)); 
       }); 
       google.maps.event.addListener(polygon.getPath(), 'set_at', function(
        index, 
        obj 
       ) { 
        props.getGeoJSON(editTrack(polygon)); 
       }); 
//now we set the storage polygon to be the one we just drew 
       latestPolygon = polygon; 
      }} 
      defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON} 
      defaultOptions={{ 
       drawingControl: true, 
       drawingControlOptions: { 
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
        position: google.maps.ControlPosition.TOP_CENTER, 
        drawingModes: [google.maps.drawing.OverlayType.POLYGON] 
       } 
      }} 
     /> 
    </GoogleMap> 
)); 

export default PlotMap;