React Leaflet-修改X / Y LatLng以使用CRS从中心而不是从左下方开始工作

问题描述 投票:0回答:1

嘿,有人设法改变反应传单中的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>
   )
reactjs leaflet react-leaflet r-leaflet
1个回答
0
投票

最好的例子是-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)
  });

您只需要修改数学量表以适合您

© www.soinside.com 2019 - 2024. All rights reserved.