cesium1.66+vue填坑記錄

我是用vue-cli3建的項目,參考了這篇文章
https://blog.csdn.net/weixin_44402694/article/details/88028155
以及官方的webpack項目
https://cesium.com/docs/tutorials/cesium-and-webpack/
但是還是有以下幾個坑

"export ‘default’ (imported as ‘Cesium’) was not found in ‘cesium/Cesium’

這個是新版本不支持整體import,可以按需引入,可以看Cesium.js最後,也可以直接用require
例如,main.js中加入

var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
 
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

cesium頁面加載下面顯示不全,style加入position:absolute

html,body,#cesiumContainer {
  width: 100%;
  height: 100%;
  position:absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

高分辨率屏幕加載瓦片地圖不清晰

viewer之後加入以下代碼

var viewer = new this.Cesium.Viewer("cesiumContainer", {
      //加載在線谷歌地圖
      imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
        url: "http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}"
      })
    });
    viewer._cesiumWidget._supportsImageRenderingPixelated = this.Cesium.FeatureDetection.supportsImageRenderingPixelated();
    viewer._cesiumWidget._forceResize = true;
    if (this.Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
      var vtxf_dpr = window.devicePixelRatio;
      // 適度降低分辨率
      while (vtxf_dpr >= 2.0) {
        vtxf_dpr /= 2.0;
      }
      //alert(dpr);
      viewer.resolutionScale = vtxf_dpr;
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章