标签: leaflet

我正在使用传单，我有一些标记。如果我将鼠标悬停在标记图标上，它的工具提示会自动打开，显示相关数据。我将我的标记存储在一个名为的变量中woMarkers，除此功能外，一切都可以使用它。如果我做这样的事情：

$(woMarkers[0]._icon).hover();

然后什么也没有发生，没有错误，工具提示也不会打开。这些是我正在使用的选项：

        var woOptions = {
            fitBounds: true,
            enableLandmarkLink: false,
            reDrawBounds: true,
            showControls: true,
            getName: function(record) {
                return record[('Job Number' in record ? 'Job Number' : 'Name')];
            },
            markerIconTemplate: '<div class="fi-marker-container %6" data-workorder="%3"><a class="icon" style="color: %4;">%1%2</a></div><div class="fi-marker-pointer-container"><div class="fi-marker-pointer %6"></div></div>',
            markerSelection: true,
            displayLabels: mapLabels,
            additionalMarkerMarkup: {
                column: 'Status', /* Display additional Marker html pending on a column value */
                values: {
                    '1': '<img class="top-right-icon" src="/Images/Icons/Help.png" />',
                    '2': '<img class="top-right-icon" src="/Images/Icons/CheckCircle.png" />',
                    '3': '<img class="top-right-icon" src="/Images/Icons/CheckCircle.png" />',
                    '4': '<img …

我正在制作有光泽的传单。这些工具是基本的，我有一张带有一些标记的地图（来自带有 LONG 和 LAT 的表格）。

我想要做的是在单击标记时打开表格或图形。

有没有简单的方法来做到这一点？

你有一个非常简单的例子：你在地图上有一个制造商，你点击标记，然后有一个情节或表格或 jpeg 正在打开？

当我尝试使用Leaflet.Draw 插件绘制多段线时遇到问题。

首先，我点击地图绘制第一个点，然后第二次点击完成线。

但是，在我第二次单击该行后，该行不会自行完成。它显示了该行的扩展。

当我双击它时，该行完成，否则我需要手动单击完成按钮。我想在第二次点击地图时完成那条线。

这是我绘制折线的代码：

var drawControl = new L.Control.Draw({
                    position: 'topleft',
                    draw: {                            
                        polygon: {
                            allowIntersection: true,
                            showArea: true,
                            drawError: {
                                color: '#b00b00',
                                timeout: 1000
                            },
                            shapeOptions: {
                                color: '#0033ff'
                            }
                        },
                        circle: {
                            shapeOptions: {
                                color: '#0033ff'
                            }
                        },
                        polyline: {
                            shapeOptions: {
                                color: 'red'
                            },
                        },
                        rectangle: {
                            shapeOptions: {
                                color: '#0033ff'
                            }
                        },
                        marker: false,
                        polyline: true,
                    },
                    edit: {
                        featureGroup: drawnItems,
                        remove: true
                    }
                });

我想使用条件面板在绝对面板中创建一个图，该图仅在我在底图上单击鼠标时出现。这没有问题，我已经做到了。

但是我希望一旦用户划掉该点弹出窗口，该情节就会清除，并且 conditionalPanel 再次折叠。目前，当执行另一次单击时，绘图会更改并重新绘制数据，但我希望将弹出窗口的清除与条件面板的折叠相关联；

这个非常简单的例子显示了点击时创建条件面板（完整版本创建一个点并读取光栅堆栈以绘制时间线）：

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width="100%", height="100%"),
  absolutePanel(class = "panel panel-default", fixed = TRUE,draggable = TRUE,
                top = 20, left = 60,

                conditionalPanel("input.map_click",
                   h4(textOutput("Click_text")),
                top=20, left=60, height=400, width=200,
                style="padding-left: 10px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px")
  )
)


server <- function(input, output, session) {

  output$map <- renderLeaflet({
    leaflet() %>%
      setView(-4,52.5,9) %>%
      addProviderTiles(providers$CartoDB.Positron)  
  })

  observeEvent(input$map_click, {
    click <- input$map_click
    text<-paste("Lattitude ", click$lat, "Longtitude ", click$lng)
    text2 <- paste("YOUVE CLICKED THE MAP!!!",click$lat, …

我确实有两个图层组，用户可以在图层控制面板中切换。到目前为止，这工作正常。

如何找出当前选择的叠加层（0 == a 或 1 == b）？我调用每两分钟绘制一个图层组的函数 (window.setTimeout("myFunction()", 120 * 1000);)，并希望确保仅“重绘”选定的图层组。

这是我将两个叠加层的控件添加到地图的方式：

var a = new L.LayerGroup();
var b = new L.LayerGroup();

var overlays = {
        "Option A": a,
        "Option B": b
    };

L.control.layers(overlays).addTo(map);

假设您有一个 Leaflet 地图，带有一组自定义标记，每个标记都有一个唯一的 id 值：

var marker = new L.marker(latlong, {id: id, icon: icon}).addTo(map);

通过“id”值访问标记的推荐方法是什么（特别是，我想修改标记的类）？

我在我的 Rails 应用程序中使用 Leafletjs，添加标记并使用图层组和叠加作为“类别”。我寻找了有关如何根据可见（“已检查”）叠加层绑定/自动放大和缩小的示例和想法，但找不到太多。

目前，我正在使用一个标记数组来存储所有地图标记并使用标记数组来绑定地图：

var group = L.featureGroup(markers); 
map.fitBounds(group.getBounds());

但我不确定如何根据地图上的可见叠加标记动态更新边界。这是我到目前为止：

var markers = [];

// a sample of the map markers
var consulting = new L.LayerGroup();
  <% @maps.each do |consulting| %> 
    <% if consulting.category == "Consulting" %>

    markers.push( L.marker( [<%= raw consulting.latitude.to_json %>, <%= raw consulting.longitude.to_json %>]));

    L.marker( [<%= raw consulting.latitude.to_json %>, <%= raw consulting.longitude.to_json %>],  {icon: consultingIcon} )
        .bindPopup( 'hello')
        .addTo(consulting);
    <% end %>
  <% end %> 


var education = new L.LayerGroup();
  <% @maps.each do |education| %> 
    <% …

我的版本：反应：16.0.0 反应传单：1.6.6

我试图将图层控制器添加到我的地图中。有两层，每层都包含多个标记。这是我尝试做的一个例子。

import React, { Component }  from 'react'
import { render } from 'react-dom'
import { Map, TileLayer, Circle, Marker, Popup, LayersControl, LayerGroup } from 'react-leaflet'

class SimpleExample extends Component {
  constructor() {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 3,
      radius: 0
    };
    this.onClick1 = this.onClick1.bind(this);
    this.onClick2 = this.onClick2.bind(this);

  }

  getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
  }

  onClick1(){
    this.setState({radius: this.getRandomArbitrary(100, 800)});
  }

  onClick2(){
    this.setState({radius: 0});
  }

  renderFirst() {
    var result …

我在尝试将 onEachFeature Methode 用于 geoJSON 层时遇到问题。我尝试为每个功能分配一个点击侦听器。问题是，当我单击某个功能时，总是会收到该错误：

未捕获的类型错误：无法读取未定义的属性“detectChanges”

我可以想到这是因为在构造函数运行之前分配了层，但是在 ngOnInit 函数中这样做也不起作用。如果有一个很好的方法来做到这一点会很酷:)

  constructor(private changeDetector: ChangeDetectorRef){}

  fitBounds: LatLngBounds;
  geoLayer = geoJSON(statesData, {onEachFeature : this.onEachFeature});

  onEachFeature(feature , layer) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }

  layer: Layer[] = [];
  fitBounds: LatLngBounds;
  
  onEachFeature(feature , layer : geoJSON) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        console.log("tets"+e.target.getBounds().toBBoxString());
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }
  
constructor(private changeDetector: ChangeDetectorRef){}

ngOnInit() {
      let geoLayer = geoJSON(statesData, {onEachFeature …

我有一个问题，为什么我尝试将多段线添加为图层的方法不起作用。需要明确的是，我并不是要断言它应该有效，只是我很好奇为什么它在一种情况下有效，而在另一种情况下无效。考虑以下代码：

var oMbTiles = new L.tileLayer('/mbtiles/mbtiles.php?&z={z}&x={x}&y={y}', {
    tms: true,
    opacity: 0.7
  }),
  oUpIcon = new L.Icon({
    iconUrl: '/custom/css/themes/app/markers/up.png',
    iconSize: [24, 26]
  }),
  oMapTypes = {
    'Yakabox': oMbTiles
  },
  aFirstMarkers = [],
  aFirstLines = [],
  aFirstLatLng,
  oFirstLine,
  oFirstGroup,
  oLayersControl,
  oOverlayMaps,
  oMap,
  i;

aFirstLatLng = [
  [18.319026, -66.420557],
  [18.180555, -66.749961],
  [18.361945, -67.175597],
  [18.455183, -67.119887],
  [18.158345, -66.932911],
  [18.295366, -67.125135],
  [18.402253, -66.711397],
  [18.420412, -66.671979],
  [18.445147, -66.559696],
  [17.991245, -67.153993],
  [18.083361, -67.153897],
  [18.064919, -66.716683],
  [18.412600, -66.863926],
  [18.190607, -66.832041],
  [18.076713, -66.947389],
  [18.295913, -66.515588],
  [18.263085, -66.712985], …