在Processing中使用Unfolding Maps库，红色地图标记无法显示求助

在Processing编辑器中基于Unfolding Maps库开发时，尝试为坐标（43.6595035, -79.3814353）的收容所添加红色椭圆标记，但运行代码后标记无法正常显示；仅移除地图集成部分时椭圆可显示，需保留地图组件的前提下解决该问题。

原代码如下：

import de.fhpotsdam.unfolding.utils.*;
import de.fhpotsdam.unfolding.marker.*;
import de.fhpotsdam.unfolding.tiles.*;
import de.fhpotsdam.unfolding.interactions.*;
import de.fhpotsdam.unfolding.ui.*;
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.core.*;
import de.fhpotsdam.unfolding.mapdisplay.shaders.*;
import de.fhpotsdam.unfolding.data.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.texture.*;
import de.fhpotsdam.unfolding.events.*;
import de.fhpotsdam.utils.*;

String shelterMainFile = "toronto-daily-shelter-occupancy.csv"; 
//String shelterData = shelterMainFile; 

UnfoldingMap map; 
SimplePointMarker shelterMarker; 

void setup() {
  size(800, 600);
  smooth();

  //--MAP INITIATE 
  // Creating a map anchored around downtown core Toronto
  String mbTilesString = sketchPath("data/black_yellow.mbtiles");  //in the data folder of the current sketch
  map = new UnfoldingMap(this, new MBTilesMapProvider(mbTilesString));
  // Grab your desired map
  map = new UnfoldingMap(this, new Microsoft.RoadProvider()); // default cleaner
  //SET ZOOM & ANCHOR to specified location here
  map.zoomAndPanTo(18, new Location(43.6595035, -79.3814353));
  // LAUNCH
  MapUtils.createDefaultEventDispatcher(this, map);
  map.setTweening(true);
  
  //--LOCATION MARKER 
  Location covenantHouseLocation = new Location(43.6595035, -79.3814353);
  shelterMarker = new SimplePointMarker(covenantHouseLocation);  
  shelterMarker.setColor(color(255, 0, 0)); // set marker color to red
  
  //--MAP MARKERS 
  map.addMarker(shelterMarker);
  
  //--DATA
  // coming soon... 
}
void draw() {

  // Draw Map 
  map.draw();

  // Draw the marker hovering above Covenant House
  ScreenPosition shelterPos = map.getScreenPosition(shelterMarker.getLocation());
  strokeWeight(1);
  stroke(255, 0, 0);
  fill(255, 0, 0, 100);
  ellipse(shelterPos.x, shelterPos.y, 36, 36); //--red marker supposed to show up at this x, y 
}

错误原因分析 #

1. 重复初始化地图实例：代码中先创建了基于本地MBTiles的map对象，随后又重新赋值为微软道路地图的实例，导致之前添加的shelterMarker被关联到了已被丢弃的第一个地图实例上，当前显示的地图并没有该标记。
2. 冗余的手动绘制逻辑：同时使用Unfolding Maps的Marker系统和手动绘制椭圆的方式，不仅重复，还可能因为地图实例不匹配导致坐标计算异常。

修复方案 #

方法一：使用Unfolding Maps内置Marker系统（推荐） #

这种方式更贴合库的设计，无需手动处理坐标转换：

• 删除重复的地图初始化代码，只保留一个地图实例
• 调整Marker的大小（默认尺寸很小，容易被忽略）
• 移除draw()中的手动绘制椭圆代码，由地图自动渲染标记

修复后的代码：

import de.fhpotsdam.unfolding.utils.*;
import de.fhpotsdam.unfolding.marker.*;
import de.fhpotsdam.unfolding.tiles.*;
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;

String shelterMainFile = "toronto-daily-shelter-occupancy.csv"; 

UnfoldingMap map; 
SimplePointMarker shelterMarker; 

void setup() {
  size(800, 600);
  smooth();

  // 仅保留一个地图实例
  map = new UnfoldingMap(this, new Microsoft.RoadProvider());
  map.zoomAndPanTo(18, new Location(43.6595035, -79.3814353));
  MapUtils.createDefaultEventDispatcher(this, map);
  map.setTweening(true);
  
  // 创建并配置标记
  Location covenantHouseLocation = new Location(43.6595035, -79.3814353);
  shelterMarker = new SimplePointMarker(covenantHouseLocation);  
  shelterMarker.setColor(color(255, 0, 0));
  shelterMarker.setRadius(18); // 设置标记半径，对应原椭圆的36直径
  
  map.addMarker(shelterMarker);
}

void draw() {
  map.draw();
}

方法二：保留手动绘制椭圆的方式 #

如果需要自定义绘制逻辑，需确保地图实例唯一，并正确获取屏幕坐标：

• 删除重复的地图初始化代码
• 保留draw()中的绘制逻辑，但确保使用的是当前有效的地图实例

修复后的代码：

import de.fhpotsdam.unfolding.utils.*;
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;

String shelterMainFile = "toronto-daily-shelter-occupancy.csv"; 

UnfoldingMap map; 
Location covenantHouseLocation; 

void setup() {
  size(800, 600);
  smooth();

  // 仅保留一个地图实例
  map = new UnfoldingMap(this, new Microsoft.RoadProvider());
  map.zoomAndPanTo(18, new Location(43.6595035, -79.3814353));
  MapUtils.createDefaultEventDispatcher(this, map);
  map.setTweening(true);
  
  covenantHouseLocation = new Location(43.6595035, -79.3814353);
}

void draw() {
  map.draw();

  // 获取当前地图对应的屏幕坐标并绘制椭圆
  ScreenPosition shelterPos = map.getScreenPosition(covenantHouseLocation);
  strokeWeight(1);
  stroke(255, 0, 0);
  fill(255, 0, 0, 100);
  ellipse(shelterPos.x, shelterPos.y, 36, 36);
}

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