标签: leaflet

我目前正在开发一个使用 LitElement 组件的应用程序。我想将 Leaflet 集成到其中，但在显示地图时遇到问题。我已经使用 npm 在我的项目中安装了 Leaflet，并创建了一个如下所示的类。

import {LitElement, html, css} from 'lit-element';
import './node_modules/leaflet/dist/leaflet';

class Map extends LitElement{

    static get styles() {
        return [css``];
    }

    constructor() {
        super();
    }
    connectedCallback() {
        super.connectedCallback();
        let map = L.map('mapid').setView([51.505, -0.09], 13);

        let urlTemplate = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
        map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
    }

    render() {
        return html`
            <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
            <div id="mapid" style="height: 100%"></div>

        `;
    }
}

customElements.define("my-map", Map);

运行我的应用程序会导致以下错误：未捕获类型错误：无法设置未定义的属性“L”。我对如何使用 Leaflet 在 LitElement 应用程序中显示地图有点迷失，并且非常感谢您能推动我走向正确的方向。

我试图用传单标记方法绘制大约 50K 点，但由于渲染时间和所需的内存而无法实现。我看到的新方法是使用 Leaflet-canvas 在屏幕上绘制点（而不是在 DOM 中）。我如何在 React leaflet 3.X 中执行此操作。我尝试了 https://www.npmjs.com/package/react-leaflet-canvas-markers 但它不支持传单的V3。

有什么建议吗？

问题是，在我的 React 项目中使用 TS 时，我需要设置函数的类型useRef()，但我不知道它是什么。正如下面的代码所示，我将其设置为然后any调用leafletElement。出现的问题是，即使通过whenCreated函数 isnide引用了映射，该元素也始终是未定义的MapContainer。

我试图MapContainer以一种显示所有内容的方式进行设置Marker，使其动态调整大小，因此当位置更改时，它会更新它并调整它，MapContainer因为它没有属性ref。

我试图重现的示例

const MapTry = () => {
const [nodes, setNodes] = useState<INode[]>([]);
const [devices, setDevices] = useState<IDevice[]>([]);

const [nodeDeviceTest, deviceNodeConnection] = useState([]);
var arrObj: any = [];
var arrOfBounds: any = [];
var mapRef = useRef<any>();
var groupRef = useRef<any>();


var device = new L.Icon({
    iconUrl: deviceCar,
    iconSize: [30, 30],
    iconAnchor: [16, 3],
    popupAnchor: [1, …

背景

对于React Leaflet v2，有一个NPM插件react-leaflet-control，它允许您创建任何类型的控件并将其放入react-leaflet控件容器中。显然，随着 RL-v3 的引入，随着 API 的更改，这在 v3 中不再适用。我想创建一个自定义控件包装器，以允许我在其中放置任何类型的 React Node。

当前状态

我目前拥有的代码可以工作......但不能。我从 Stack Overflow 帖子中的示例中提取了内容：React Leaflet V3 Custom Control，它让我获得了创建自定义控件的 99% 解决方案。但是，我的用例是地图上的工具栏，其中包含可交互的按钮（颜色用于指定活动工具）。然而，通过这段代码，我拥有了该功能，但由于每次渲染都会导致创建一个新控件，因此工具提示会在失去其锚元素时闪烁。

期望的行为

我想要一个工具栏，允许用户选择工具在地图上执行操作（想想老式的）leaflet-draw。为了提供反馈，我希望按钮在工具处于活动状态时改变颜色，对于用户体验，我想要工具提示来描述操作按钮的。

实际行为

工具栏存在，用户可以选择工具并且有 UI 反馈，但是，当选择工具时在每个渲染上删除并重新添加控件时，工具提示会丢失其锚元素。

代码沙箱

https://codesandbox.io/s/react-leaflet-custom-control-n1xpv

我尝试在 Next JS 13.0.1 项目中实现 LeafLet 地图组件，但地图组件的渲染出现问题。

第一次加载地图组件时，出现这样的错误：

ReferenceError: window is not defined
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet/dist/leaflet-src.js:229:19)
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet/dist/leaflet-src.js:7:11)
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet/dist/leaflet-src.js:9:3)
    at Object.(sc_client)/./node_modules/leaflet/dist/leaflet-src.js (C:\desenvolvimento\estacionai-front\.next\server\app\page.js:482:1)
    at __webpack_require__ (C:\desenvolvimento\estacionai-front\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.js:2:18)
    at eval (webpack-internal:///(sc_client)/./node_modules/leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.js:4:2)
    at Object.(sc_client)/./node_modules/leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.js (C:\desenvolvimento\estacionai-front\.next\server\app\page.js:472:1)  
    at __webpack_require__ (C:\desenvolvimento\estacionai-front\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_client)/./components/Mapa.tsx:11:91)

无论如何，地图会加载，但标记之类的东西不会出现

真正的问题是当页面重新加载时，是硬重新加载或链接引用。出现此错误：

TypeError: Cannot read properties of undefined (reading 'default')
    at resolveModuleMetaData (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:195:82)
    at serializeModuleReference (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1298:50)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1660:40)
    at Array.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1081:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:163:36)
    at retryTask (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1823:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1856:33)
    at AsyncLocalStorage.run (node:async_hooks:330:14) …

