0

我正在尝试在画布上添加地图并使用 react-leaflet 库 v3.X 将图块放在那里。目前瓷砖显示为<img>HTML。在最新版本的 react-leaflet 中没有 Map 对象，只有 MapContainer 对象。所以我不能将属性 preferCanvas=true 添加到 MapContainer。值得注意的是，在旧版本的 react-leaflet 中，有带有 preferCanvas 选项的 Map 对象，但后来它被删除了。我认为存在另一种将地图添加到画布的方法。请帮忙。

import React, { useState, useEffect, useRef } from "react";
import { MapContainer as LeafletMap, TileLayer } from "react-leaflet";

// some code skipped
return (
<LeafletMap
  preferCanvas={true} // не работает
  center={[51.65, 103.72]}
  zoom={14}
  maxZoom={16}
  attributionControl={true}
  zoomControl={true}
  doubleClickZoom={false}
  scrollWheelZoom={true}
  dragging={true}
  animate={true}
  easeLinearity={0.35}
  whenReady={(map) => {
    setMapReady(true);
  }}
>
  <TileLayer
    url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
    id="mapbox/outdoors-v11"
  />
</LeafletMap>
  );
}
4

1 回答 1

0

preferCanvas从未打算将 tilelayer 切片渲染为画布元素。 从文档：

路径是否应该在 Canvas 渲染器上渲染。默认情况下，所有路径都在 SVG 渲染器中渲染。

您想要做的不是内置在传单中，但并不少见。而不是完全从头开始构建它，看起来有人已经为香草传单构建了L.TileLayer.Canvas。所以我们需要做的就是把它放到 react-leaflet 中。您可以按照react-leaflet 网站上的这些文档来创建一个基于 L.TileLayer.Canvas 构建的自定义 react-leaflet 组件：

import { createLayerComponent } from "@react-leaflet/core";
import L from "leaflet";
import "tilelayer-canvas";

const createLayer = (props, context) => {
  const instance = L.tileLayer.canvas(props.url, { ...props });

  return { instance, context };
};

const updateLayer = (instance, props, prevProps) => {
  // you may not need all of these
  //or you may need others I didn't include here:
  if (prevProps.url !== props.url) {
    if (instance.setUrl) instance.setUrl(props.url);
  }
  if (prevProps.opacity !== props.opacity) {
    if (instance.setOpacity) instance.setOpacity(props.opacity);
  }
  if (prevProps.zIndex !== props.zIndex) {
    if (instance.setZIndex) instance.setZIndex(props.zIndex);
  }
};

const TilelayerCanvas = createLayerComponent(createLayer, updateLayer);

export default TilelayerCanvas;

现在在您的地图中：

import TilelayerCanvas from "./TilelayerCanvas";

const Map = (props) => {
  return (
    <MapContainer ... >
      <TilelayerCanvas url="the_url" attribution="some_attribution" />
    </MapContainer>
  );
};

export default Map;

工作代码框

如果您检查 devtools，您会看到图块呈现为画布元素而不是 img 元素。

于 2021-04-20T18:28:11.180 回答