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

Question

我正在尝试通过 p5.js 绘制芝加哥一些主要社区的纬度、经度和震级来可视化数据。它的灵感来自 this coding challenge。我完全按照它做了，只改变了地图的面积和缩放比例（使用 Mapbox API）。代码看起来是正确的，地图也出现了。但是，当我尝试在输入数据之前仅将一个位置可视化为地图上的一个圆圈时，它并没有显示在草图上。非常感谢，如果有人能告诉我这里可能是什么问题！

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，这意味着地图以本初子午线的赤道为中心。所以那里和芝加哥之间的相对像素坐标是巨大的。我想我已经通过使用您的地图框 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>

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

Why is my graphic not showing up on my p5js project w/ Mapbox API

javascript

mapbox

p5.js