时间戳

首页 > 解决方案 > 使用 mappa.js 和 p5.js 根据当前位置动态设置地图图块

leaflet - 使用 mappa.js 和 p5.js 根据当前位置动态设置地图图块

问题描述

我正在尝试使用 mappa.js 和 p5.js 根据当前位置动态设置地图图块。现在，我可以使用 mappa.js 将地图设置为位置 [0,0]，然后从导航器获取位置并使用 p5.js 绘制日食。但地图仍以 [0,0] 为中心。我希望地图的中心是当前位置。我找不到太多可以帮助我的文档。

密码笔

<html>
<head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js" type="text/javascript"></script>
  
      <script src="https://unpkg.com/mappa-mundi@0.0.5/dist/mappa.js" type="text/javascript"></script>
</head>

<body>
<script>
var mappa
var canvas
var myMap
var init = true
var options= {
            lat: 0,
            lng: 0,
            zoom: 4,
            style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        },
mappa = new Mappa("Leaflet");

function setup() {
  if(init) {
  canvas = createCanvas(600, 600);
    init = false
  }
  myMap = mappa.tileMap(options);
  myMap.overlay(canvas)
  myMap.onChange(drawCurrentLocation)
}


function draw() {
 
  drawCurrentLocation()
  
}

function drawCurrentLocation() {

                console.log("Current location");
                    navigator.geolocation.getCurrentPosition(position => {
                        options.lat = position.coords.latitude
                        options.lng = position.coords.longitude
                    })


            clear()

            const myLocation = myMap.latLngToPixel(options.lat, options.lng);
            let c = color(0, 0, 255);
fill(c);
noStroke();

ellipse(myLocation.x, myLocation.y, 10, 10);

}
</script>
</body>
</html>

标签： leafletp5.js

解决方案

推荐阅读