超图的基本使用（仅限本人项目中用到的功能）

1.下载超图包，导入项目

2.引入超图标签并初始化

<div id="cesiumContainer"></div>

  window.viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false, //是否显示动画控件
    shouldAnimate: true,
    homeButton: false, //是否显示Home按钮
    fullscreenButton: false, //是否显示全屏按钮
    baseLayerPicker: false, //是否显示图层选择控件
    geocoder: false, //是否显示地名查找控件
    timeline: false, //是否显示时间线控件
    sceneModePicker: true, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    infoBox: false, //是否显示点击要素之后显示的信息
    requestRenderMode: false, //启用请求渲染模式
    scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 1, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
  });
  this.scene = viewer.scene;
  //去除版权信息
  viewer._cesiumWidget._creditContainer.style.display = "none";

  var imageryLayers = viewer.imageryLayers;

  //投影地图服务
  var provider_mec = new Cesium.SuperMapImageryProvider({
    url: "http://xxx/iserver/services/map-YX/rest/maps/LYG_IMG@LYG_YX", //投影地图服务
  });
  var imagery_mec = imageryLayers.addImageryProvider(provider_mec);

  // 3D服务
  var service_3d =
    "http://xxx/iserver/services/3D-xuwei/rest";

  viewer.imageryLayers.addImageryProvider(
    new Cesium.BingMapsImageryProvider({
      url: service_3d,
      mapStyle: Cesium.BingMapsStyle.AERIAL,
      key: "a8807bdf8e5e4e8a9a7c68732b3b228a",
    })
  );

  var scene = viewer.scene;
  var widget = viewer.cesiumWidget;
  var sceneLayer;
  var partOfUrl =
    "http://xxx/iserver/services/3D-xuwei/rest/realspace";

  //添加S3M图层服务
  var promise = this.scene.open(this.host + partOfUrl);

  //定位到场景
  Cesium.loadJson(this.host + partOfUrl + "/scenes.json").then((scenes) => {
    var sname = scenes[0].name;
    Cesium.loadJson(
      this.host + partOfUrl + "/scenes/" + sname + ".json"
    ).then((jsonData) => {
      console.log(jsonData);
      var cameraPosition = jsonData.camera;
      var tilt = Cesium.Math.toRadians(cameraPosition.tilt - 90);

      Cesium.when(
        promise,
        () => {
          viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(
              // cameraPosition.longitude,
              // cameraPosition.latitude,
              119.59372385362653,
              34.55378719919066,
              45000
            ), // 设置位置
            orientation: {
              heading: Cesium.Math.toRadians(20.0), // 方向
              pitch: Cesium.Math.toRadians(-90.0), // 倾斜角度
              roll: -0.35,
            },
          });
          if (!scene.pickPositionSupported) {
            alert("不支持深度纹理,无法拾取位置！");
          }
          this.addBorderLine();
          viewer.scene.globe.depthTestAgainstTerrain = false;

          // viewer.scene.layers._layerQueue[0]._maximumMemoryUsage = 10240000;
        },
        function (e) {
          if (widget._showRenderLoopErrors) {
            var title =
              "加载SCP失败，请检查网络连接状态或者url地址是否正确？";
            widget.showErrorPanel(title, undefined, e);
          }
        }
      );
    });
  });

3.给地图添加自定义线条

addEntityPolyline() {
  viewer.entities.add({
    id: "shihua",
    name: "xxx",
    label: {
      text: "xxx",
      showBackground: true,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
      pixelOffset: new Cesium.Cartesian2(110, -25),
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    },
    position: Cesium.Cartesian3.fromDegrees(119.53897476, 34.50500055),
    corridor: {
      positions: Cesium.Cartesian3.fromDegreesArray(SHIHUAPOSITION),
      width: 50,
      material: new Cesium.ImageMaterialProperty({
        color:Cesium.Color.fromCssColorString('#02FDFF'), 
        repeat: new Cesium.Cartesian2(32, 32),
        // transparent: true
      }),
      extrudedHeight: 10,
      outline: true,
      outlineColor:Cesium.Color.fromCssColorString('#02FDFF'), 
    },
  });
},

SHIHUAPOSITION 数据格式

4.给地图打点并设置点击事件

