Добавить текст внутри прямоугольника листовки

Я использую следующий код для создания прямоугольника на карте leaflet.

const rectangles = [[51.49, -0.08], [51.5, -0.06]]   

<Rectangle key={key} bounds={rectangle} color="green">

</Rectangle>

Я хочу добавить текст внутри прямоугольника, например, метку для прямоугольника. Есть ли способ сделать это?

Для этого я использую библиотеку react-leaflet.


reactjs leaflet react-leaflet
person kohli    schedule 14.06.2018    source источник
comment
Какой модуль/библиотеку вы используете? Не могли бы вы добавить больше информации к вашему вопросу? Используете ли вы какую-то реактивную оболочку для листовки?   -  person agenthunt    schedule 14.06.2018
comment
@agent_hunt Я добавил библиотеку, которую использую   -  person kohli    schedule 14.06.2018

Ответы (2)


arrow_upward
2
arrow_downward

Чтобы написать на карте, мы можем использовать DivIcon из добавленной библиотеки Leaflet. в компонент Marker React-Leaflet.

Создайте DivIcon с помощью HTML

DivIcon — это значок, который может содержать HTML вместо изображения. Мы импортируем библиотеку Leaflet и создадим DivIcon с нужным текстом.

import L from 'leaflet';

const text = L.divIcon({html: 'Your HTML text here'});

Добавьте DivIcon к маркеру

Создав DivIcon, мы добавим его к маркеру, расположенному в центре Polygon.

import React from 'react';
import L from 'leaflet';
import { Marker, Polygon } from 'react-leaflet';

const PolygonWithText = props => {
  const center = L.polygon(props.coord).getBounds().getCenter();
  const text = L.divIcon({html: props.text});

  return(
    <Polygon color="blue" positions={props.coords}>
      <Marker position={center} icon={text} />
    </Polygon>
  );
}

export default PolygonWithText

Добавьте маркер на карту

Наконец, мы добавляем Polygon, Marker и DivIcon к Map.

import React, { Component } from 'react';
import {Map, TileLayer} from 'react-leaflet';
import PolygonWithText from './PolygonWithText';

class MyMap extends Component {
  render () {
    return (
      <Map center={[20.75, -156.45]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        <PolygonWithText text="MyText" coords={[...]} />
      </Map>
  }
}

export default MyMap;
person Jason    schedule 22.03.2019

arrow_upward
1
arrow_downward

обратитесь к приведенному ниже коду, в нем используется прямоугольник с всплывающей подсказкой внутри него.

{zoneLabel} 

<Rectangle key={key} bounds={coordinates}>
</Rectangle>

person shivanka perera    schedule 26.07.2018