У меня есть компонент React-Google-Maps, который позволяет пользователям рисовать полигоны и передает связанный с этими полигонами GeoJSON родительскому компоненту через обратный вызов.

Я бы хотел ограничить пользователей одним многоугольником за раз; Это означает, что когда пользователь завершает построение многоугольника, все ранее отрисованные многоугольники удаляются.

Я видел несколько примеров того, как это сделать с помощью vanilla 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;
1
Boris K 9 Ноя 2017 в 14:38

1 ответ

Лучший ответ

Хорошо понял.

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;
0
Boris K 10 Ноя 2017 в 06:44