Question

当我在一个简单的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>

.png图块存储在src / demo-map /中，与Mobile Atlas Creator导出的目录结构相同

有人可以帮助我将我的图块加载到react-leaflet中，或建议一种将标准Leaflet合并到我的React应用中的方法，绕过react-leaflet和TileLayer吗？

谢谢

Answer 1

对我有用的是，我将瓷砖文件夹移动到公共目录中，然后在 jsx 代码中我这样引用它：

这是我的目录：

在react-leaflet中将本地图块渲染为<tilelayer>

1 个答案: