vue中使用Cesium实现三维开发

一.下载cesium引入包

public-->index.html

<link rel="stylesheet" type="text/css" href="static/js/plugins/Cesium174/Widgets/widgets.css" />
<script type="text/javascript" src="static/js/plugins/Cesium174/Cesium.js"></script>

二.初始化地图 

<div class="model" id="cesiumContainer">

Cesium.Ion.defaultAccessToken =你的token
//实例化
const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: false, //自动播放
  shadows: false,
  vrButton: false,
  selectionIndicator: false,
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  selectionIndicator: false,
  navigationHelpButton: false,
  shouldAnimate: true,//飞行需要使用
  animation: false,
  timeline: false,
  fullscreenButton: false,
  terrainProvider: Cesium.createWorldTerrain(), //提供地形
  imageryProviderViewModels: [tiandiMapModel0],//可选择的影像数组
  selectedImageryProviderViewModel: tiandiMapModel0, //当前选择的影像          
});

 这里的tiandiMapModel0影像提供

var tiandiMapModel0 = new Cesium.UrlTemplateImageryProvider({
  tileWidth: 256,//默认贴图宽度
  tileHeight: 256,
  url: 'http://t{R}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f5253xxxxxxxx',
  maximumLevel: 18,
  customTags: {
    R: function(imageryProvider, x, y, level) {
      return Math.floor(Math.random() * 6)
    }
  }
});

三.三维球定位到中国 

flyto:会有一个飞行动画 ; setview直接定位

// 三维球定位到中国
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(121.871337890625,30.893386706430803,178500),
  orientation: {
    heading :  Cesium.Math.toRadians(0),// 水平偏角，默认正北 0
    pitch : Cesium.Math.toRadians(-90),// 俯视角，-90，垂直向下
    roll : Cesium.Math.toRadians(0)
  },
  complete:function callback() {
    // 定位完成之后的回调函数
    setTimeout(()=>{
      getview()
    },2000) 
  }
});

var position = Cesium.Cartesian3.fromDegrees(86.889, 27.991, 84000);
//相机定位到珠穆朗玛峰
viewer.camera.setView({
    destination: position,
    orientation:{
        heading:Cesium.Math.toRadians(0.0), //正北
        pitch:Cesium.Math.toDegrees(-10), //平视
        roll: 0.0
    }
});

四. 添加label、billboard

for (var i=0 ;i<jsonData.features.length; i++) {
  var ifeature = jsonData.features[i];
  var position1 = [];
  ifeature.geometry.coordinates[0].forEach(lonlat => {
    position1.push(Cesium.Cartesian3.fromDegrees(lonlat[0], lonlat[1]));
  })
  let redPolygon =viewer.entities.add({
    polygon: {
      hierarchy: new Cesium.PolygonHierarchy(position1),
      material:Cesium.Color.fromRandom({
        alpha: 0.6
      }),
      classificationType: Cesium.ClassificationType.BOTH, 
    },
    polyline: {
      positions: position1,          
      width: 2,
      material:Cesium.Color.fromCssColorString('#000099').withAlpha(0.1),
      clampToGround: true
    }
  });
  var polyPositions = 
  redPolygon.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
  var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//中心点
  polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
  console.log(polyCenter)
  redPolygon.position = polyCenter;        
  redPolygon.label={
    show: true,
    text: ifeature.properties.id,
    color : Cesium.Color.fromCssColorString('#fff'),
    font:'normal 32px MicroSoft YaHei',
    showBackground : true,
    scale : 0.5,
    horizontalOrigin : Cesium.HorizontalOrigin.LEFT_CLICK,
    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 5000.0),
  };
  redPolygon.billboard={
    image:  "static/images/qjd.png",
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    width : 54,
    height : 55,
    horizontalOrigin : Cesium.HorizontalOrigin.LEFT_CLICK,
    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10.0, 5000.0), //视点距离
   }          
}

五.鼠标点击和移动事件

//鼠标滑过箭头变小手
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
    const pickedObject = viewer.scene.pick(movement.endPosition);
    if (Cesium.defined(pickedObject)) {
        viewer._container.style.cursor = "pointer";
    } else {
        viewer._container.style.cursor = "default";
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);    
//鼠标点击
var handlerPanorama = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handlerPanorama.setInputAction(function (click) {
    var pick = viewer.scene.pick(click.position);
    if (pick && Cesium.defined(pick)) {          
      pick.id.polygon.material = new Cesium.Color(55,255,55,0.3);
      pick.id.polygon.outlineWidth = 1;
      pick.id.polygon.outline = true;
      pick.id.polyline = {
        show: true,
        positions: pick.id.polygon.hierarchy._value.positions,
        width: 2,
        material: Cesium.Color.YELLOW
      }
    }else{
      viewer.entities.remove(viewer.entities.getById(checkid))
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

六.通过JSON加载范围线 

let res = Cesium.GeoJsonDataSource.load(jsonUrl, {
  stroke: {red: 1, green: 1, blue: 1, alpha: 0.4},
  fill: Cesium.Color.BLUE.withAlpha(0.4), //注意：颜色必须大写，即不能为blue
  strokeWidth: 3,
  clampToGround: true
});
  res.then(buffersource => {
  viewer.dataSources.add(buffersource);
  buffersource.name = "XXX";
})