标签: leaflet

我正在使用 ngx-leaflet。默认情况下，地图在左上角显示缩放控件。但是我找不到如何改变它的定位。

这是一个过时的方法：

options = {
  layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
  zoom: 5,
  zoomControl: false,
  center: L.latLng(46.879966, -121.726909)
};

mapReady(map: L.Map) {
  map.addControl(L.control.zoom({ position: 'bottomright' }));
}

。

<div class="leaflet-container grow z-0" leaflet [leafletZoom]="leafletZoom" [leafletCenter]="leafletCenter" (leafletMapReady)="($event)">
    <div [leafletLayer]="tileLayer"></div>
    <div *ngFor="let marker of markerLayers " [leafletLayer]="marker"></div>
  </div>

来源

是否有更新的方法可以使用最新版本的 ngx-leaflet (3.0) 来执行此操作？

这是一个屏幕截图，显示控制对象上没有缩放方法：

我正在尝试通过此链接重现传单包上 Rstudio 示例的结果。它一直工作到第 5 节。当我尝试使用具有完全相同设置的 AddMarkers 命令时：

##### Location Names
Location <- c("Atlanta ","Los Angeles","Chicago","New York","Dallas","Baltimore","Phoenix","Charlotte","Houston","San Antonio", "Seattle" )

#### Latitude and Longitude values for each of the above location
Lat <- c(33.74401,33.82377,41.78798,40.767309,32.88153,39.148492,33.45444,35.2406,29.935842,29.44838,47.714965 )
Lon <- c(-84.56032,-118.2668,-87.7738,-73.978308,-96.64601,-76.796211,-112.32401,-81.04028,-95.398436,-98.39908,-122.127166 )

#### Some hypothetical number of orders shipped out of each location
Orders <- c(1992,2500,3600,2252,3650,3450,4145,3945,5050,4300,1987)

#### Let us create some hypothetical class flags for the cities
Type <- c(rep("Yoda",5),rep("Vader",6))
### Create data set from the above vectors
df <- data.frame(Location, Lat,Lon,Orders,Type)

mymap …

当我单击某个 HTML 元素时，我使用Leaflet JavaScript API创建一个弹出窗口。问题是弹出窗口不会显示在我的地图上。我不确定我的代码有什么问题。

以下是 json 文件中的功能示例。请注意，为了方便起见，我将整个 json 对象指定为 a var dataset。

var dataset = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stemburo": "Sporthal Nieuwland",
        "aantal_stemmen": 3753,
        "lat": 52.2006665,
        "lng": 5.3758691,
        "Actief": 34,
        "Amersfoort 2014": 348,
        "Blanco lijst Chel": 5,
        "Burger Partij Amersfoort": 258,
        "Christen Democratisch App\u00e9l": 556,
        "ChristenUnie": 350,
        "DENK": 117,
        "Democraten 66": 525,
        "GroenLinks": 345,
        "Partij van de Arbeid": 239,
        "Socialistische Partij": 189,
        "Staatkundig Gereformeerde Partij": 42,
        "Volkspartij voor Vrijheid en …

我正在使用 Leaflet 制作美国地图，并且具有单击功能来放大和更改州的颜色。这有效，但当单击另一个状态时，我无法让颜色返回到以前的颜色。目前，每次我单击某个状态时，颜色都会发生变化，并且不会删除之前的颜色变化。

这是我的代码：

var map = L.map('map').setView([37.8, -96], 4);

L.tileLayer('https://api.tiles.mapbox.com/v4/{z}/{x}/{y}.png?access_token=...', {
    maxZoom: 8,
    minZoom: 4,
    attribution: ' ',
    id: 'mapbox.light',
    attribution: '<a target="_blank" href="https://www.mapbox.com/">Mapbox</a>'
}).addTo(map);

    // get color depending on population density value
    function getColor(d) {
        return d < 1 ? '#173e34' : //green
                       '#e1cb7f'; //yellow

    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 1.9,
            fillColor: getColor(feature.properties.availability)
        };
    }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 1,
            color: '#fff',
            dashArray: …

有没有其他方法可以在运行时更改 ngx-leaflet 地图坐标？这可以通过谷歌地图实现，我正在尝试对传单做同样的事情。

最初设置后，对 leafletOptions 的更改将被忽略。这是因为这些选项被传递到地图构造函数中，因此无论如何都无法更改它们。因此，在创建地图之前请确保该对象存在。您需要在 ngOnInit 中创建对象或使用 *ngIf 隐藏地图 DOM 元素，直到您可以创建选项对象。

成分：

  private   options = {
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© OpenStreetMap contributors'
        })
      ],
      zoom: 7,
      center: latLng([ 46.879966, -121.726909 ])
    };

html:

<div style="height: 500px;"
    leaflet
     [leafletOptions]="(options)"
     ></div>

我正在使用 React-leaflet 渲染包含点和线串的 geojson 要素集合：

我能够让实际功能本身的单击和悬停事件正常工作。但我希望能够将鼠标悬停在列表项（与地图上的项目相关）上并打开弹出窗口。我一直在整理文档、github，并尝试不同的东西。但似乎没有办法做到这一点。或者我必须手动渲染我的线串和点，而不是使用<GeoJSON data=

我的地图与点击事件配合得很好：

