标签: leaflet

查看 L.Polygon 构造函数的文档，看起来您可以在初始数组之后传入多个坐标数组来构造一个 Polygon，其中有多个孔。

我尝试了一些带有多个数组的小数据样本，并且在添加第一个之后这些孔被阴影化了。但是当添加一个时，它工作正常。

来自 MSSQL，使用 geometry::STIsValid 函数将形状报告为有效。

是我的数据不正确，还是当时不支持？文档表明它是受支持的。我在 stackoverflow 或一般互联网上找到的每个示例都只显示单个漏洞。

这也适用于 L.Polygon 函数（不是 GeoJSON）。

我刚接触地图，我已经开始按照http://leafletjs.com上的文档和教程创建我的地图。到目前为止一切顺利，我已经设法创建了一张地图，从 geojson.io 添加了大量 geosjon 数据，在弹出窗口中显示“popupContent”。它有效。

但我无法理解如何创建几个图层来对所有这些标记进行排序。我想要的是太使用“属性”来做到这一点。我有名为“status”的属性，其值为“done”、“new”和“active”。

像这样：

"type": "Feature",
  "properties": {
    "popupContent": "content",
    "marker-color": "#FFFFFF",
    "title": "title of project",
    "status": "active

那可能吗？根据“状态”属性创建 3 个图层？

如果您需要查看 html 文件，请说出来，我可以添加它。

谢谢

我正在尝试创建一个 Leaflet 地图作为 Vue 组件，但我有一些困难的开始。我通过 npm 安装了 Leaflet

我哪里错了？console.log(Leaflet) 正在返回一个 Leaflet 对象，但我无法让地图展开和渲染。

一些方向将不胜感激

<template>
    <div id="map"></div>
</template>

<script>
    // import leaflet here?
    import Leaflet from 'leaflet';

    export default {
        components: {
            Leaflet
        },

        created() {
            console.log(this);
            console.log(Leaflet);
        },

        ready() {
            this.map = L.map('map').setView([51.959, -8.623], 14);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(this.map);
        }
    }
</script>

<style>
    #map {
        height: 100%;
        width: 100%;
        margin-top: -24px;
    }

    /* default legend, layer styling from leaflet template */
    .info {
        padding: 6px 8px; …

我想在 . 此选项也应可切换为开/关。

一种选择是定义一个 css 框，该框将显示在光标旁边的地图顶部（该框仅在打开切换时可见）。该框需要显示当前的纬度/经度以及随光标移动。

不知道如何在实践中做到这一点，对此的任何帮助将不胜感激。

我正在使用 react-leaflet 来显示非地理地图。我还添加了一些用于缩放更改的事件。( onZoomEnd())

我想知道如何访问地图对象或地图组件并获取当前缩放级别。还是其他地图道具？

  <Map
                center={this.getCalculatedCenterFromState()}
                zoom={this.getCalculatedZoomFromState()}
                minZoom={this.getCalculatedMinZoomFromState()}
                maxZoom={2}
                onZoomEnd={this.mapService.handleZoomstart(/* map.object */)}


               >
</Map

我需要在处理程序方法中访问地图对象

handleZoomstart = (map) => {
        // TODO handle move event
    };

我有一个circleMarker我想显示在所有其他标记之上。该标记的文档列表的选项zIndexOffset，但是circleMarker没有这个属性。

circleMarker 确实pane从继承了选项layer，所以我想我可以将标记窗格设置为 ，overlayPane但这已经是默认值。（见文档）

我可以更改 z-index，overlayPane但所有其他使用它的要素图层将共享相同的 z-index。

有没有一种简单的方法可以circleMarker在其他标记/图层上显示 a ？

我目前正在使用传单来显示数据，总的来说，效果很好，但我们的 PM 希望地图背景为白色而不是灰色。现在，整个地图的背景都是灰色的，我检查了文档，根本找不到有关如何使背景变白的解决方案。非常感谢您的建议。

我看到这是由 tileLayer 引起的，

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + this.props.mapBoxToken, {
            //attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.light'
        })
        .addTo(this.map);

在这里，如果我删除了 tileLayer，则可以看到背景颜色。我在谷歌上搜索了很多如何更改 tilelayer 颜色，但找不到解决方案，希望听到您的建议。

我正在使用传单地图制作一个 Web 应用程序，我希望用户能够按照他们的意愿放置和删除标记，但我无法找到一种方法来做到这一点。

标记坐标存储在数据库中，当我加载页面时，我使用坐标（GET 请求）将它们放在地图上。现在我试图找到一种方法，当用户按下位于标记传单 bindPopup 中的按钮时删除标记。

$.ajax({
      //GET REQUEST
    })
    .done(function( data ) {
      for (i=0 ; i < data.length ; i++) { 

        // ......

        var mp = new L.Marker([marker["lat"], marker["lng"]],{draggable:'true'});
        mp.addTo(mymap);
        mp.bindPopup('<button type="button" onclick="">Delete Marker</button>',{maxWidth: "auto"}).openPopup(); //Here i want to add a function that deletes a specific marker 
        markers.addLayer(mp);

我遇到的主要问题是，当我将代码放在按钮的 onclick 部分以删除标记时，它不接受环境变量，因此不接受标记，因此我什至无法在没有 id 的情况下发送 DELETE 请求。

目前我有这张leaflet.js地图

<div id="myMap" style="width: 100%; height:300px;"></div>

<script>
// This setup the leafmap object by linking the map() method to the map id (in <div> html element)
var map = L.map('myMap', {
center: [14.599512, 120.984222],
zoom: 13,
// minZoom: 1.5,
//  maxZoom: 1.5
});

// Start adding controls as follow... L.controlName().addTo(map);

// Control 1: This add the OpenStreetMap background tile
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


// Control 2: This add a scale to the map
L.control.scale().addTo(map); …

我正在尝试结合传单找到进入 Svelte 的方法。我遇到的问题是如何正确地将传单组件拆分为文件。为了学习，我正在尝试使用 svelte构建官方官方传单快速入门。

这是我的 app.svelte 的样子：

<script>
  import L from 'leaflet';
  import { onMount } from "svelte";
  import { Circle } from "./components/Circle.svelte";

  let map;

  onMount(async () => {
    map = L.map("map");

    L.tileLayer("https://a.tile.openstreetmap.org/{z}/{x}/{y}.png ", {
      attribution:
        'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
      maxZoom: 18,
        tileSize: 512,
        zoomOffset: -1
    }).addTo(map);

    map.setView([51.505, -0.09], 13);
    Circle.addTo(map);

  });
</script>

<style>
    html,body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100vw;
    }
</style>

<svelte:head>
    <link …