标签: leaflet

我有一张传单和地图.它在地图上叠加了一系列多边形(通过GeoJSON),并将弹出窗口附加到每个多边形.每个弹出窗口显示有关该多边形的信息.

我想在弹出窗口中有一个链接,当点击它时,它运行一个javascript函数,通过AJAX拉出更小的多边形并显示它们.

我无法让脚本通过正常的jQuery/Javascript点击事件来点击链接.这是我的意思是正常(以下不起作用):

$('a .smallPolygonLink').click(function(e){
  console.log("One of the many Small Polygon Links was clicked");
});

bindPopup部分如下.它在制作时在每个多边形上运行,并在单击多边形时正确弹出.它确实显示了链接,只是不会在点击时运行上面的代码.

var popupContent = "Basic Information..." + '<a class="smallPolygonLink" href="#">Click here to see the smaller polygons</a>';
layer.bindPopup(popupContent);

这是一个JSFiddle,用一个简单的形式来说明这个例子.http://jsfiddle.net/2XfVc/4/

我正在使用RStudio创建一些传单图像.

我希望能够将输出保存为HTML,以便可以通过电子邮件发送,其他人可以查看它.

下面是一些示例R代码,它取自[here]以创建样本传单图像.

devtools::install_github('rstudio/leaflet')
library(leaflet)
rand_lng = function(n = 10) rnorm(n, -93.65, .01)
rand_lat = function(n = 10) rnorm(n, 42.0285, .01)
m = leaflet() %>% addTiles() %>% addCircles(rand_lng(50), rand_lat(50), radius = runif(50, 10, 200))
m

任何能够以HTML格式输出的代码都会非常感激......

我正在尝试在传单映射中设置fitBounds选项,如下所示:

var bounds = new L.LatLngBounds([[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]]);
map.fitBounds(bounds, { padding: [20, 20] });

但是这似乎没有添加任何填充？至少地图"缩放级别"不会改变,并且它始终显示边缘中的两个点(即一个位于最右上方,另一个位于最左下方).对于一些标记集,它工作正常,缩放在一个不错的水平,你可以很好地看到一切.然而,当项目彼此非常接近时,它似乎放大了一点点,除非我能用一些"填充"来适应它.

另外我不确定这样的边界是否正确？我应该只使用:

var bounds = [[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]];

我正在使用Leaflet包在R中创建地图.它工作得很好.我可以用R导出R中的地图,但我需要从R中的脚本导出地图.我的简单代码是:

png("test_png.png")
(m <- leaflet() %>% addTiles())
dev.off()

它工作但...输出png文件是白色空白.

我想将缩放控件放在地图的中间右侧,即地图最右侧的中间.我找到了使用以下代码将变焦控制放在不同角落的解决方案

var map = new L.map("map-container",{ zoomControl: false });

   new L.Control.Zoom({ position: 'topleft' }).addTo(map);

所以职位可以

topleft
topright
bottomleft
bottomright

但我的目标是将控制窗口置于中间右侧.或者甚至我把控件放在角落里我想在顶部添加一些余量.我怎样才能做到这一点？有什么想法吗？

我正在研究一个将React和Leaflet结合起来的项目,但我必须说我在语义方面遇到了一些困难.

由于大部分内容都是由Leaflet直接管理的,我不知道将Leaflet地图实例添加为React Component中的状态是否合理.

使用Leaflet创建标记时也会遇到同样的问题,因为它没有返回任何内容,我没有任何可以渲染的东西.逻辑本身对我来说似乎很模糊.

这是我开始做的.它正在工作,但我觉得我写错了代码并错过了这个概念.

/** @jsx React.DOM */

/* DOING ALL THE REQUIRE */
var Utils = require('../core/utils.js');

