标签: leaflet

遵循高级组件工厂的官方参考来更新控制组件的道具

核心 API 导出可以以类似方式使用的其他高级组件工厂。

我模仿了这个例子 - 但我收到以下语法错误：

import L from "leaflet";
import "leaflet-routing-machine";
import { createControlComponent } from "@react-leaflet/core";
import 'leaflet-routing-machine/dist/leaflet-routing-machine.css'

function setWaypoints(props)
{
    return { 
        waypoints: [
        L.latLng(props.startLat, props.startLng),
        L.latLng(props.endLat, props.endLng)
        ],
        lineOptions: {
            styles: [{ color: "#0500EE", weight: 4 }]
        },
        show: false,
        addWaypoints: false,
        routeWhileDragging: true,
        draggableWaypoints: true,
        fitSelectedRoutes: true,
        showAlternatives: false,
        createMarker: function() { return null; },

    }
}


function createRoutingMachine(props, context) 
{
    const instance =  new L.Routing.control(setWaypoints(props))
    return 
    { 
        instance, context: { ...context, …

因此，我运行此代码来渲染传单，尝试在 colorMode 更改时替换 url 是这里的挑战。

useEffect 被触发，显示正确的变量，但我无法以任何方式更新该 TileLayer。

export const Map = () => {
    const { colorMode } = useColorMode();

    let state = { center: { lat: 51.505, lng: -0.09 }, zoom: 13 };

    const colorModeUrl = ['https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png']
    useEffect(() => {
      console.log(colorMode);
    }, [colorMode]);

    return (
        <MapContainer
            center={state.center}
            zoom={state.zoom}
            style={{ height: '100%' }}>
            <TileLayer url={colorMode === 'light' ? colorModeUrl[0] : colorModeUrl[1]} />
        </MapContainer>
    )
}

我正在尝试通过 vue-leaflet 渲染 OpenStreet 地图。但我面临渲染不完整的问题。地图没有以完整视图显示，而是部分加载而不是按顺序加载。

在此输入图像描述

这是我的代码

<template>
  <l-map
      v-show="loadingMap"
      :zoom="zoom"
      :center="center"
      :options="{ zoomControl: false }"
    >
      <l-tile-layer :url="url"></l-tile-layer>
    </l-map>
</template>

我在一些StackOverflow答案中发现，建议导入leaflet.css，并且我在main.js文件中添加了leaflet.css。（对于沙箱示例，它位于index.html中），但它仍然不起作用

如何完整地查看地图并使用实际的地图视图（不像现在那样部分加载）？

Codesandbox链接：https://codesandbox.io/s/silent-glade-1yqe8? file=/src/App.vue:31-212

在地理坐标之外，我想在城市地图上绘制简单的平原点并将输出保存为.png。我使用的是Linux Ubuntu 22.04LTS。对于第一部分，我找到了一个非常简短且直接的leaflet解决方案。

library(leaflet); library(htmlwidgets); library(webshot)

m <- leaflet() %>% 
  addTiles("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png") %>%
  setView(-.12, 51.50, zoom=13)
m$x$options <- append(m$x$options, list("zoomControl" = FALSE))
m <- m %>%
  addCircleMarkers(c(-.11, -.12, -.13), c(51.48, 51.52, 51.50),
                   radius=1, color="red")
m

但是，第二部分保存.png失败。我尝试过这个解决方案，

saveWidget(m, "temp.html", selfcontained=TRUE)
webshot("temp.html", file="Rplot.png", cliprect="viewport")

但是 - 使用phantomjs 2.1.1- 它给了我这些错误：

library(leaflet); library(htmlwidgets); library(webshot)

m <- leaflet() %>% 
  addTiles("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png") %>%
  setView(-.12, 51.50, zoom=13)
m$x$options <- append(m$x$options, list("zoomControl" = FALSE))
m <- m %>% …

我用 R 中的模拟数据制作了以下地图：

首先我加载了库：

library(leaflet)
library(leaflet.extras)
library(dplyr)

然后，我模拟了这个例子的随机数据：

myFun <- function(n = 5000) {
  a <- do.call(paste0, replicate(5, sample(LETTERS, n, TRUE), FALSE))
  paste0(a, sprintf("%04d", sample(9999, n, TRUE)), sample(LETTERS, n, TRUE))
}

Lat = abs(rnorm(1000, 42.2, 0.1))
Long = abs(rnorm(1000, -70, 0.1))
City = myFun(1000)

cities = data.frame(Lat, Long, City)

最后我做了一张地图：

# download icon from here: https://leafletjs.com/examples/custom-icons/leaf-green.png

leaflet(cities) %>%
    addProviderTiles(providers$OpenStreetMap) %>%
    addMarkers( clusterOptions = markerClusterOptions(), popup = ~paste("title: ", City)) %>%
                    addResetMapButton() %>%
                    # these markers will be "invisible" on the …

我是Mapbox API的新手，我正在尝试开发一些东西，其中从服务器返回geojson文件，并在地图上绘制要素。

我已成功在地图上绘制要素。我要做的是浏览所有记录，查看geojson列是否具有值，如果可以，则从服务器获取它，创建一个新层并将其绘制在该层上。

这些都是多边形。我需要做的是在单击一个多边形时触发一个事件，这就是为什么我使用单个图层的原因。这是代码：

<script type="text/javascript">
        L.mapbox.accessToken = 'someKey';
        var map = L.mapbox.map('map', 'someMap')
            .setView([-39.67, -69.26], 4);

        $(document).ready(function(){
            $('header h2').text('Equipment Map');

            $.getJSON('distributor-companies', function (data) {
                var layers = [];
                $.each(data, function(i, item) {
                    if(item.geojson != ''){
                        var file = item.geojson;
                        layers[i] = L.mapbox.featureLayer().addTo(map);
                        $.getJSON('/geojson/' + file, function(data){
                            console.log('layer' + i);
                            layers[i].setGeoJSON(data);
                        });
                    }
                });
                $.each(layers, function(i, item){
                    console.log(item);
                    // item.on('click', function(e){
                    //  alert('hello');
                    // });
                });

                layers[32].on('click', function(e){
                    alert('hello');
                });
                layers[31].on('click', function(e){
                    alert('hello hi');
                });
            });
        });
    </script>

现在，我从分销商－公司路线中获取所有数据，并每次创建一个新层并为每条记录绘制数据。所以最后我剩下很多多边形。

最后，我尝试在运行良好的各个层上分别注册一个click事件侦听器。但是在我试图遍历该层之前的代码不起作用。console.log函数将所有图层显示为对象，但是当我尝试在该项目上注册on …

我试图在我的传单地图上放置一个引导导航栏.当我点击缩放控制按钮时,我的导航栏消失了,我不明白为什么.

这是传单小虫吗？

  <body>
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <a href="../" class="navbar-brand">Test Leaflet Navbar</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse">
    </nav>
  </div>
</header>

    <div style="height: 100%">
          <div id="map"></div>
    </div>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" data-require="leaflet@0.7.3" data-semver="0.7.3"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>

这是一个显示问题的插件:http://plnkr.co/edit/C8O6bB？p = preview

请注意,当您第一次加载页面时,一切看起来都不错.但是单击缩放控制按钮会使导航栏消失.

我有一个关于传单中地图点击的问题.如果我点击地图我想在那里设置一个标记,但如果双击地图我只想放大而不设置标记.所以我有以下代码:

var map = L.map(attrs.id, {
            center: [scope.lat, scope.lng],
            zoom: 14
        });
var marker = L.marker([scope.lat, scope.lng],{draggable: true});
map.on('click', function(event){
            marker.setLatLng(event.latlng);
            marker.addTo(map);                
        });

现在的问题是,当我在地图上双击时,也会触发click事件,我想删除该行为.我怎样才能做到这一点？

谢谢玛格达

我正在寻找一个解决方案,以适应传单地图的边界,以显示加载的geoJSON文件的内容.

为了加载文件,我使用leaflet-ajax.我已经尝试了这个,但我不知道如何获得图层的界限.任何建议我如何调整显示的地图部门以显示geoJSON文件？谢谢.

var geojsonLayer = new L.GeoJSON.AJAX('http://localhost:8080/test.geojson');
geojsonLayer.addTo(this.map);
this.map.fitBounds(geojsonLayer.getBounds());

我希望Leaflets 图层控件功能使用的图层名称来自变量而不是字符串,并且基于图层中的数据.

下面显示的示例使用变量layerName.这是否可能,因为它期待一个名称值对？有工作吗？

var layerName = feature.properties.condition[0];

//layer control
var baseMaps = {
    "OpenStreetMap": OSM,
    "Aerial Imagery": MapQuestOpen_Aerial
};

var overlayMaps = {
    layerName: layer1,

};

L.control.layers(baseMaps, overlayMaps).addTo(map);