【mars3d】graphicLayer.addGraphic(添加数组注意事项

最新推荐文章于 2024-08-13 11:12:51 发布

mianmianwu

最新推荐文章于 2024-08-13 11:12:51 发布

阅读量130

点赞数 1

分类专栏： Mars3d app vue 文章标签：前端 javascript 开发语言 webgl 3d vue.js

本文链接：https://blog.csdn.net/m0_69803146/article/details/141130960

版权

Mars3d 同时被 3 个专栏收录

179 篇文章 16 订阅

订阅专栏

vue

175 篇文章 2 订阅

订阅专栏

app

158 篇文章 0 订阅

订阅专栏

graphicLayer.addGraphic(添加数组发现有问题，排查思路擦参考

代码：

const marsOnload = (map: any) => {
  const graphicLayer = new szmap3d.layer.GraphicLayer({
    hasEdit: true,
  });

  const getGraphic = (lng, lat) =>
    new szmap3d.graphic.Regular({
      position: Cesium.Cartesian3.fromDegrees(lng, lat),
      color: Cesium.Color.RED,
      fill: true,
      hasMoveEdit: false,
      style: {
        border: 4, // 多边形边数量
        radius: 500, // 半径
        outline: true,
        outlineWidth: 2,
        outlineColor: "rgba(0, 120, 255, 0.5)",
      },
    });
  const graphics = [
    getGraphic(113, 30),
    getGraphic(114, 30),
    getGraphic(113.5, 30),
    getGraphic(114, 25),
  ];
  map.addLayer(graphicLayer);

  graphicLayer.addGraphic(graphics);
  graphicLayer.flyTo();
};

发现怎么也加不上数据，仔细修改了代码后，发现graphicLayer没有加到map上，

更改了graphicLayer的位置，在New新的矢量之前，先把要添加的图层加到map上之后再操作

代码：

const marsOnload = (map: any) => {
  const graphicLayer = new szmap3d.layer.GraphicLayer({
    hasEdit: true,
  });
  map.addLayer(graphicLayer);

  const getGraphic = (lng, lat) =>
    new szmap3d.graphic.Regular({
      position: Cesium.Cartesian3.fromDegrees(lng, lat),
      fill: true,
      style: {
        border: 3, // 多边形边数量
        radius: 5000,
        startAngle: 0, // 开始角度(正东方向为0,顺时针到360度)
        color: Cesium.Color.RED,
        opacity: 0.5,
        outline: true,
        outlineWidth: 3,
        outlineColor: "#ffffff",
        label: {
          text: "我是火星科技",
          font_size: 18,
          color: "#ffffff",
          distanceDisplayCondition: true,
          distanceDisplayCondition_far: 500000,
          distanceDisplayCondition_near: 0,
        },
      },
    });

  const graphics = [
    getGraphic(113, 30),
    getGraphic(114, 30),
    getGraphic(113.5, 30),
    getGraphic(114, 25),
  ];
  graphicLayer.addGraphic(graphics);
  graphicLayer.flyTo();
};

效果: