Question

我使用传单和geojson-vt替换地图，以及矢量切片中的一些线条。我在geojson-vt中做了一些修改，因为我需要在切片时添加一些我的函数。一切正常，当我从缩放1开始我的leafletMap，然后通过鼠标滚轮增加缩放，例如zoom = 15。但是当我使用zoom =例如7，

启动我的地图时出现问题

library(shiny)
# Define UI for application that draws a histogram

ui <- shinyUI(fluidPage(

  # Application title
  titlePanel("Old Faithful Geyser Data"),

  # Sidebar with a slider input for number of bins 
  sidebarLayout(
    sidebarPanel(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),
    # Show a plot of the generated distribution
    mainPanel(
      textOutput('text1'),
      plotOutput("distPlot")
    )
  )
))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {
  output$distPlot <- renderPlot({
    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
    Sys.sleep(2)

  })
  observeEvent(plotOutput("distPlot"), {
    output$text1 <- renderText({ paste("Number of bins:", input$bins)})
  })
  })

# Run the application 
shinyApp(ui = ui, server = server)

因为矢量图块不是从0到7计算的，而是仅在7处计算，所以＆＃34;我的函数＆＃34;不好运。

我认为解决方案是在缩放0上开始地图，然后在循环中将缩放增加到7.但我不知道如何。

我试过这个，但它不能使用多个缩放...

var leafletMap = L.map('map').setView([52.00, 19.64], 7);

Answer 1

这是一个显示如何逐渐放大的示例。您的代码的部分问题在于您使用相同的延迟调用顺序setTimeout方法，因此它们将一个接一个地执行。如果您更改毫秒数（300，600，900，...），那么您实际上会看到动画缩放。

这是使用OSM磁贴而不是geojson-vt的快速示例，因此在您的浏览器缓存磁贴之前它看起来有点笨拙。但是，使用geojson-vt，您将创建自己的局部矢量切片，因此它应该更平滑。

但是，我不确定这会解决您的问题，因为您没有在geojson-vt中显示您更改的代码。可能setZoom()没有触发您的功能，但在您展示这些自定义功能之前，很难对您的问题做出正确的回答。

＆＃13;

var zoomDelayMs = 600; // milliseconds for animation delay
var maxZoom = 18;
var initialZoom = 7;

// Create the map
var map = L.map('map').setView([39.5, -0.5], initialZoom);

// Set up the OSM layer
var baseLayer = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: maxZoom
  }).addTo(map);

// function to zoom in gradually from initialZoom to maxZoom
slowZoom = function() {
  // reset zoom to default
  var zoom = initialZoom;
  map.setZoom(zoom);

  // if already in middle of slow zoom, stop it
  if (map.zoomtimer) clearInterval(map.zoomtimer);

  // zoom in one level every zoomDelayMs
  map.zoomtimer = setInterval(function() {
    if (zoom < maxZoom)
      map.setZoom(++zoom);
    else {
      clearInterval(map.zoomtimer);
      map.zoomtimer = 0;
    }
  }, zoomDelayMs);
}

＆＃13;

#map {
  height: 400px;
}
input {
  font-size: 1.6em;
}

＆＃13;

<link href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" rel="stylesheet" />
<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>
<input type='button' onclick='slowZoom()' value='Start slow zoom' />
<div id="map"></div>

＆＃13;

如何在传单，javascript中逐渐缩放

1 个答案: