标签: leaflet

我正在尝试使用Leaflet.js在Twitter Bootstrap的标签面板中显示一个地图,但是表现得很奇怪:

当我单击包含面板的选项卡时,地图顶部会出现灰色图层.如果我拖动并移动地图,我会看到其他瓷砖,但不是最初的瓷砖.

更奇怪的是,如果我调整浏览器的大小,突然它完美运行,直到我再次重新加载,所以我猜是css的一个问题,但我找不到问题.

此外,将地图放在选项卡式面板之外也很有效.

我在Firefox和Chrome中测试过,两者都有同样的问题.

我在jsfiddle中创建了一个测试,看它"活着":http: //jsfiddle.net/jasalguero/C7Rp8/1/

任何帮助真的很感激!

我正在寻找引用静态资产的正确网址,例如Vue javascript中的图片.

例如,我正在使用自定义图标图像创建传单标记,我尝试了几个网址,但它们都返回了404 (Not Found):

Main.vue:

var icon = L.icon({
    iconUrl: './assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

我已经尝试将图像放在assets文件夹和静态文件夹中,没有运气.我是否必须告诉vue以某种方式加载这些图像？

有许多在线资源提供JavaScript API来访问他们的服务.为了更清楚,我将基于MapBox的示例提出问题,但这适用于各种域中的许多其他服务.

当有人想在Web应用程序中使用此类服务​​时(例如来自MapBox的地图图像),他们通常需要注册/注册并获取访问令牌才能访问该服务.

现在,如果我将从服务器端使用API​​ - 没有问题:我知道我的令牌安全地存储在服务器上的某个地方,并且仅在我的服务器和服务提供商之间的通信时"暴露".但是,在JavaScript API的情况下(例如,如果我使用Leaflet从MapBox渲染地图),我应该在JavaScript中将访问令牌暴露给用户的Web浏览器 - 因此它非常容易找到某人的访问令牌.在我的例子中,只需使用Leaflet访问任何网站并在Firefox中打开"开发工具",就可以在一分钟细致地阅读他们的JavaScript代码时显示他们使用的令牌.

然而,对于我来说,这个令牌应被视为非常安全的数据 - 基于此令牌提供的身份验证来跟踪服务使用情况.如果您根据其使用情况支付服务费用就变得非常关键,但即使您没有(例如,如果您使用免费/入门/非付费计划) - 服务使用有限,我想确定只有我使用它.

显然,有一些策略,例如服务提供商的IP /域过滤,但似乎并非所有服务提供商都支持这种策略 - 例如,MapBox似乎没有(或者我没有找到它).或者,最终,我可以通过我的网络服务器代理服务,但这非常重.

考虑到所有这些 - 有没有办法保护JavaScript API使用的访问令牌访问外部服务,前提是JavaScript是在用户的浏览器中执行的？

我正在创建一个Shiny仪表板应用程序,其中仪表板主体应该显示一些地图.到目前为止,没有问题让地图扩展到整个身体的宽度,但它不知何故不愿意调整到整个高度.

传单本身已经设置为覆盖100%的高度,但它不能解决问题.只要我对leafletOutput使用height属性,传单对象就不会显示,而且我留下了一个空框.

代码可以在下面找到:

library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sidebarMenu(
      menuItem(
        "Maps", 
        tabName = "maps", 
        icon = icon("globe"),
        menuSubItem("Watersheds", tabName = "m_water", icon = icon("map")),
        menuSubItem("Population", tabName = "m_pop", icon = icon("map"))
      ),
      menuItem(
        "Charts", 
        tabName = "charts", 
        icon = icon("bar-chart"),
        menuSubItem("Watersheds", tabName = "c_water", icon = icon("area-chart")),
        menuSubItem("Population", tabName = "c_pop", icon = icon("area-chart"))
      )
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%", …

我对Leaflet Map API很感兴趣.

但是,我需要能够使用Google卫星图层.我无法找到有关如何将Google卫星图层添加到Leaflet的示例.我知道我仍然需要加载Google Maps API才能执行此操作(OpenLayers有一个示例).

即时通讯使用Leaflet.js,并希望某种方式将地图置于我所拥有的标记上,以便在页面启动时所有都在用户视图中.如果所有标记都聚集在一个小区域中,我希望地图缩小到仍然显示所有标记的水平.

我知道谷歌地图有自动中心功能,但我如何使用Leaflet.js进行此操作？

我有一个页面,给用户选择,他可以切换我显示的传单地图.

在初始传单地图加载后,我的问题是当我想要刷新地图时.

我总是得到"地图容器已初始化":

问题在于:

var map = L.map('mapa').setView([lat, lon], 15);

最初它加载得很好,但是当我在表单中选择另一个参数并希望再次显示地图时它会崩溃.

顺便说一句,我试图$('#mapa')在第二次之前使用jQuery 销毁并重新创建,setView()但它显示了相同的错误.

我有一个<div>传单地图.在某些事件中,<div>将改变高度.我希望地图能够调整其周围的新尺寸,<div>以便旧中心位于调整大小较小或较大的地图中心.我尝试使用该invalidateSize()功能,但似乎根本不起作用.如何在map-container-resize事件发生后重新调整地图并使其居中？

$mapContainer.on('map-container-resize', function () {
   map.invalidateSize(); // doesn't seem to do anything
});

编辑以提供更多上下文:

地图容器最初的样式为

#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}

用户单击某个按钮后,另一个面板显示在页面底部,地图容器的高度将减少到小于100%(例如80%).

单击此按钮后,将触发map-container-resize事件,以便我可以使地图调整大小并居中于旧的(即调整大小之前)中心.然后,地图本身也应调整到其初始高度的80%.

APi doc invalidateSize似乎是我想要的:

"检查地图容器大小是否已更改,如果是,则更新地图[...]"

但是getSize在调用invalidateSize之前和之后查看函数的输出,没有什么不同,地图保持其旧的大小.

对于任何有传单或leaflet.draw插件的人:

我想在不使用工具栏的情况下开始绘制多边形leaflet.draw.我已经设法找到允许编辑的属性,而不使用工具栏(layer.editing.enable();)通过在线搜索(它不在主文档中).我似乎无法找到如何在没有工具栏按钮的情况下开始绘制多边形.任何帮助将非常感激!

谢谢 :)

我正在编写一个Web应用程序,涉及导航技术插图(平移,缩放,单击).我认为Cloudmade Leaflet是一个很好的工具,只因为有人用它来制作XKCD 1110平移/缩放,我真的很喜欢它的结果.

显然,我需要平铺和扩展我原来的技术插图,但让我们说这是我解决的一个微不足道的问题.然而,看看Leaflet API,我似乎必须将我的技术插图(.ai,.svg和.png文件)转换为GeoJSON等地理标准.这似乎是一个尴尬的主张.

任何人都可以推荐Leaflet或任何其他工具来导航非地图图像？