cesium使用记录（1）

仅仅是那个人的一个使用记录

1.环境构建

npm i cesium

//vue.config.js
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')

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

module.exports = {
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        'api': resolve('src/api'),
        'components': resolve('src/components'),
        'public': resolve('src/public'),
        'Cesium': resolve(cesiumSource)
      }
    },
    plugins: [
      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({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
    }
  }
}

//main.js
const Cesium = require('Cesium/Cesium');
const widgets = require('Cesium/Widgets/widgets.css');

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

2.初始化cesium

 async initMap() {
      //全局初始化地图
      let that = this;
      if (window.viewer && !window.viewer.isDestroyed()) {
        window.viewer.destroy();
      }
      window.viewer = new Cesium.Viewer("cesiumContainer", {
        infobox: false,//去掉左键点击的那个信息框
        geocoder: false,
        sceneModePicker: false,
        selectionIndicator: false,
        navigationHelpButton: false,
        homeButton: false,
        timeline: false,
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        imageryProvider: false,
        shouldAnimate: true,
          //地形图
        terrainProvider: new Cesium.ArcGISTiledElevationTerrainProvider({
          url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
        }),
          //地图瓦片
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        }),
      });
      window.viewer._cesiumWidget._creditContainer.style.display = "none";
      //开启太阳光
      //window.viewer.scene.globe.enableLighting = true;
      //Enable depth testing so things behind the terrain disappear.
      window.viewer.scene.globe.depthTestAgainstTerrain = false;

      //更能改鼠标操作 对换鼠标中键和右键
      window.viewer.scene.screenSpaceCameraController.zoomEventTypes = [
        Cesium.CameraEventType.WHEEL,
        Cesium.CameraEventType.PINCH,
      ];
      window.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
        Cesium.CameraEventType.PINCH,
        Cesium.CameraEventType.RIGHT_DRAG,
      ];
      var handler = new Cesium.ScreenSpaceEventHandler(
        window.viewer.scene.canvas
      );
      //去掉版权信息
      window.viewer._cesiumWidget._creditContainer.style.display = "none";
      window.viewer.scene.debugShowFramesPerSecond = true;
    },

3.画点线面

//普通点
let  position = Cesium.Cartesian3.fromDegrees(经度，纬度，高度)
 window.viewer.entities.add({
            position: position,
            id: 'position',
            point: {
              color: Cesium.Color.SKYBLUE,
              pixelSize: 6,
              outlineColor: Cesium.Color.YELLOW,
              outlineWidth: 2,
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
          });
//点标注
 window.viewer.entities.add({
  position: position,
          label: {
            text: '俺是标注',
            font: "6pt",
            fillColor: Cesium.Color.fromCssColorString("#fff"),
            // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 0,
            showBackground: true,
            backgroundColor: Cesium.Color.fromCssColorString("#ff7f00"),
            translucencyByDistance: new Cesium.NearFarScalar(
              5000,
              1.0,
              30000,
              0
            ),
            //垂直位置
            //verticalOrigin : Cesium.VerticalOrigin.BUTTON,
            //中心位置
            pixelOffset: new Cesium.Cartesian2(0, 0),
          },
 })
//点图片
let  img = require("@/assets/images/你的图片.png");
window.viewer.entities.add({
        id: 'position',
        position:position,
        billboard: {
          image: img,
          scale: 1,
   
      });
//点模型
    window.viewer.entities.add({
          id: 'position',
          position: position,
          model: {
            uri: "你的模型地址",
            minimumPixelSize: 50,
            scale: 25,
            maximumScale: 30000,
            silhouetteColor: Cesium.Color.DARKGREEN,
            silhouetteSize: 3.0, // 轮廓的宽度
          },
        });
//线
let lineArr = [经度,纬度,高度,经度,纬度,高度]
 window.viewer.entities.add({
          id: 'polyline',
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(lineArr),
            width: 10,
            material: new Cesium.PolylineGlowMaterialProperty({
              color: Cesium.Color.CORNFLOWERBLUE,
            }),
          },
        });
//面
let polygon = [经度,纬度]
window.viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArray(polygon)
          ),
          outline: true,
          outlineColor: Cesium.Color.AQUAMARINE,
          outlineWidth: "2px",
          material: stripeMaterial,
          height: 300.0,
          heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
          extrudedHeight: 0.0,
          extrudedHeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          clampToGround: true,
        },
      });