我正在使用 React Leaflet 创建自定义地图。

当前正在渲染卡片（图像叠加），但它不会填充放置卡片的容器。

容器的大小是严格设置的，我希望地图尽可能填充容器。所有使用 CSS 调整大小的尝试都失败了。

实例： https: //codesandbox.io/s/dark-worker-8qbzfr

我的代码：

import "./styles.css";
import { MapContainer, ImageOverlay } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const M = ({ width, height, zoom, center }) => {
  const wh = [width, 500];
  const origin = [0, 0];
  const bounds = [origin, wh];

  return (
    <div style={{ width: "1100px", height: "600px" }}>
      <MapContainer
        style={{ height: "100%", minHeight: "100%" }}
        bounds={zoom ? undefined : bounds}
        boundsOptions={{
          padding: [0, 0]
        }}
        maxBounds={bounds}
        zoom={center ? zoom : …

我收到此错误并注意到已加载

Uncaught (in promise) TypeError: t is undefined
    Ye vue-leaflet.es.js:46
    setup vue-leaflet.es.js:1205
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    __weh runtime-core.esm-bundler.js:2684
    flushPostFlushCbs runtime-core.esm-bundler.js:341
    flushJobs runtime-core.esm-bundler.js:395
    promise callback*queueFlush runtime-core.esm-bundler.js:280
    queuePostFlushCb runtime-core.esm-bundler.js:302
    queueEffectWithSuspense runtime-core.esm-bundler.js:1576
    scheduler runtime-core.esm-bundler.js:1798
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:384
    triggerRefValue reactivity.esm-bundler.js:1000
    node_modules chunk-LQ5UJQYN.js:1429
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:379
    triggerRefValue reactivity.esm-bundler.js:1000
    node_modules chunk-LQ5UJQYN.js:1429
    triggerEffect reactivity.esm-bundler.js:394
    triggerEffects reactivity.esm-bundler.js:379
    triggerRefValue reactivity.esm-bundler.js:1000
    set value reactivity.esm-bundler.js:1045
    finalizeNavigation vue-router.mjs:3324
    pushWithRedirect vue-router.mjs:3197
    promise callback*pushWithRedirect vue-router.mjs:3164
    push vue-router.mjs:3089
    install vue-router.mjs:3520
    use runtime-core.esm-bundler.js:4349
    <anonymous> main.ts:10
.
.
.
.

我的代码是这样的

                    <div class="map">
                        <l-map ref="map" …

我正在尝试开发一个基于Backbone JS的应用程序.我想嵌入一个基于传单JS的OpenStreetMap地图,但我找不到任何教程.

我正在从GeoJSON文件加载地图数据并为每个多边形附加一个click事件.单击时,脚本应从服务器获取数据并修改其中一个单击的多边形属性.即:

function onClick(e) {
    var status = e.target.feature.properties.ACCESS;
    $.ajax({
        url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
        dataType: 'jsonp',
        type: 'GET',
        success: function(data) {
        status = data.status;
        e.target.feature.properties.ACCESS = data.status;
        e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
        },
        error: function(data){console.log(data)}
    });
    e.target.feature.properties.ACCESS = status;
    map.fitBounds(e.target.getBounds());
}

但由于成功函数是一个回调(同步与否,它并不重要),我无法回到原始事件源(即e),因此我可以修改其中一个属性.

我的问题是:如何在加载此数据后返回事件源？有没有通用的Javascript方式？如果没有,有什么方法可以按功能ID查询GeoJSON图层吗？(=>因此,我可以在ajax调用中发送功能ID,只需将其与响应一起返回)

我想了解Leaflet的工作原理.我正在尝试本教程.我从教程中删除了一些代码以获得更干净的代码.现在有了L.control.layers的问题.

如果我想添加这样的叠加层

var overlays = {
          "Cities": cities
            };

var layersControl = L.control.layers(null, overlays);

添加叠加层来控制没有问题.使用此代码,我可以通过单击复选框显示/隐藏图层

但是,如果我想添加这样的叠加层

 var overlays = {
              "Cities": cities
                };
var layersControl = L.control.layers();
layersControl.addOverlay(overlays);

叠加层存在问题.这里当我想通过单击复选框显示/隐藏图层时,出现错误.

未捕获的TypeError:对象#在文件中没有方法'onAdd':///android_asset/www/leaflet.js:6

未捕获的TypeError:对象#在文件中没有方法'onRemove':///android_asset/www/leaflet.js:6

我必须使用2.段代码.谁能帮我 ？

完整代码在这里

var cities = new L.LayerGroup();

 L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
            L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
            L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
            L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


            var cmAttr = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
                cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';



            var …