cesium vue2-cli2x配置

登陆太阳计划

安装Cesium

npm i cesium --save   

配置
webpack.base.conf.js

增加别名( cesium: path.resolve(__dirname, '../node_modules/cesium/Source') )

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
    }
  },

module 添加属性 unknownContextCritical: false,否则会报下面这个error:
require function is used in a way in which dependencies cannot be statically


module: {
.....
    unknownContextCritical: false, 
.....
}

webpack.dev.conf.js

plugins: [
....
     // Copy Cesium Assets, Widgets, and Workers to a static directory
     new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
     new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
     new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
     new webpack.DefinePlugin({
         // Define relative base path in cesium for loading assets
         CESIUM_BASE_URL: JSON.stringify('')
     }),
...
]

webpack.pro.conf.js

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'

plugins: [
...
      /* cesium */
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, 'Assets'), to: 'Assets' }
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
      ]),
      new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, 'ThirdParty/Workers'),
          to: 'ThirdParty/Workers'
        }
      ]),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        // 定义 Cesium 从哪里加载资源,如果使用默认的'',却变成了绝对路径了,所以这里使用'./',使用相对路径
        CESIUM_BASE_URL: JSON.stringify('./')
      }),
...
]

注意使用的时候引入的方式为reqiure.
Cesium1.6X版以后不再支持es6import

var Cesium = require("cesium/Cesium");
import "cesium/Widgets/widgets.css";

组件内使用
export const initCesium = () => {
{

window.cesiumViewer = new Cesium.Viewer("cesiumContainer", {
  useDefaultRenderLoop: false,
  animation: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  infoBox: false,
  sceneModePicker: false,
  selectionIndicator: false,
  timeline: false,
  navigationHelpButton: false,
  terrainShadows: Cesium.ShadowMode.DISABLED,
  //高德图层
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url:
      "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
  }),
});
// // label
//高德地图标注
cesiumViewer.imageryLayers.addImageryProvider(
  new Cesium.UrlTemplateImageryProvider({
    url:
      "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
  })
);
// load  the terrain
cesiumViewer.terrainProvider = Cesium.createWorldTerrain({
  requestVertexNormals: true,
  requestWaterMask: true,
});



let cp = new Cesium.Cartesian3(
  4303414.154026048,
  552161.235598733,
  4660771.704035539
);
cesiumViewer.camera.setView({
  destination: cp,
  orientation: {
    heading: 10,
    pitch: -Cesium.Math.PI_OVER_TWO * 0.5,
    roll: 0.0,
  },
});
//去除水印
setTimeout(() => {
  cesiumViewer._cesiumWidget._creditContainer.style.display = "none"; // clear the watermark mark
}, 0);

}

完成!

阅读 419

持续分享,欢迎交流

1 声望
0 粉丝
0 条评论
你知道吗?

持续分享,欢迎交流

1 声望
0 粉丝
文章目录
宣传栏