Question

我想将 id 添加到 Marker()，但它显示错误属性 'id' 在类型 'Marker' 上不存在。

有一种方法可以将 id 添加到不存在的属性中吗？？

这是我的代码....

const maps = useRef<mapboxgl.Map | null>(null);

const markers = useRef<any>({}); // for the moment is any


useEffect(() => {
    maps.current?.on('click', (ev: mapboxgl.MapMouseEvent & mapboxgl.EventData) => {
      const { lng, lat } = ev.lngLat;

      const marker = new mapboxgl.Marker();
      marker.id = uuidV4(); // id' does not exist on type 'Marker

      marker.setLngLat([lng, lat]).addTo(maps.current!).setDraggable(true);

      markers.current[marker.id] = marker; // id' does not exist on type 'Marker
    });
  }, []);

我是打字稿的新手，所以我很乐意得到提示和解决方案。谢谢。

Answer 1

您可以定义自己的类型来扩展地图框标记类型并添加 genes <- factor(x = c( 'ABC', 'CDE', 'EFG', 'HIJ', 'JKL', 'LMN', 'ABC', 'CDE', 'EFG', 'HIJ', 'JKL', 'LMN', 'ABC', 'CDE', 'EFG', 'HIJ', 'JKL', 'LMN', 'ABC', 'CDE', 'EFG', 'HIJ', 'JKL', 'LMN', 'ABC', 'CDE', 'EFG', 'HIJ', 'JKL', 'LMN', 'ABC', 'CDE', 'EFG', 'HIJ', 'JKL', 'LMN' ), levels = c( 'LMN', 'JKL', 'HIJ', 'EFG', 'CDE', 'ABC' ), ordered = TRUE ) concentration <- fct_inorder( f = c( 'PR1.2', 'PR1.2', 'PR1.2', 'PR1.2', 'PR1.2', 'PR1.2', 'PR2.4', 'PR2.4', 'PR2.4', 'PR2.4', 'PR2.4', 'PR2.4', 'PR3.6', 'PR3.6', 'PR3.6', 'PR3.6', 'PR3.6', 'PR3.6', 'PR1.2T', 'PR1.2T', 'PR1.2T', 'PR1.2T', 'PR1.2T', 'PR1.2T', 'PR2.4T', 'PR2.4T', 'PR2.4T', 'PR2.4T', 'PR2.4T', 'PR2.4T', 'PR3.6T', 'PR3.6T', 'PR3.6T', 'PR3.6T', 'PR3.6T', 'PR3.6T' ), ordered = TRUE ) foldchange <- c( 577.19, 2.642, -697.90, 50.23, 12.582, -30.542, -15.376, 30.674, -1.973, -5.324, -132.761, 146.678, 500.19, 2.233,-656.90, 49.23, 13.582, -80.542, 577.19, 2.642, -697.90, 50.23, 12.582, -30.542, 577.19, 2.642, -697.90, 50.23, 12.582, -30.542, 577.19, 2.642, -697.90, 50.23, 12.582, -30.542 ) pval <- c(4, 2, 2, 2, 3, 3, 2, 3, 1, 1, 4, 4, 4, 2, 2, 2, 3, 3) data <- data.frame(genes, concentration, foldchange, pval) # now make dot plot using ggplot2 p <- ggplot(data, aes(x = concentration, y = genes, size = pval)) + geom_point(alpha = 0.9) + geom_point(aes(colour = cut(foldchange, breaks = c( 500, 250, 100, 50, 25, 10, 5, 2, -2, -5, -10, -25, -50, -100, -250, -500 )))) + labs(y = "Gene") + scale_color_manual( name = "fold change", values = c( "(500, Inf]" = "firebrick4", "(250,500]" = "firebrick", "(100,250]" = "red3", "(500,100]" = "red2", "(25,50]" = "red", "(10,25]" = "firebrick2", "(5,10]" = "firebrick1", "(2,5]" = "rosybrown1", "(-2,2]" = "gray98", "(-5,-2]" = "lightskyblue", "(-10,-5]" = "deepskyblue", "(-25,-10]" = "dodgerblue2", "(-50,-25]" = "dodgerblue4", "(-100,-50]" = "blue", "(-250,-100]" = "blue3", "(-500,-250]" = "darkblue", "(-Inf,-500]" = "navy"), labels = c("500", "250", "100", "50", "25", "10", "5", "2", "-2", "-5", "-10", "-25", "-50", "-100", "-250", "-500"), breaks = c(500, 250, 100, 50, 25, 10, 5, 2, -2, -5, -10, -25, -50, -100, -250, -500)) p + scale_size(breaks = c(1,2,3,4), labels=c("pval >0.05", "0.01<pval<0.05", "0.001<pval<0.01", "pval<0.001")) 属性。

id

您的 type MarkerWithId = mapboxgl.Marker & {id: string} 引用是这些对象的字典。

markers

当您调用 const markers = useRef<Record<string, MarkerWithId>>({}); 时，您会得到一个没有 new mapboxgl.Marker() 的标记，因此您需要使用类型断言。

id

其他应该没问题！

Answer 2

您还可以在 getElement() 方法上设置它，该方法返回用作标记的 DOM 元素。默认为浅蓝色的水滴状 SVG 标记。


 marker.getElement().id = uuidV4();

 marker.setLngLat([lng, lat]).addTo(map.current!).setDraggable(true);
 
 markers.current[marker.getElement().id] = marker;

标记（Mapbox）反应打字稿

2 个答案: