超圖supermap的pickEvent事件問題

這里推薦一個大神的博客，對我很有啟發！

https://www.freesion.com/article/5197139788/

 

由於是剛接觸的，這里就用這位大神的鏈接作為我的筆記，繼續努力中。。。

 

我是用vue寫的：這里貼上我的代碼！

index.vue:

<template>
<div>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<blockquote id="bubble" class="bubble">
<img id="myimg" src="#" width="50%" height="auto">
<h2 id="title"></h2>
<p id="des" class="word"></p>
<audio controls="controls">
<source src="#" type="audio/mpeg" />
Your browser does not support the audio tag.
</audio>
</blockquote>
</div>
</template>

<script src="./gis.js"></script>

<style scoped>
#cesiumContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;
}
</style>

config.js:

const URL_CONFIG = {

  CBD_Data: 'http://localhost:8090/iserver/services/data-CBD/rest/data',

  CBD_Building: 'http://localhost:8090/iserver/services/3D-CBD/rest/realspace'

}

export default URL_CONFIG

//http://localhost:8090/iserver/services/3D-CBD/rest/realspace

//http://localhost:8090/iserver/services/3D-CBD/rest/realspace/datas/Building@CBD/config

//http://localhost:8090/iserver/services/data-CBD/rest/data

 

 

gis.js:

import URL_CONFIG from '@/common/js/config'

export default {

  name: 'Gis',

  data () {

    return {}

  },

  mounted () {

    this.init()

  },

  // methods: {

  //   init () {

  //     var infoboxContainer = document.getElementById("bubble");

  //     window.viewer = new Cesium.Viewer('cesiumContainer', {

  //       fullscreenButton: true,

  //       navigation: true

  //     })

  //     const scene = viewer.scene

  //     // 加載全景圖

  //     scene.open(URL_CONFIG.CBD)

  //     viewer.scene._creditContainer.style.display = 'none'

  //    },

  // }

  methods:{

    init(){ 

      var infoboxContainer = document.getElementById("bubble");

      window.viewer = new Cesium.Viewer('cesiumContainer', {

        fullscreenButton: true,

        navigation: true

      })

        viewer.customInfobox = infoboxContainer

        const scene = viewer.scene

        var canvas = scene.canvas

        var widget = viewer.cesiumWidget

        $('#loadingbar').remove()

        //scene.open(URL_CONFIG.CBD_Building)

        //viewer.scene._creditContainer.style.display = 'none'

    try {

      //加載單獨的圖層

      // const promise = scene.addS3MTilesLayerByScp(URL_CONFIG.CBD_Building, {

      //   name: 'CBD_Building'

      // })

      var promise = scene.open(URL_CONFIG.CBD_Building);

      Cesium.when(promise, function (layers) {

        if(!scene.pickPositionSupported){

          alert('不支持深度拾取,屬性查詢功能無法使用！');

      }

      //console.log(layers);

      var layer = scene.layers.find('Building@CBD');

      //console.log(layer);

      //設置屬性查詢參數

      layer.setQueryParameter({

          url: URL_CONFIG.CBD_Data,

          dataSourceName: 'CBD',

          dataSetName: 'Building',

          isMerge: true,

          keyWord: 'SmID'

      });

      //設置相機視角

    //  scene.camera.setView({

    //       //將經度、緯度、高度的坐標轉換為笛卡爾坐標

    //       destination : new Cesium.Cartesian3(-2767302.844416157,5085941.49155452,2675759.1559041184),

    //       orientation : {

    //           heading : 4.7793869967010565,

    //           pitch : -0.5899023527373464,

    //           roll : 8.539835505416704e-12

    //       }

    //   });

    }, function (e) {

        if (widget._showRenderLoopErrors) {

            var title = '渲染時發生錯誤，已停止渲染。';

            widget.showErrorPanel(title, undefined, e);

        }

    });

  }catch (e) {

    if (widget._showRenderLoopErrors) {

        var title = '渲染時發生錯誤，已停止渲染。';

        widget.showErrorPanel(title, undefined, e);

    }

  }

    //添加自定義infobox

    var title = document.getElementById("title");

    var des = document.getElementById("des");

    var myimg = document.getElementById("myimg");

    //注冊鼠標點擊事件

    viewer.pickEvent.addEventListener(function(feature){

      //alert("pickEvent事件已生效");

      console.log(feature);

      var id = Cesium.defaultValue(feature.SMID,'');

      var title = Cesium.defaultValue(feature.NAME,'');

      var description = Cesium.defaultValue(feature.DES,'');

      title.innerText = title;

      des.innerText = description;

      myimg.src = "./images/"  + title + ".jpg";

    });

    // if (typeof Cesium !== 'undefined') {

    //       window.startupCalled = true;

    //       init();

    //     }

      },

      

    },

}