标签: leaflet

我想使用 R 中的串扰制作包含点的地图和响应式热图。如下所示：

library(crosstalk)
library(leaflet)
library(DT)

# Wrap data frame in SharedData
sd <- SharedData$new(quakes[sample(nrow(quakes), 10),])

bscols(
  # Create a filter input
  filter_slider("mag", "Magnitude", sd, column=~mag, step=0.1, width=250),
  leaflet(sd) %>% addTiles() %>% addMarkers() %>% addHeatmap())
)

但是，运行代码后可以观察到，这种方式在过滤时并没有得到热图的响应效果

怎样才能达到效果呢？

我创建了几个 geoJSON 层。每个图层对象都有许多属性。当您单击任何图层的对象时，会显示一个弹出窗口，其中包含一个按钮，该按钮应显示有关图层和对象的扩展信息。如何：

1. 获取“lay1”或“lay2”对象；
2. 获取被点击的特征；
3. 获取所有被点击的特征属性？

<div id="map" style="width: 600px; height: 400px;"></div>
<script>
    let map = L.map('map').setView([10.1497326, -67.9283981], 7);

    let data1 = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-67.9283981, 10.1497326]
        },
        "properties": {
          "id": 10,
          "text": "Marker1"
        }
      }]
    };

    let data2 = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [-68.9283981, 11.1497326]      
        },
        "properties": {
          "id": 20,
          "text": "Marker2"
        }
      }]
    };

    let lay1 = L.geoJson(data1, {
      onEachFeature: function(feature, …

如何在 Blazor SPA 上嵌入 Leaflet 地图、使用 JSInterop、应定义哪些对象以及如何将表示在地图上单击的位置的数据从 JavaScript 传递到 Blazor

我的一个组件中有这段代码

class MyMap extends Component {

   state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 11
    };

    render() {
        const position = [this.state.lat,this.state.lng]
         return (
             <MapContainer  className="mymap" center={position} zoom={this.state.zoom}  scrollWheelZoom={false}>
             <TileLayer
                   attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>  contributors'
                   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              <Marker position={position}>
              </Marker>
            </MapContainer >
      )
  }
}

我还通过这个命令安装了传单

  npm install -s react-leaflet

我还在我的index.html 文件中插入了传单的CSS

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

我还给 MapContainer 一个

ClassName="mymap"

其中包括以下CSS代码

 .mymap {
     height: '100vh';
     width: 100%;
} 

所以我的问题是我的地图没有显示，有人可以帮助我吗？

我想为“react-leaflet”的标记元素定义一个反应组件。例如

import React,{useState} from 'react'
import {Marker,useMapEvent } from 'react-leaflet'
import fireIconSvg from './fire-icon.svg'

import L from "leaflet";

const OSLocationMarker = ( {position, onClick} ) => {

  const locationIcon = new L.Icon({
    iconUrl: fireIconSvg,
    iconRetinaUrl: fireIconSvg,
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(35, 45),
    className: 'location-icon'
});

return (
      <Marker
        data="customdata"
        position={position}
        icon={locationIcon}
        onClick={onClick}
      >
      </Marker>
  );
}

export default OSLocationMarker;

通过这个，我想在单击任何 OSLocationMarker （有 N 个标记）时触发一个函数。OSLocationMarker 获取回调函数作为 prop。这是行不通的。使用 useMapEvent() 传单挂钩我没有让它工作。为什么函数没有被调用？

我正在尝试在反应传单中将鼠标悬停在图层上时显示弹出窗口。我使用 GeoJson 渲染地图上的所有图层，并使用 onEachFeature() 在悬停图层时显示弹出窗口。但是，当我将鼠标移入图层时，弹出窗口没有显示。它仅在单击时显示。这是我的代码和我的地图（图层为蓝色）。

import { MapContainer, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';
import './index.css'
import React, { useEffect, useState } from 'react';
import "leaflet/dist/leaflet.css";
import Header from '../common/header'
import { PixiOverlay } from 'react-leaflet-pixi-overlay';
import * as polygonData from '../../data/tinh.json';
import axios from 'axios'
import * as Request from '../../services';

export default function Home() {
  // const [display, setDisplay]=useState(false);
  // const [options, setOptions]=useState([]);
  // const [search, setSearch]= useState("");

  //function to show popup when hover
  const onEachContry = …

我正在设置一个反应传单地图，并且正在按照他们网站上的设置进行操作。但每当我编译该网站时，屏幕都是空白的并且没有错误。

应用程序.js：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import './App.css'; 

export default function App() {
  return (
    <MapContainer 

    center={43.38621, -79.83713} 
    zoom="13" 
    scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    
  </MapContainer>
  );
}

应用程序.css

.leaflet-container {
  width: 100%;
  height: 100vh;
}

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

我正在设置一个地图来查找一个人的坐标，然后将该位置放在地图上。但由于某种原因，坐标没有显示在地图上。我使用 console.log 确保状态变量（存储坐标的位置）发出正确的坐标，而且确实如此。我不知道为什么地图不会改变给他们。

我的代码：

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import Constants from "expo-constants";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import { render } from "react-dom";

import "leaflet/dist/leaflet.css";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      ready: false,
      where: { lat: '', lng: '' },
      error: null,
    }; …

我想让用户能够绘制一条线（这是一条只有 2 个点的折线）。

我启用绘图和监听vertexadded。当_rings标记计数等于 2 时，我禁用绘图。

出于以下几个原因，这种感觉是错误的：

1. 我访问私有变量_rings
2. 现在我禁用绘图，但为了可视化线条，我必须在视觉模式下重新启动它
3. 为了允许用户移动线的 2 个点，我必须在编辑模式下重新启动线。
4. 在编辑模式下，必须禁用两个标记之间的行分割，这可能吗？

我是否缺少一种更简单的方法来做到这一点？

map.pm.enableDraw('Line', {
  snappable: true,
  snapDistance: 20,
});

map.on('pm:drawstart', (event: any) => {
  const { workingLayer } = event;
 
  workingLayer.on('pm:vertexadded', (e: any) => {
    if (workingLayer._rings[0].length >= 2) {

      map.pm.disableDraw('Line', {
        snappable: true,
        snapDistance: 20,
      });
    }
  });
});

我已经设置了一个包含十六进制颜色代码的 Redux 存储。我计划实现一个功能，用户可以选择线条显示的颜色。但是，当我使用选择器更新折线的颜色属性时，地图上的线本身不会改变颜色。我已经验证 redux 商店工作正常。

const DashboardLineAnimation: React.FC<Props> = (): ReactElement => {

    const [start, setStart] = useState([0, 0]);
    const [end, setEnd] = useState([45, 45]);

    return (
        <div>
            <input onChange={() => {setStart([start[0] + 10, start[1] + 10])}}></input>
            <Polyline color={useSelector((state: RootState): string => state.attackMap.options.color.hex)} positions={[start as LatLngTuple, end as LatLngTuple]} />
        </div>
    );
};