Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性?

Leaflet _ ReactJS - Where to find the invalidateSize property?(Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性?)

本文介绍了Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在以下位置找到它:

I have tried to find it in:

  • this.mapRef.current.leafletElement
  • this.mapRef.current.getLeafletElement()
    • 使 this.mapRef.current.getLeafletElement().invalidateSize 失效

    这里是我的反应片段:

    import React, {Component, Fragment} from "react"; 
    
    import L from "leaflet" 
    import   "~/lib/leaflet/leaflet.css"
    import "~/lib/leaflet/leaflet"
    import styled from "styled-components"
    import Head from 'next/head' 
    
    constructor(props) {
        super(props);
        this.mapRef = React.createRef();
      }
    
     componentDidMount(){  
    
        // console.log("this.map: ", this.map);
        console.log("this.refs.mapTest: ", this.mapRef.current.leafletElement 
    
    // or other trial)
    
    {...}
      this.map= L.map("map", {   
          center:location,
          zoom:12,
          zoomControl:true
      })
    {...}
    
     } 
    
    
    
     render(){ 
        return (
          <Fragment>
              <Head>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon-2x.png"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon.png"/>
    
              <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
       crossorigin=""/> 
    
         <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
       integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
       crossorigin=""></script>   
              </Head>
            <Wrapper 
              ref={this.mapRef}
              width="100%" 
              height="80vh" 
              id="map"
            /> 
          </Fragment>
        )
      }
    } 
    

    我找不到invalidateSize的属性,

    I cant find the invalidateSize's property,

    任何提示都会很棒,谢谢

    any hint would be great, thanks

    推荐答案

    如果你在 componentDidMount 内登录,则引用 Map

    If you log inside componentDidMount the reference to the Map

    componentDidMount() {
        const map = this.mapRef.leafletElement;
        console.log(map)
    } 
    

    _zoomBoundLayers: {26: NewClass}__proto__:NewClass底部的控制台展开,你可以看到继承的方法和invalidateSize 被显示出来,因此在那里提供.

    and expand in the console on the bottom __proto__: NewClass under _zoomBoundLayers: {26: NewClass} you can see the methods that are inherited and that invalidateSize is displayed and therefore provided there.

    编辑

    我以为你在使用 react-leaflet.

    I thought you were using react-leaflet.

    在不使用 react 传单的情况下,您可以使用以下代码获取对地图实例的引用.

    Without the use of react leaflet you can use the following code to get a reference to the map instance.

    class Map extends Component {
      componentDidMount() {
        const map = this.map = L.map('map').setView([51.505, -0.09], 13);
    
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
          maxZoom: 18,
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          id: 'mapbox.streets'
        }).addTo(map);
    
        console.log(this.map)
      }
    
      render() {
        return (
            <div id="map"/>
        );
      }
    }
    

    然后和 react-leaflet 版本一样:在控制台底部展开 __proto__:NewClass_zoomBoundLayers: {26: NewClass} 可以看到继承的方法,并且 invalidateSize 显示并因此提供在那里.

    and then do as in the react-leaflet version: expand in the console on the bottom __proto__: NewClass under _zoomBoundLayers: {26: NewClass} you can see the methods that are inherited and that invalidateSize is displayed and therefore provided there.

    演示

    这篇关于Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Leaflet _ ReactJS - 在哪里可以找到 invalidateSize 属性?

基础教程推荐