vue+superMap(超图) 绘制点、线、图片、全部清除等功能。

399 阅读1分钟

实现效果:

image.png

直接上代码:

画点:

     
      this.h
              heightReference: SuperMap3D.HeightReference.RELATIVE_TO_GROUND,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        verticalOrigin: SuperMap3D.VerticalOrigin.BOTTOM ,// 锚点设置
                 height: 10.0
            }
          });
          this.entities.push(point);
        }
      }, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK);
    },

画图片:

    viewer.entities.add({
      position: position,
      bigMzSuperMap3D.VerticalOrigin.BOTTOM // 锚点设置
      }
    });
    this.entities.push(billboard);
  }
}, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK);
    },

画线

      this.clearTempEntities();
      this.activeTool = 'line';
      this.setupHandler();

      let positions = [];
      let tempLine = null;

      this.handler.setInputAction((click) => {
        const position = viewer.scene.pickPosition(click.position);
        if (SuperMap3D.defined(position)) {
          positions.push(position);

          if (positions.length === 1) {
            // 第一个点
            tempLine = viewer.entities.add({
              polyline: {
                positions: new SuperMap3D.CallbackProperty(() => positions, false),
                width: 3,
                material: SuperMap3D.Color.RED,
                clampToGround: true
              }
            });
            this.tempEntities.push(tempLine);
          }
        }
      }, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK);

      // 右键结束绘制
      this.handler.setInputAction((click) => {
        if (positions.length >= 2) {
          const line = viewer.entities.add({
            polyline: {
              positions: positions,
              width: 3,
              material: SuperMap3D.Color.BLUE,
              clampToGround: true
            }
          });
          this.entities.push(line);
        }
        this.clearTempEntities();
        positions = [];