我是用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;
}