+点击建筑弹窗加绿布

liuyg

2022-01-18 1b65bf157e9d1852bf819bcebcdbf596b77ae6b9

 src/components/mobilemap/index.vue

@@ -33,6 +33,7 @@
  </div>
</template>
<script>
import axios from "axios";
import { mapGetters } from "vuex";
export default {
  name: "mobilemapBox",
@@ -79,6 +80,7 @@
        [116.39585177, 27.93945304, 100],
        [116.41526036, 27.95352217, 100],
      ],
      areaLayer: null,
    };
  },
  computed: {
@@ -92,6 +94,7 @@
      "MobileWindowsHideFixed",
      "dimension",
      "dimensionData",
      "areaLayer", //绿布
    ]),
  },
  watch: {
@@ -480,6 +483,110 @@
      };

      const newLayer = usetowpointfive();
      //2.5d贴图事件
      const layerGroup = new that.DC.LayerGroup("modelBox");
      viewer.addLayerGroup(layerGroup);

      let areaLayer = new that.DC.VectorLayer("areaLayer");
      layerGroup.addLayer(areaLayer);
      axios
        .get(
          "http://arcgis.jxpskj.com:6080/arcgis/rest/services/lxxqwxq/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson"
        )
        .then((resultData) => {
          resultData.data.features.forEach((item) => {
            item.geometry.rings[0].forEach((it) => {
              it = it.join(",");
            });

            item.geometry.rings[0] = item.geometry.rings[0].join(";");

            const polygon = new that.DC.Polygon(item.geometry.rings[0]);
            polygon.attr = item.attributes;

            polygon.setStyle({
              material: that.DC.Namespace.Cesium.Color.fromBytes(
                255,
                255,
                255,
                1
              ),
            });

            areaLayer.addOverlay(polygon);
          });

          areaLayer.show = true;
        });
      that.$store.commit("MSET_areaLayer", areaLayer);
      var select = {
        overlay: undefined,
        color: undefined,
      };
      viewer.on(that.DC.MouseEventType.CLICK, (e) => {
        // console.log(e);
        if (e.overlay != undefined && e.layer.id == "areaLayer") {
          if (select.overlay != undefined) {
            if (e.overlay != select.overlay) {
              select.overlay.setStyle({
                material: select.color,
                outline: false,
              });

              select.overlay = undefined;
              select.color = undefined;
            }
          }

          if (select.overlay == undefined) {
            select.overlay = e.overlay;

            select.color = e.overlay._style.material;
            select.overlay.setStyle({
              outline: true,
              outlineColor: that.DC.Namespace.Cesium.Color.fromBytes(
                3,
                255,
                13,
                255
              ), // 边框颜色
              outlineWidth: 10, // 边框大小，
              height: 0.01,
              material: that.DC.Namespace.Cesium.Color.fromBytes(
                108,
                245,
                113,
                158
              ),
            });
          }
          // 定制化窗体
          that.openPopupS(
            {},
            [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat],
            {
              name: "楼栋号:" + e.overlay.attr["楼栋号"],
              bgImg:
                "http://223.82.109.183:2081/zhxy/upload/20220105/3c05dd70a9eac17b7e49afbfc7b1b68e.png",
              address: "",
              introduce: "",
              data: e,
              lntLat: [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat],
            }
          );
        } else {
          if (select.overlay != undefined) {
            select.overlay.setStyle({
              material: select.color,
              outline: false,
            });

            select.overlay = undefined;
            select.color = undefined;
          }
        }
      });

      // 2.5D贴图↑
      let startPoint;
      if (true) {