clickLocation() {
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  //设置鼠标左键单击回调事件
  handler.setInputAction((e) => {
    //获取点击位置笛卡尔坐标
    var position = viewer.scene.pickPosition(e.position);
    //将笛卡尔坐标转化为经纬度坐标
    var cartographic = Cesium.Cartographic.fromCartesian(position);

    this.reportForm.longitude = Cesium.Math.toDegrees(
      cartographic.longitude
    );
    this.reportForm.latitude = Cesium.Math.toDegrees(cartographic.latitude);

    this.reportForm.lnglat =
      this.reportForm.longitude + this.reportForm.latitude;
    var height = cartographic.height;
    if (height < 0) {
      height = 0;
    }

    //在点击位置添加对应点
    viewer.entities.add({
      name: "点",
      position: Cesium.Cartesian3.fromDegrees(
        this.reportForm.longitude,
        this.reportForm.latitude,
        500
      ),
      ellipse: {
        semiMinorAxis: 30.0,
        semiMajorAxis: 30.0,
        fill: true,
        material: '图片路径',
      },
    });
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},

//或者

 viewer.entities.add({
    name: "点",
    position: Cesium.Cartesian3.fromDegrees(lon, lat, 150),
    billboard: {
      image,
      width: 54,
      height: 54,
    },
    label: {
      font: "10pt monospace",
      style: Cesium.LabelStyle.FILL,
      outlineWidth: 1,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
      pixelOffset: new Cesium.Cartesian2(0, -25), //偏移量
    },
    
    

5.给地图画圈（此处为多个圈）

circleSearch() {
  let rs =[100,500,1000];
  for (let i = 0; i < rs.length; i++) {
    let circle_entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(
        this.reportForm.longitude,
        this.reportForm.latitude,
        500
      ),
      name: "辅助分析圈",
      ellipse: {
        center: Cesium.Cartesian3.fromDegrees(
          this.reportForm.longitude,
          this.reportForm.latitude
        ),
        semiMinorAxis: Number(rs[i]),
        semiMajorAxis: Number(rs[i]),
        height: 15.0,
        outlineColor: Cesium.Color.RED, //线条方式展示
        outlineWidth: 200, 
        outline: true,
        extrudedHeight: 10,
        fill: false,
      },
    });
    console.log(this.circles);
    this.circles.push(circle_entity);
  }
  if (handler) {
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
},

ellipse材质可修改

  ellipse: {
        center: Cesium.Cartesian3.fromDegrees(
          this.reportForm.longitude,
          this.reportForm.latitude
        ),
        semiMinorAxis: Number(rs[i]),
        semiMajorAxis: Number(rs[i]),
        height: 10.0,
        material: Cesium.Color.GREEN.withAlpha(0.3), //面积填充
        outline: true,
      },

6.给地图画区域并添加点击事件

  mapMask(polygon_point_arr) {
      polygon_point_arr = polygon_point_arr || [
        { x: -2596028.776971413, y: 4566566.8581212, z: 3617698.2620807365 },
        { x: -2596459.4149414785, y: 4565505.79149597, z: 3618728.207980332 },
        { x: -2594775.169244337, y: 4565928.41587197, z: 3619403.008685092 },
        { x: -2594281.421968424, y: 4566840.35708856, z: 3618606.3928536405 },
      ];
      viewer.entities.add({
        polygon: {
          hierarchy: polygon_point_arr, // 这个数据是 xyx 的坐标数组对象
          extrudedHeight: 0, // 多边体的高度（多边形拉伸高度）
          height: 100, // 多边形离地高度
          material: Cesium.Color.RED.withAlpha(0.5),
          outlineColor: Cesium.Color.RED,
          outlineWidth: 2,
        },
      });
       
      //鼠标点击事件
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction((click) => {
        var pick = viewer.scene.pick(click.position);

      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
},

7.在地图上拾取经纬度

clickLocation() {
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  //设置鼠标左键单击回调事件
  handler.setInputAction((e) => {
    //获取点击位置笛卡尔坐标
    var position = viewer.scene.pickPosition(e.position);
    //将笛卡尔坐标转化为经纬度坐标
    var cartographic = Cesium.Cartographic.fromCartesian(position);

    this.reportForm.longitude = Cesium.Math.toDegrees(
      cartographic.longitude
    );
    this.reportForm.latitude = Cesium.Math.toDegrees(cartographic.latitude);

    this.reportForm.lnglat =
      this.reportForm.longitude + this.reportForm.latitude;
    var height = cartographic.height;
    console.log('====',this.reportForm)

  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},

8.在地图上画面

handleDraw() {
  handler = new Cesium.DrawHandler(viewer, 2);
  handler.activeEvt.addEventListener(function (isActive) {
    if (isActive == true) {
      viewer.enableCursorStyle = false;
      viewer._element.style.cursor = "";
      document.getElementsByTagName("body")[0].className = "drawCur";
    } else {
      viewer.enableCursorStyle = true;
      document.getElementsByTagName("body")[0].className = "";
    }
  });
  handler.movingEvt.addEventListener(function (windowPosition) {
    // console.log(windowPosition, "<p>点击绘制面,右击绘制结束</p>");
  });
  handler.drawEvt.addEventListener((result) => {
    // 点位集合
    const positions = result.object.positions;
    // 计算中心点纪经纬度
    let pCenter = Cesium.BoundingSphere.fromPoints(positions).center;
    console.log("点位坐标集合");
    console.log(positions);
    console.log("计算得出的中心点", pCenter);
    let cartographic = Cesium.Cartographic.fromCartesian(pCenter);
    const centerPosition = {
      longitude: Cesium.Math.toDegrees(cartographic.longitude),
      latitude: Cesium.Math.toDegrees(cartographic.latitude),
      height: 100,
    };
    // 添加中心点
    this.addPoint(centerPosition);
  });

  handler.activate();
},

 addPoint(item) {
  this.centerPoint = viewer.entities.add({
    name: "中心点",
    position: Cesium.Cartesian3.fromDegrees(
      Number(item.longitude),
      Number(item.latitude),
      30
    ),
    maximumCone: Cesium.Math.toRadians(90),
    billboard: {
      image:
        "https://wimg.588ku.com/gif/21/06/28/710859e51ac141ea967297852d5cecb3.gif",
      width: 40,
      height: 40,
    },
  });
},

//清除
handleClearDraw() {
  if (handler !== undefined) {
    handler.deactivate();
    handler.clear();
  }
  viewer.entities.remove(this.centerPoint);
},