React Leaflet - измените X / Y LatLng, чтобы он работал от центра, а не снизу слева, используя CRS - PullRequest
Новая
       78

React Leaflet - измените X / Y LatLng, чтобы он работал от центра, а не снизу слева, используя CRS

0 голосов
/ 27 апреля 2020

Эй, кому-нибудь удалось изменить начальные точки оси X / Y в буклете о реакции? Мне нужны мои координаты, чтобы работать с середины карты, а не слева внизу, используя CRS. Ниже то, что у меня есть, любая точка в правильном направлении была бы отличной! 

  componentDidMount() {
    if ( __CLIENT__ ) {
      Leaflet = require('leaflet');
      LeafletCRS = Leaflet.CRS.Simple;

      this.setState({
        leafletLoaded: true
      });
    }
  }

  render() {
    const bounds = [[0, 0], [600, 600]];
    return (
       <div className="columns small-12 medium-6">
          <Map
             style={ { width:'600px',height: '600px' } }
             minZoom={ 1 }
             center= { [0, 0] }
             maxZoom={ 2 }
             bounds={ bounds }
             crs={ LeafletCRS }
           >
           <ImageOverlay
              url="IMG HERE"
              bounds={ bounds }
           />
           <Circle center= { [0, 0] } radius={5} fillColor="blue" />
         </Map> 
      </div>
   )

1 Ответ

0 голосов
/ 28 апреля 2020

Лучший пример этого - http://plnkr.co/edit/5SQqp7SP4nf8muPM5iso?p=preview&preview

  L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
    // At zoom 0, tile 268x268px should represent the entire "world" of size 8576x8576.
    // scale is therefore 8576 / 268 = 32 (use the reverse in transformation, i.e. 1/32).
    // We want the center of tile 0/0/0 to be coordinates [0, 0], so offset is 8576 * 1/32 / 2 = 268 / 2 = 134.
    transformation: new L.Transformation(1 / 32, 134, -1 / 32, 134)
  });

Вам просто нужно изменить математическую шкалу, чтобы она подходила вам

...