标签: leaflet

我在地图上显示一些文字，我通过这个例子做到了这一点

旋转 Lealfet 标记工具提示文本

如果缩小，我需要看到较小的文本，而当我放大时，文本应该更大。

mymap.on('zoomend', function () {
    var zoomLevel = mymap.getZoom();
    var tooltip = $('.leaflet-tooltip');

    switch (zoomLevel) {
        case -2:
            tooltip.css('font-size', 7);
            break;
        case -1:
            tooltip.css('font-size', 10);
            break;
        case 0:
            tooltip.css('font-size', 12);
            break;
        case 1:
            tooltip.css('font-size', 14);
            break;
        case 2:
            tooltip.css('font-size', 16);
            break;
        case 3:
            tooltip.css('font-size', 18);
            break;
        default:
            tooltip.css('font-size', 14);
    }
}

我想这不是书本上的解决方案，我想寻求一种更好的方法来动态更改字体大小，以在放大或缩小时遵循地图大小。

sf我正在尝试使用和在 R 中显示（断开连接的）线串的简单特征集合leaflet。数据是从 openstreetmap 获取的osmdata。

使用基本的plot()函数，tmap， 或mapview，我可以直接在静态和交互式地图上显示线串。但是，这在使用时不起作用leaflet。Leaflet 正确地将地图居中，但不显示线串。在 addPolyLines() 中摆弄颜色、重量等参数似乎没有帮助。

雷普莱克斯

library(osmdata)\nlibrary(leaflet)\nlibrary(sf)\nlibrary(tmap)\n\nosm <- opq(bbox = c(-0.27, 51.47, -0.20, 51.50)) %>%\n  add_osm_feature(key = \'name\', value = "Thames", value_exact = FALSE) %>%\n  osmdata_sf()\n\nosm$osm_lines\n\nSimple feature collection with 2085 features and 178 fields\ngeometry type:  LINESTRING\ndimension:      XY\nbbox:           xmin: -2.029917 ymin: 51.37841 xmax: 0.6778926 ymax: 51.79032\nepsg (SRID):    4326\nproj4string:    +proj=longlat +datum=WGS84 +no_defs\nFirst 10 features:\n...\n\nplot(osm$osm_lines, max.plot = 1) # OK\nqtm(osm$osm_lines) + tm_lines() # OK\nmapview(osm$osm_lines) …

我有以下代码（如下），到目前为止我看到的是白页，控制台上没有任何错误。我想用标记渲染地图。我是 Vue 的初学者，也许你可以帮助我。我关注了一些有关传单的页面，并且类似的代码有效。

应用程序.vue

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

<script>
import Map from './components/Map.vue'

export default {
  name: 'app',
  components: {
    Map
  }
}
</script>

地图.vue

<template>
    <div id="map">
        <v-map :zoom="zoom" :center="center">
            <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
            <v-marker :lat-lng="marker"></v-marker>
            <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng" @l-add="$event.target.openPopup()">
                <v-popup :content="item.content"></v-popup>
            </v-marker>
        </v-map>
    </div>
</template>

<script>
import Vue2Leaflet from 'vue2-leaflet';
import L from 'leaflet';  

  export default {
    name: 'map',
    components: {
        'v-map': Vue2Leaflet.Map,
        'v-tilelayer' :Vue2Leaflet.TileLayer,
        'v-marker': Vue2Leaflet.Marker,
        L
    },
    data() {
        return {
            zoom: 13,
            center: …

我有一张地图，其功能集可在用户首选项中更改地图图块，以下函数负责在用户需要时动态更改地图图块。

• 实际问题

当我更改地图图块时，例如实时从 CartoDB 更改为 OSM，在规划地图视口时，您可以看到 CartoDB 中的旧图块。

证据/视频 https://i.gyazo.com/702e8e4875bc89c13f41a132dccb78da.mp4

我应该提到的另一件事是，我正在使用“leaflet-providers”插件，用于将图块添加到地图的简单 API。

我确实在 github 存储库上提出了关于我的经验的问题，但该问题已关闭，并且作者提到这确实是一个传单问题，所以我来这里寻求一些 leaflet.js 的建议:)

我已经知道如何删除图块层，所以我需要一些更具体的内容，并且与我的代码相关，这是我尝试过的。

//this

self.map.removeLayer(L.tileLayer.provider('OpenStreetMap'))

//this?
//self.map.invalidateSize();

//this??
self.map.invalidateSize();

let self = this;
let mapLayer = self.mapLayer;

if (mapLayer === 'osm') {
    L.tileLayer.provider('OpenStreetMap').addTo(self.map);
}
if (mapLayer === 'cartodb') {
    L.tileLayer.provider('CartoDB').addTo(self.map);
}

//attempt to refresh tiles?
self.map._onResize();
self.map.invalidateSize();

你好（这里是测图新手！）

我已经进行了很好的搜索，但找不到解决这个似乎很棘手的问题的方法。

我有基本的 XY（坐标）数据：

我想要做的是根据不重叠且具有一定大小限制的坐标数据创建相邻的多边形（因此它们不会永远延伸到海洋中）。

请原谅我糟糕的 MS Paint 技能，但期望的结果是这样的：

我有一个标记陆地/海洋界面的多边形，因此多边形也不能重叠。

我正在使用 Leaflet 使这些地图具有交互性，它不是为了进行任何统计分析，而是为了提供概述。

最终目标是让每个多边形都由变量（例如温度）着色，并覆盖生态数据。

一些示例数据：

    > data[1:10,]
   Station  Lat_dec  Long_dec Surface_T
1      247 50.33445 -2.240283     15.19
2      245 50.58483 -2.535217     14.11
3      239 50.16883 -2.509250     15.41
4      225 50.32848 -2.765967     15.34
5      229 50.63900 -2.964800     14.09
6      227 50.33757 -3.303217     15.12
7      217 50.16657 -3.563817     15.13
8      207 49.66683 -3.556550     15.04
9      213 50.16512 -3.824667     14.97
10     219 49.83707 -3.815483     14.78

生成图 1 的代码是一个基本的传单脚本：

leaflet() %>% 
  addProviderTiles('Esri.OceanBasemap'
  ) %>% 
  addCircleMarkers(data …

请注意，我正在为 Angular 使用 @asymmetrik/ngx-leaflet-draw 。我正在配置一个地图，用户可以在其中绘制矩形或多边形。然后我将它们保存到基于 onDrawCreated 事件的 LayerGroup 中，这工作得很好。

我还打算根据 onDrawDeleted 事件删除图层，但由于某种原因，这不起作用。我最终在应用程序中做的是保存数据并将其转换为 GeoJSON。然后将其显示在控制台中以进行故障排除。

组件 HTML：

<button (click)="checked = !checked">Edit Mode</button>
<button (click)="onSave()">Save</button>
<div id="image-map" 
leaflet 
[leafletOptions]="options" 
[leafletLayersControl]="layersControl"
    (leafletMapReady)="onMapReady($event)">
    <div *ngIf="checked" 
    leafletDraw 
    [leafletDrawOptions]="drawOptions" 
    (leafletDrawCreated)="onDrawCreated($event)" 
    (leafletDrawDeleted)="onDrawDeleted($event)">
    </div>
</div>

部分地图和传单绘制组件：

  zones = L.featureGroup();

  onDrawCreated(e: any) {
    this.zones.addLayer(e.layer);
    console.log('Draw Created Event!', e);
    console.log(this.zones.getLayers());
  }

  onDrawDeleted(e: any) {
    this.zones.removeLayer(e);
    console.log('Draw Deleted Event!', e);
    console.log(this.zones.getLayers());
  }

  onSave() {
    const data = this.zones.toGeoJSON();
    console.log(data);
  }

根据文档和其他类似问题，上述代码应该可以工作。但我想我错过了一些简单的事情。

我想问当我们有国家及其地区的点和多边形的经度和纬度变量时，如何计算某个地区的点数。

我在下面提供了示例：我想计算哪些区域中有多少个点（当没有点时包括零），然后将此变量添加到data2@data对象，以便可以使用计数度量来填充每个区域的多边形。

library(leaflet)
library(tidyverse)
set.seed(101)

URL2 <- "https://biogeo.ucdavis.edu/data/gadm3.6/Rsp/gadm36_FRA_2_sp.rds"
data2 <- readRDS(url(URL2))


URL3 <- "https://biogeo.ucdavis.edu/data/gadm3.6/Rsp/gadm36_ESP_2_sp.rds"
data3 <- readRDS(url(URL3))

URL4 <- "https://biogeo.ucdavis.edu/data/gadm3.6/Rsp/gadm36_PRT_2_sp.rds"
data4 <- readRDS(url(URL4))

URL5 <- "https://biogeo.ucdavis.edu/data/gadm3.6/Rsp/gadm36_GBR_2_sp.rds"
data5 <- readRDS(url(URL5))

random_long_lat <- 
  data.frame(
    long = sample(runif(300, min = -2.5, max = 15.99), replace = F),
    lat = sample(runif(300, min = 42.69, max = 59.75), replace = F)
  )

all <- rbind(data2, data3, data4, data5)

leaflet() %>% 
  addProviderTiles("CartoDB.Positron") %>% 
  addPolygons(data=all, stroke = TRUE, color = "black", weight="", smoothFactor …

我正在尝试加快自定义游戏地图的图块加载时间：www.nwnevilparty.com，我只是碰巧有另一个域什么都不做www.evilpartynwn.com，我想用它来帮助加载图块。目前我的主机不允许子域，所以我只能这样做。

这是我研究的地方：https ://leafletjs.com/reference-1.6.0.html#tilelayer

我尝试过的：

// Original line
main = L.tileLayer('maps/barovia/{z}/{x}/{y}.png', {noWrap: true, bounds: new L.LatLngBounds(southWest, northEast),}).addTo(map);

// Modified line -- Why only nwnevilparty.com gets used for tiles?
main = L.tileLayer('http://{server}/maps/barovia/{z}/{x}/{y}.png', {server: 'nwnevilparty.com' || 'evilpartynwn.com'}, {noWrap: true, bounds: new L.LatLngBounds(southWest, northEast),}).addTo(map);

我做错了什么以及为什么我的例子不起作用？

我有传单，展示了带有功能的背景 WMS 地图。当我单击一组功能时，我实现了一个可移动的功能信息框，该框将进入视图，并且基于存储在功能中的数据的 dom 。请参阅屏幕截图。

按照目前的情况，我无法在此列表中滚动，但使用滚轮时，其后面的地图仍然会放大和缩小。我最初的想法是，一个简单的 Javascript 事件监听器，利用 js 事件冒泡，可以解决这个问题。下面我展示了 DOM 结构：

    <div id="FeatureInfoMaster" data-tap-disabled="true" style="left: 136px; top: 648px;">
       <span class="map-featureinfo-featureInfoClose" onclick="$map.featureinfo.ToggleFeatureInfoDiv();">X</span>
       <div id="divFeatureContainer" class="map-featureinfo-container">
          <div id="divFeatureMasterDetail" class="map-featureinfo-masterdetail">
             <div id="divMasterView" class="map-featureinfo-master not-this">
                <div class="map-featureinfo-multiple-detail-wrapper">
                   <div id="divFeatureInfoDetailHeader" class="map-featureinfo-detail-header"> Der blev fundet 790 features </div>
                </div>
                <div class="map-featureinfo-multiple-features-detail-wrapper">
                   <!-- ngRepeat: feature in nfc.Features -->
                   <div ng-repeat="feature in nfc.Features" ng-click="nfc.selectFeature(feature);" class="ng-scope">
                      <div class="map-featureinfo-master-title ng-binding">F</div>
                   </div>
                   <!-- end ngRepeat: feature in nfc.Features -->
                   <div ng-repeat="feature in nfc.Features" ng-click="nfc.selectFeature(feature);" class="ng-scope">
                      <div class="map-featureinfo-master-title ng-binding">F</div>
                   </div>
                   <!-- …

我正在使用 Vue2-Leaflet 的 L.CRS.Simple 开发地图应用程序，并且我想反转地图的 y 轴，如Leaflet 文档中所述。我在这里发现了一个类似的问题，看来我的问题是相同的，所以我的问题是：如何集成反转 y 轴但使用 vue2-leaflet 包的相同解决方案？

这是我的代码：

<template>
<body>
  <div>
    <li v-for="(message, index) in messageList" :item="message" :key="index">
      {{ message }}
    </li>
  </div>
  <l-map class="map" ref="map" :min-zoom="minZoom" :crs="crs">
    <l-tile-layer :url="url"></l-tile-layer>
    <!-- <l-image-overlay :url="url" :bounds="bounds" /> -->
    <l-grid-layer class="grid" :tile-component="tileComponent"></l-grid-layer>
    <l-marker v-for="star in stars" :key="star.id" :lat-lng="star">
      <l-icon
        :icon-size="[25, 25]"
        icon-url="https://image.flaticon.com/icons/png/512/304/304378.png"
      ></l-icon>
      <!-- <l-icon :icon-size="[32, 37]" icon-url="/images/star.png"></l-icon> -->
      <l-popup class="popup">
        <em class="popup-bold">Name: </em>{{ star.name }}<br>
        <em class="popup-bold">Longitud: </em>{{ star.lng }}<br>
        <em class="popup-bold">Latitud: …