文章/答案/技术大牛

发布

社区首页 >问答首页 >将本地瓷砖渲染为react-leaflet中的<TileLayer>

问将本地瓷砖渲染为react-leaflet中的<TileLayer>
EN

Stack Overflow用户

提问于 2018-08-28 12:13:15

回答 1查看 1.1K关注 0票数 1

当我在一个简单的Leaflet index.html中运行我本地的.png平铺库时，我得到了完美的渲染和地理位置正确的平铺：

    <script>
        function onLoad() {

            var mymap = L.map('mapid').setView([-42.132, 147.175], 12);

            L.tileLayer('demo-map/{z}/{x}/{y}.png',
            {    maxZoom: 16  }).addTo(mymap);
        }
    </script>   
</head>
<body onload="onLoad();"> 
    <div id="mapid" style="height: 500px;"></div>
</body>

但是当我将相同的路径放入react-leaflet TileLayer的"url=“中时，磁贴不会渲染。

          <BaseLayer checked name="Local Map (Offline)">
        <TileLayer
          attribution="This map is offline"
          url="demo-map/{z}/{x}/{y}.png"
        />
      </BaseLayer>

演示切片存储在与Mobile Atlas Creator导出的目录结构相同的src/ .png -map/目录结构中

谁能帮我在react-leaflet中加载我的磁贴，或者建议一种将标准传单整合到我的React应用程序中的方法，绕过react-leaflet和TileLayer？

谢谢

leaflet

react-leaflet

reactjs

回答 1

Stack Overflow用户

发布于 2021-05-04 21:40:53

对我来说起作用的是，我将tiles文件夹移到了public目录中，然后在jsx代码中像这样引用它：

这是我的目录：

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52049978

复制

相似问题

问将本地瓷砖渲染为react-leaflet中的<TileLayer>
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将本地瓷砖渲染为react-leaflet中的<TileLayer>EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将本地瓷砖渲染为react-leaflet中的<TileLayer>
EN