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;
    }

你可能感兴趣的:(webGis)