javascript - 为什么我的图形没有显示在带有 Mapbox API 的 p5js 项目上

Question

我正在尝试通过使用 p5.js 绘制芝加哥一些主要社区的纬度、经度和大小来可视化数据。它的灵感来自 this coding challenge 。我彻底遵循了它，只改变了 map 的面积和缩放(使用 Mapbox API)。代码看起来是正确的，并且 map 也显示出来了。但是，当我在输入数据之前尝试将一个位置可视化为 map 上的一个圆圈时，它不会显示在草图上。 如果有人能让我知道这里可能出了什么问题，非常感激!

var mapimg;
var zoom = 10;
var clat = 0;
var clon = 0;
var lat = 41.9000;
var lon = -87.7204;


function preload() {
  mapimg = loadImage ('https://api.mapbox.com/styles/v1/mapbox/dark-v10/static/-87.7278,41.9099,10,0/400x400?access_token=pk.eyJ1Ijoic2wzMDcyNCIsImEiOiJja3VuMWNieWgzd3MzMnVrNmU2bzNwdndoIn0.cGgvcAgQwVdnNsHLIeBf9A');
}

  
function mercX(lon) {
  lon = radians(lon);
  var a = (256 / PI) * pow(2, zoom);
  var b = (lon) + PI;
  return a * b;
}

function mercY (lat) {
  lat = radians(lat);
  var a = (256 / PI) * pow(2, zoom);
  var b = tan(PI / 4 + lat / 2);
  var c = PI - log(b);
  return a * c;
}
  


function setup() {

  createCanvas(400, 400);
  translate(width/2, height/2);
  imageMode(CENTER);
  image(mapimg, 0, 0);
  stroke(255);
  strokeWeight(100);
  noFill();
  circle(0, 0, 500);

  var cx = mercX(clon);
  var cy = mercY(clat);
  var x = mercX(lon) - cx;
  var y = mercY(lat) - cy;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>

Answer 1

我认为这个问题与 mercX 和 mercY 以及您传递给它们的输入有关。看起来它们可能是为了将纬度和经度转换为像素而设计的。

您对 clat 和 clon 使用 0，这意味着 map 以本初子午线的赤道为中心。所以那里和芝加哥之间的相对像素坐标是巨大的。我想我已经通过使用 Mapbox URL 中的 clat 和 clon 值更正了代码。但是，我发现 mercX 和 mercY 的实现有些难以理解，而且我不确定您想强调什么，所以我不能确定。但现在至少 x 和 y 出现在屏幕上(用红点显示)。

var mapimg;
var zoom = 10;
var clat = 41.9099;
var clon = -87.7278;
var lat = 41.9000;
var lon = -87.7204;


function preload() {
  mapimg = loadImage ('https://api.mapbox.com/styles/v1/mapbox/dark-v10/static/-87.7278,41.9099,10,0/400x400?access_token=pk.eyJ1Ijoic2wzMDcyNCIsImEiOiJja3VuMWNieWgzd3MzMnVrNmU2bzNwdndoIn0.cGgvcAgQwVdnNsHLIeBf9A');
}

  
function mercX(lon) {
  lon = radians(lon);
  var a = (256 / PI) * pow(2, zoom);
  var b = (lon) + PI;
  return a * b;
}

function mercY (lat) {
  lat = radians(lat);
  var a = (256 / PI) * pow(2, zoom);
  var b = tan(PI / 4 + lat / 2);
  var c = PI - log(b);
  return a * c;
}

function setup() {
  createCanvas(400, 400);
  translate(width/2, height/2);
  imageMode(CENTER);
  image(mapimg, 0, 0);
  stroke(255);
  strokeWeight(100);
  noFill();
  circle(0, 0, 500);

  // get the center of the image in pixels
  var cx = mercX(clon);
  var cy = mercY(clat);
  // convert lon & lat to pixels and find the relative displacement from the center
  var x = mercX(lon) - cx;
  var y = mercY(lat) - cy;
  
  print({ cx, cy, x, y });
  
  stroke('red');
  strokeWeight(8);
  point(x, y);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>