标签: leaflet

如何在传单上放置带有 geojson 的数字标记

忘记一切,直到这里,我花了黎明时间尝试,看看我是否可以继续前进,我会解释。我有一张地图,我需要列举 1 到 15 个标记。标记是正确的,标记只有1、15次的问题。这是我的json:

https://github.com/eltonsantos/analise_integrada/blob/master/path.js

简单的json,没什么

我的代码是:

var rotas = L.geoJSON(paradas, {
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng){
        console.log("Qtd: " + paradas.features.length)
        for(var i = 1; i <= paradas.features.length; i++){
            return L.marker(latlng, {
                icon: new L.AwesomeNumberMarkers({
                    number: i,
                    markerColor: 'purple'
                })
            })
        }
    }
}).addTo(map);
Run Code Online (Sandbox Code Playgroud)

这段代码没有显示任何错误信息,它只是显示我所有的点都用 1 编号。我只是希望它们根据 json 中的数量从 1 到 15 编号

javascript json markers geojson leaflet

1
推荐指数
1
解决办法
928
查看次数

R 传单闪亮:shape_click$id 为 NULL

基于这里的这个例子,我想通过简单地点击感兴趣的区域来动态地将地图与 Highchart 链接起来。但是 shape_click 函数返回 $id NULL。我用不同的 shapefile 尝试了它,但它不起作用。您将在调整后的示例代码下方看到(此处提供的数据可用于从 shape_click 函数中获取 $id。

library(shiny)
library(dplyr)
library(leaflet)
library(sf)
library(rmapshaper)

ui <- fluidPage(

  titlePanel("heatmap"),

  # Sidebar with a slider input for year of interest
  sidebarLayout(
    sidebarPanel(
      sliderInput("year",h3("Select year or push play button"),
                  min = 2000, max = 2002, step = 1, value = 2000,
                  animate = TRUE)
    ),

    # Output of the map
    mainPanel(
      leafletOutput("unemployment"),
      verbatimTextOutput('summary')
    )
  )
)

server <- function(input, output) {
  #to get the spacial data: …
Run Code Online (Sandbox Code Playgroud)

r click shape leaflet shiny

1
推荐指数
1
解决办法
944
查看次数

将随机噪声引入点位置

我正在使用 R 和 Leaflet for R 来绘制 1000 个点。原始数据从 SQL Server 作为英国国家网格 (BNG) 坐标(横轴墨卡托)导入到数据框中,然后使用 rgdal 将其转换为纬度/经度,然后通过 Leaflet 小部件输出到独立的 html。

BNG 坐标是通过地理编码邮政编码生成的,因此,当 >1 个人具有相同的邮政编码时,坐标是相同的。

我想在每个东/北坐标的最后 2 位数字中添加一些随机噪声,以便所有点都可能在 Leaflet 中可见。实现这一目标的最简单方法是什么?

谢谢

麦克风

r leaflet

1
推荐指数
1
解决办法
659
查看次数

使用传单进行实时跟踪

我想知道我可以使用 Ionic 通过传单实时跟踪我的位置,我能够获得我当前的位置,但我也想在我移动时跟踪它

 this.map.locate({
  setView: true,
  maxZoom: 16
}).on('locationfound', (e) => {
  let markerGroup = leaflet.featureGroup();
  this.marker = leaflet.marker([e.latitude, e.longitude], { icon: carIcon }).addTo(this.map);
Run Code Online (Sandbox Code Playgroud)

tracking geolocation leaflet ionic-framework

1
推荐指数
1
解决办法
4271
查看次数

单击时传单中的脉动圆圈

我有传单地图。我使用圆圈作为标记,因为我内置了一些缩放功能,并且我希望圆圈的半径在缩放过程中设置动画。不过,我也希望圆圈在被点击时“跳动”。我在网上看到了很多关于脉冲传单标记的文档,但没有关于脉冲圈的文档。这里有一个简单的解决方案吗?

查询:

var map = L.map('map').setView([40.449620, -79.939990], 13);

L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}', {
    maxZoom: 19,
    ext: 'png',
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'//,
}).addTo(map);

map.on('click', function(e) {
    var currentZoom = map.getZoom();
    if (currentZoom == 13) {
        map.flyTo(e.latlng, 15, { //zoom in on click
                animate: true,
                duration: 1,
                easeLinearity: 1
        });
    }
});
$.post('php/get-buildings.php', function(output){
    var obj = jQuery.parseJSON( output );

    var color;

    customCircle = L.Circle.extend({
       options: { 
          //some more options here
       } …
Run Code Online (Sandbox Code Playgroud)

pulse leaflet

1
推荐指数
1
解决办法
1520
查看次数

如何在反应传单中使用 polylinedac​​orator

我已经使用 react-leaflet 创建了折线,我想使用 polylinedac​​orator 在折线上显示方向。但我不知道如何使用 react-leaflet 做到这一点。我找到了多个带有传单的示例,但没有使用 react-leaflet

const polyline = [[51.505, -0.09], [51.51, -0.1], [51.51, -0.12]]

export default class VectorLayersExample extends Component<{}> {
  render() {
    return (
      <Map center={center} zoom={13}>
       <TileLayer
          attribution='&amp;copy <a 
            href="http://osm.org/copyright">OpenStreetMap</a> 
            contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    <Polyline color="lime" positions={polyline} />
    </Map>
 )
 }
Run Code Online (Sandbox Code Playgroud)

任何人都可以告诉我如何使用带有上述代码的 polylinedac​​orators

leaflet reactjs react-leaflet

1
推荐指数
1
解决办法
1130
查看次数

未找到传单标记生产环境角度 7

我在角度项目中使用传单地图。
使用传单显示带有标记的地图。
这在 ng server 和 ng build 中正常工作。
但是当在构建中使用 --prod 时不显示标记图标。
标记图像路径错误。

 http://127.0.0.1:8080/marker-icon.2273e3d8ad9264b7daa5.png%22)marker-icon-2x.png
Run Code Online (Sandbox Code Playgroud)

如何解决这个问题?

leaflet angular

1
推荐指数
1
解决办法
1081
查看次数

D3.js 的鼠标悬停事件在 Leaflet 中不起作用

1.我用Leaflet画了一张GeoJSON地图。

2.使用D3在svg中创建节点

3.给节点绑定鼠标悬停事件,但是不生效

我的环境

Leaflet 版本:1.5.1 D3.js v5 浏览器(附版本):Chrome 75.0.3770.80 操作系统/平台(附版本):Windows 10

  <div id="mapDiv"></div>
 <script>
    var style = {
      color: "#586a77",
      opacity: 1,
      weight: 1.5,
      fillColor: "#323c48",
      fillOpacity: .8
    }
    var mymap = L.map("mapDiv", {
      center: [33.027088, 109.467773],
      zoom: 4,
      zoomControl: false,
      attributionControl: false,
      minZoom: 1,
      maxZoom: 18
    })

    // ?d3????geojson??
    d3.json("data/geojson/world.json")
      .then((data) => {
        L.geoJSON(data, {
          style: style
        }).addTo(mymap);
        var svg = d3.select("#mapDiv").select("svg");

        var d_plane =
          "M59.79,12.92C62.42,9.4,64,5.75,64,3.15a3.62,3.62,0,0,0-.49-2,1.6,1.6,0,0,0-.29-.37,1.68,1.68,0,0,0-.34-.27,3.56,3.56,0,0,0-2-.51c-2.6,0-6.25,1.58-9.77,4.21-2.84,2.13-5.69,5.12-9.62,9.27L39.34,15.7l-7.62-2.28,0,0a1.71,1.71,0,0,0,0-2.41L30.36,9.61a1.71,1.71,0,0,0-1.21-.5,1.68,1.68,0,0,0-1.21.5l-2.06,2.06-1.09-.33a1.71,1.71,0,0,0-.14-2.25L23.27,7.7a1.71,1.71,0,0,0-1.21-.5,1.67,1.67,0,0,0-1.2.5L19,9.59,11.21,7.27a1.94,1.94,0,0,0-.55-.08,2.05,2.05,0,0,0-1.43.58L6.5,10.5A1.61,1.61,0,0,0,6,11.62,1.56,1.56,0,0,0,6.85,13l16.3,9.11a2.84,2.84,0,0,1,.4.3l4.65,4.65C23.85,31.66,20,36.09,17,40L16.15,41,3.54,39.86H3.32a2.33,2.33,0,0,0-1.56.65L.49,41.76A1.58,1.58,0,0,0,0,42.89a1.55,1.55,0,0,0,.92,1.43l8.87,4.21a2.07,2.07,0,0,1,.34.24l.74.73a5.38,5.38,0,0,0-.35,1.71,2.24,2.24,0,0,0,.62,1.63l0,0h0a2.25,2.25,0,0,0,1.63.61,5.43,5.43,0,0,0,1.69-.35l.75.75a2,2,0,0,1,.23.33l4.2,8.85a1.57,1.57,0,0,0,1.41.93h0a1.58,1.58,0,0,0,1.12-.47l1.3-1.31a2.32,2.32,0,0,0,.62-1.56c0-.07,0-.13,0-.16L23,47.85,24,47c3.86-3,8.3-6.9,12.87-11.24l4.65,4.66a2.49,2.49,0,0,1,.3.4L51,57.13a1.58,1.58,0,0,0,2.54.37l2.74-2.74a2.08,2.08,0,0,0,.56-1.43,2,2,0,0,0-.07-.54L54.41,45l1.89-1.89a1.71,1.71,0,0,0,0-2.41l-1.39-1.38a1.71,1.71,0,0,0-2.25-.14l-.32-1.09,2.06-2.06a1.72,1.72,0,0,0,.5-1.21,1.69,1.69,0,0,0-.5-1.2L53,32.27a1.71,1.71,0,0,0-2.42,0h0L48.3,24.65l2.25-2.14C54.68,18.59,57.67,15.76,59.79,12.92Z"

        var plane = svg.append("g").attr("id", "plane").attr("fill", "#108ee9").attr("stroke-width", 1).attr('height',
          10).attr('width', 10)

        plane.append("path").attr("d", d_plane)

        function …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js leaflet

1
推荐指数
1
解决办法
564
查看次数

如何使用反应传单向地图添加图例,而不使用引用和手动修改 DOM?

我正在使用 react-leaflet 并想在地图上添加一个图例。

我目前可以通过将地图的 ref 传递给自定义组件并渲染 null 来实现,同时让函数创建 HTML 并将其添加到地图中。使用 Jest 和 Enzyme 测试裁判是一场噩梦。

有没有办法使用 react-leaflet 组件来实现这一点?

javascript leaflet reactjs react-leaflet

1
推荐指数
1
解决办法
2987
查看次数

在传单中单击标记时不生成地图单击事件

所以,我有一张传单地图......

var map = L.map('map').setView([35.772219, -78.675272], 17);
map.on('click', function(e) {alert('map click!')});
Run Code Online (Sandbox Code Playgroud)

我添加了一个标记...

var marker = L.circleMarker([35.772219, -78.675272]);
marker.on('click', function(e) {alert('marker click!')});
marker.addTo(map);
Run Code Online (Sandbox Code Playgroud)

如果我点击标记,标记和地图点击事件都会触发,但我只想要标记的点击事件......有什么办法可以做到这一点?我似乎无法在文档中找到一个。

javascript leaflet

1
推荐指数
1
解决办法
621
查看次数