标签: leaflet

我尝试在 VueJS 中使用 Leaflet-draw ，在调用它之后

import LeafletDraw from 'leaflet-draw'

但是当我尝试使用它时

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: drawnItems
        }
    });

    map.addControl(drawControl);

我只有部分控件的工具栏

我是否缺少要包含的 CSS 文件？

我正在使用 Leaflet 库来制作地图，但遇到了一个小问题：

我有简单的非地理地图和连接两个坐标的简单线。当有人单击该行上的任意位置时，会打开一个弹出窗口。我试图在弹出窗口本身中显示单击点的坐标。

我尝试做这样的事情，但总是收到未定义的错误。

L.polyline([xy([296.4, -235.1]), xy([1426.3, 100.3])], {color: 'red'}).bindPopup('Coordinates: ' + L.getPopup.getLatLng).addTo(myLayerGroup);

我知道我应该getLatLng()在弹出窗口本身上调用该方法，但是我到底该怎么做呢？由于我从未将弹出窗口定义为单独的变量，因此如何引用弹出窗口本身？我的地图上有数百行，因此将每一行和弹出窗口声明为单独的变量并不是真正的最佳解决方案。

我刚刚开始为我即将进行的项目了解 Leaflet.js。

我想要完成的任务： 我需要制作一个显示在地图上的标记列表，当列表项悬停（或鼠标悬停）时，它将显示地图上的位置（对于单个标记，它应该改变）它的颜色。对于聚集标记，它应该显示覆盖线，就像我们将其悬停时的行为一样。如果可能的话，也许还可以更改其颜色）。地图以及缩放级别不应更改，简单地说，我需要突出显示地图上的标记/集群。

我现在所取得的成就：我能够在单标记上完成它。

让我超级沮丧的是：我没能找到一种方法让它在Clustered Marker上发生。

我使用全局 var 对象来存储任何创建的标记。

function updateMapMarkerResult(data) {
  markers.clearLayers();
  for (var i = 0; i < data.length; i++) {
    var a = data[i];
    var myIcon = L.divIcon({
      className: 'prop-div-icon',
      html: a.Description
    });
    var marker = L.marker(new L.LatLng(a.Latitude, a.Longitude), {
      icon: myIcon
    }, {
      title: a.Name
    });
    marker.bindPopup('<div><div class="row"><h5>Name : ' + a.Name + '</h5></div><div class="row">Lat : ' …

我正在尝试获取动态添加到地图的标记的边界。我的目标是动态地将标记添加到地图中，并使视图自动缩放以适合地图上所有标记的边界。以下是我当前的代码以及迄今为止我所尝试过的：

起点是经纬度数组：

该网页提供了用户可以选择和取消选择的地址和复选框的列表。选择所需的地址后，用户可以单击地图上的视图，标记将出现在地图上（这工作正常，我只是无法将视图缩放到这些标记的边界）

我有一个循环，为每个检查的地址提取纬度和经度并将其推入数组中，如下所示：

latLng.push(42.9570316,-86.04564429999999);
latLng.push(43.009381,-85.890041);

...这是一个循环，因此它始终包含所需数量的值并输出：

latLng = [42.9570316,-86.04564429999999,43.009381,-85.890041,43.11996200000001,-85.42854699999998,43.153376,-85.4730639,42.8976947,-85.88893200000001];

var thisLatLng = L.latLng(latLng);

console.log(thisLatLng); // this returns Null

mymap.fitBounds(group); //  returns Error: Bounds are not Valid

mymap.fitBounds(group.getBounds()); // returns group.getBounds() is not a function

我也尝试过以此作为起点：

latlng.push(L.marker([42.9570316,-86.04564429999999]));
latlng.push(L.marker([43.009381,-85.890041]));

...这包含在一个循环中，该循环会产生以下输出

latLng = [L.marker([42.9570316,-86.04564429999999]),L.marker([43.009381,-85.890041]),L.marker([43.11996200000001,-85.42854699999998]),L.marker([43.153376,-85.4730639]),L.marker([42.8976947,-85.88893200000001])];

console.log(latLng); // this returns makrers with the correct lat & lng above

var group = new L.featureGroup(latLng);

console.log(group); //this returns a Null featureGroup

mymap.fitBounds(group); // returns Error: Bounds are not valid

mymap.fitBounds(group.getBounds()); // returns Error: Bounds are not …

我正在使用 React 和 React-Leaflet 生成给定数据点及其纬度/经度坐标的circleMarkers 地图。我在渲染数据地图时没有任何问题，甚至可以在用户按侧边栏上的过滤器类型进行过滤时更改渲染的数据。

<Map center={[this.props.data[0].Latitude, this.props.data[0].Longitude]} zoom={12}>
    <TileLayer
      attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />

    /* code for rendering circleMarkers goes here */

</Map>

当用户单击标记时，我会得到它，因此地图上会出现一个弹出窗口，其中包含有关相应点的一些数据简介。

<CircleMarker center={[entry.Latitude, entry.Longitude]} color={this.determineMarkerColor(entry)} radius={this.computeMarkerSize(entry)}>
          <Popup>
              <span>Radius is for: {this.props.filterType} </span>
          </Popup>
</CircleMarker>

有没有办法配置地图，以便它可以弄清楚用户何时尝试，例如，按住 Shift 单击以选择多个点，然后将所选点作为数组传递？或者，更好的是，如何使地图具有交互性，以便用户可以拖放自定义区域（例如绘制正方形或圆形）并选择该区域内的所有渲染点？

我计划将这组选定数据传递给另一个将其绘制成图表的组件。

任何关于在哪里寻找这个的建议将不胜感激。

您好，我正在创建一个环境闪亮的应用程序，我想在其中使用传单地图创建一些基于 openair 包的简单绘图（https://rpubs.com/NateByers/Openair）。

Aq_measurements() 一般形式

AQ<- (aq_measurements(country = \xe2\x80\x9ccountry\xe2\x80\x9d, city = \xe2\x80\x9ccity\xe2\x80\x9d, location = \xe2\x80\x9clocation\xe2\x80\x9d, parameter = \xe2\x80\x9cpollutant choice\xe2\x80\x9d, date_from = \xe2\x80\x9cYYYdateY-MM-DD\xe2\x80\x9d, date_to = \xe2\x80\x9cYYYY-MM-DD\xe2\x80\x9d)。

位置数据框中可用的所有参数。

worldmet() 一般形式

met <- importNOAA(code = "12345-12345", year = YYYYY:YYYY)\n

NOAA 代码可在位置数据框中找到

下面我创建了一个初始数据框的示例：

location = c("100 ail","16th and Whitmore","40AB01 - ANTWERPEN") \nlastUpdated = c("2018-02-01 09:30:00", "2018-02-01 03:00:00", "2017-03-07 10:00:00") \nfirstUpdated = c("2015-09-01 00:00:00","2016-03-06 19:00:00","2016-11-22 15:00:00")\npm25=c("FALSE","FALSE","FALSE")\npm10=c("TRUE","FALSE","FALSE")\nno2=c("TRUE","FALSE","FALSE")\nlatitude=c(47.932907,41.322470,36.809700)\nlongitude=c(106.92139000,-95.93799000\n,-107.65170000)\n\ndf = data.frame(location, lastUpdated, firstUpdated,latitude,longitude,pm25,pm10,no2)\n

作为一般想法，我希望能够根据此数据框单击地图中的某个位置。然后我有 1selectInput()和 2 …

我是 Leaflet/React-Leaflet 的新手，我正在尝试在地图上绘制圆形标记，但遇到了麻烦。React-Leaflet 的文档不是很好。我已经弄清楚如何添加点击时显示的弹出窗口。

这是我的代码：

    import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer, Tooltip, Circle } from 'react-leaflet';
import DivIcon from 'react-leaflet-div-icon';
import axios from 'axios';


export default class MapView extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      nasaLocations: [],
      spacexLocations: []
    };
  }

  componentDidMount() {
    axios.get(`https://data.nasa.gov/resource/gvk9-iz74.json`)
      .then(res => {
        const nasaData = res.data;
        this.setState({nasaLocations: nasaData})
        console.log(this.state.nasaLocations);
      })

    axios.get(`https://api.spacexdata.com/v2/launchpads`)
      .then(res => {
        const spacexData = res.data;
        this.setState({spacexLocations: spacexData})
        console.log(this.state.spacexLocations);
      })
  } …

我遇到了一个问题leaflet map。他们是

1. 我在移动标记时无法缩放 15km radius（从）marker

2. 我无法在移动时画线（不是优先事项）

这是我尝试过的

请参考 jsfiddle，因为代码片段不起作用

jsfiddle： http: //jsfiddle.net/eabangalore/x4gokvoa/8/

// Create the map
var map = L.map('map').setView([-31.4, -64.183], 12);

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

// add a marker in the given location
var lat = -31.4;
var lng = -64.183;
var marker = L.marker([lat, lng]).addTo(map);

// add a layer and add points
var myLayer = L.geoJson().addTo(map);

// geojsonFeature
var geojsonFeature = {
    "type": …

Leaflet 有一个已知问题，当您使用自定义图块提供程序而不是真实地球图像时，设置crs: L.CRS.Simple，Leaflet 会查询 Y 坐标与数学轴相比反转的图像。因此，右上角第一个图像的位置是1x-1而不是1x1。

在互联网上，关于反转 Y 轴的主题相当古老，所以我的问题是：现在是否有一种正常的短且内置的方法来反转查询的 Y 轴？

我发现的唯一旧解决方案是重写 Leaflet 内部对象，例如扩展L.CRS.Simple。

我正在开发一个 Angular Web 服务，用于创建照片旅程并使用 Leaflet 将它们显示在地图上。当我上传图片时，我从 EXIF 数据中获取它们的坐标，并从中获取DateTimeOriginal，它返回如下字符串：

然后将它们保存在数组中，以便进一步连接地图上的路径。

我在按时间戳对该数组进行排序以便正确连接地图上的标记时遇到问题：

如何按时间戳排序？