return (
        <Map
            style={{
                height: '100%',
                width: '100%',
                margin: '0 auto'
            }}
            ref={(el) => {
                this.leafletMap = el;
            }}
            center={position}
            zoom={10}>
            <TileLayer url='https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYWJlbnMwefwefEiOiJjajJ1bDRtMzcwMDssmMzJydHdvcjF6ODA5In0.xdZi4pmkhj1zb9Krr64CXw' attribution='&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>' />
            <GeoJSON data={locations} onEachFeature={this.onEachFeature} />{' '}
        </Map>
    );

onEachFeature 正常工作

onEachFeature = (feature, layer) => {
        console.log('onEachFeature fired: ');
        layer.on({
            mouseover: (e) => this.MouseOverFeature(e, feature),
            mouseout: (e) => this.MouseOutFeature(e, feature)

        });
    };

但我不知道如何在不使用的情况下调用layer.bindPopup onEachFeature。一项更改如何使用 prop 值调用这些方法？我想让人们将鼠标悬停在列表项上并让它切换弹出窗口。

加载地图后，图钉和标记簇图标均可见。只有在缩放到最大之后，所有销钉才会断开，并且簇在缩小时开始按预期工作。

我做错了什么会导致这个问题？

当前设置：

const markerCluster = Leaflet.markerClusterGroup({showCoverageOnHover: false})

//within a loop the markers are created:

() => {
  const pinBackground = item.current ? '#db2828' : '#3dcc4a'
  const interior = item.pin.icon_url
    ? `<img style="background: ${item.pin.color_code}" src=${item.pin.icon_url}>`
    : `<div class="mapPanelAbbreviation" style="background: ${item.pin.color_code}">${item.pin.abbreviation}</div>`
  const pinLayout = `<div class="mapPanelIconContainer" style="background:${pinBackground}">
      ${interior}
    </div>`

  let marker = Leaflet.marker(coord, {icon: Leaflet.divIcon({html: pinLayout})})
    .bindPopup(`<p class='pinText'>${item.taskId}</p><p class='pinDetails'>${item.title}</p>`)
    .addTo(this.currentMap)
    .addTo(this.markerGroup)

  markerCluster.addLayer(marker)
}

//then the markerCluster is added to the map

this.currentMap.addLayer(markerCluster)

当地图加载时，我看到创建的图钉（应包含在标记集群中）和显示图钉计数的集群图标：

第一次缩放后：

一如既往，我们非常感谢任何指导和帮助，所以提前致谢！

所以我的目标是能够从 OSM 中提取给定的路径以显示在 Leaflet 地图上。但是，当我尝试拉取给定的 Way 时，响应中的节点似乎没有正确排序。

import axios from 'axios'
import xml2js from 'xml2js'

let parser = new xml2js.Parser()

export default {
  async getStpPolygon () {
    let xml = await axios.get('https://www.openstreetmap.org/api/0.6/way/39394541/full')

    return parseNodes(xml)
  },

  async getMplsPolygon () {
    let xml = await axios.get('https://www.openstreetmap.org/api/0.6/way/93481561/full')

    return parseNodes(xml)
  }
}

async function parseNodes (xml) {
  return new Promise((resolve, reject) => {
    parser.parseString(xml.data, (err, data) => {
      if (err) reject(err)

      let output = data.osm.node.map((node) => {
        return [
          parseFloat(node.$.lat),
          parseFloat(node.$.lon)
        ]
      })

      resolve(output) …

为了可视化一些地理数据，我们设置了一个运行传单的小型网络服务器。一切正常，标记和多边形按预期显示。现在我们还想在地图上以 RGB 形式显示大型光栅文件（存储为 GeoTiff）。我们可以完全控制 tif 文件，我们自己托管它们，并且可以按照我们想要的任何方式存储/处理它们。尽管如此，由于它们的尺寸可能相当大（高达 30.000x20.000 像素，三个波段），我们想知道做到这一点的最佳方法是什么。

我们研究的选项：

1. 只需使用此插件显示它们，可能会因为大小而失败
2. 将它们存储为云优化的 GeoTIFF：我不清楚传单是否支持此功能
3. 使用gdal2tiles.py 的修改版本
4. 设置一个“常规”平铺服务器（尚未弄清楚如何做到这一点）

就目前而言，我们只对可视化感兴趣，尽管如果我们能够提取特定位置的像素值，那将是一个很好的奖励。如今这是如何做到的？

编辑：如果这很重要，那么图像只覆盖小区域，我们只想一次显示一个区域，所以我们不是在构建地图或其他东西，我们想将它们绘制在底图之上

我对 React 和传单非常陌生。我正在尝试使用传单绘制 React 地图上的对象中可用的一组纬度和经度。任何有关如何完成此操作的指示都会有所帮助。

我已经浏览了https://react-leaflet.js.org上的 React leaflet 教程。但我无法继续。任何帮助是极大的赞赏。提前致谢。

我拥有的对象数据数组的示例：

data=[
  {
    from_lat: "12.92415",
    from_long: "77.67229",
    id: "132512",
    to_lat: "12.92732",
    to_long: "77.63575",
  },
  {
    from_lat: "12.96691",
    from_long: "77.74935",
    id: "132513",
    to_lat: "12.92768",
    to_long: "77.62664",
  }
]