var Livemap = React.createClass({
    uid: function() {
        var uid = 0;
        return function(){
            return uid++;
        };
    },
    getInitialState: function() {
        return {
            uid: this.uid()
        }
    },
    componentDidMount: function() {
        var map = L.map('map-' + this.state.uid, {
            minZoom: 2,
            maxZoom: 20,
            layers: [L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'})],
            attributionControl: false,
        });
        map.fitWorld();
        return this.setState({
            map: map
        });
    },
    render: function() …

在我的应用程序中,我正在制作地图div

<div id="map" style="height: 610px; width:100%"></div>

但为了使我的地图响应我想要高度也100%,如果我做,height: 100%那么它不起作用.

如何使高度也像宽度一样变化,以便可以在任何设备上正确显示地图.

演示:http://jsfiddle.net/CcYp6/

如果您更改地图的高度和宽度,那么您将无法获得地图.

我有以下代码:

    map: function (events) {
            var arrayOfLatLngs = [];
            var _this = this;

            // setup a marker group
            var markers = L.markerClusterGroup();

            events.forEach(function (event) {
                // setup the bounds
                arrayOfLatLngs.push(event.location);

                // create the marker
                var marker = L.marker([event.location.lat, event.location.lng]);

                marker.bindPopup(View(event));

                // add marker
                markers.addLayer(marker);
            });

            // add the group to the map
            // for more see https://github.com/Leaflet/Leaflet.markercluster
            this.map.addLayer(markers);

            var bounds = new L.LatLngBounds(arrayOfLatLngs);
            this.map.fitBounds(bounds);
            this.map.invalidateSize();
        }

我最初调用此函数,它将添加所有events标记和群集的地图.

在某些其他事件中传递的泡沫点,地图将放大到新事件,但旧的事件仍然在地图上.

我尝试了this.map.removeLayer(markers);一些其他的东西,但我不能让旧的标记消失

有任何想法吗？

我正在使用Leaflet(通过react-leaflet)开发应用程序.Leaflet直接操作DOM.react-leaflet库不会改变它,它只是为您提供了React组件,您可以使用这些组件以反应友好的方式控制Leaflet映射.

在这个应用程序中,我想使用自定义地图标记,这些标记是包含一些简单元素的div.在Leaflet中执行此操作的方法是将标记的icon属性设置为DivIcon,您可以在其中设置自定义HTML.您可以通过将DivIcon的html属性设置为包含HTML的字符串来设置内部HTML.就我而言,我希望从React组件呈现HTML.

为了做到这一点,似乎正确的方法是使用ReactDOMServer.renderToString()在地图标记内将我想要的Component渲染成一个字符串,然后我将其设置为htmlDivIcon 的属性:

MyMarker.js:

import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { Marker } from 'react-leaflet'
import { divIcon } from 'leaflet'

import MarkerContents from './MarkerContents'

export class MyMarker extends Component {
  render() {
    const markerContents = renderToString(<MarkerContents data={this.props.data} />)
    const myDivIcon = divIcon({
      className: 'my-marker',
      html: markerContents
    })

    return (
      <Marker
        position={this.props.position}
        icon={myDivIcon} />
    )
  }
} …

我正在尝试我所设想的与传单多面体对象相当常见的用例.

我使用geojson创建MultiPolygon:

var layer = L.GeoJSON(g, style_opts);

我想要的是在每个多边形的中心放置一个简单的文本标签.(例如,将州名放在每个州的中心).

我看过:https: //groups.google.com/forum/？fromgroups =#!topic/leaflet-js/sA2HnU5W9Fw

这实际上覆盖了文本,但是当我添加一堆多边形时,它似乎以偏怪的方式将标签偏离中心,而我目前无法追踪问题.

我也看过:https://github.com/jacobtoye/Leaflet.label

但是,当您将鼠标悬停在多边形上时,这似乎只会将标签放在多边形上,并且不会静态地保留在多边形上.

我认为我最好的做法是使用第一个链接,并追踪它为什么会改变位置,但与此同时,如果有人知道一种快速简便的方法在传单上放置多边形,我会非常感激.

另外,如果我对上面的两个链接有任何错误的假设,请随时让我理顺.

首先十分感谢.