使用Mapbox API的p5.js项目中自定义图形无法显示是何原因？

问题排查与修复方案 #

• 核心错误1：中心经纬度参数不匹配
  你全局定义的clat、clon默认值为0,0，和你Mapbox静态地图请求里用的芝加哥中心坐标41.9099, -87.7278完全不一致，导致经纬度转墨卡托坐标后算出的偏移值完全不在400x400的画布范围内，标记自然不可见。
• 核心错误2：计算完目标点坐标后没有执行绘制逻辑
  你代码里只计算了目标点的x、y偏移值，没有调用circle()或者其他绘制方法把标记画在画布上。
• 次要问题：测试圆参数设置不合理
  你测试用的circle(0,0,500)设置了strokeWeight(100)，整个画布尺寸才400x400，这个圆的笔触直接撑满画布边缘，你无法识别这是测试绘制的图形。

修正后可运行代码 #

var mapimg;
var zoom = 10;
// 改为和Mapbox请求一致的中心坐标
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);
  
  // 计算中心坐标偏移基准
  var cx = mercX(clon);
  var cy = mercY(clat);
  // 计算目标点坐标
  var x = mercX(lon) - cx;
  var y = mercY(lat) - cy;
  
  // 绘制目标点标记
  stroke(255, 0, 0);
  strokeWeight(2);
  fill(255, 0, 0, 150);
  circle(x, y, 10);
}

配套HTML代码不变：

<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>

内容的提问来源于stack exchange，提问作者Mei