Cesium学习教程+笔记(Mars3D)

Cesium学习(Mars3D)

一 快速开始

中文教程-小白必备

中文api文档–学会查阅文档

准备工作-引入文件 vue-cli目录 public/index.html

  <!--引入cesium基础lib-->
  <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
  <script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>

  <!--引入mars3d库lib-->
  <link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
  <script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script>

  <!--引入mars3d库插件lib（按需引入）-->
  <script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script>

  <script src="http://mars3d.cn/lib/mapV/mapv.min.js" type="text/javascript"></script>
  <script src="http://mars3d.cn/lib/mars3d/plugins/mapv/mars3d-mapv.js" type="text/javascript"></script>

初始化页面–准备好一个容器 注意html,body高度 清除默认样式

<div id="mars3dContainer" class="mars3d-container"></div>

创建地图

 //创建三维地球场景
      var map = new mars3d.Map("mars3dContainer", {		//容器   属性
        scene: {				//场景参数
          center: {				//默认相机视角
            lat: 30.054604,		//纬度值		
            lng: 108.885436,	//经度值
            alt: 1736414,		//高度值
            heading: 0,			//方向角度值
            pitch: -90,			//俯仰角度值
          },
        },
        basemaps: [				//底图图层配置
          {
            name: "天地图影像",
            type: "tdt",		//类型
            layer: "img_d",		//底图
            show: true,
          },
        ],
});

二 开始入门

标记点和线

​ 新建像素点

	var tucengdian = new mars3d.layer.GraphicLayer(); //新建图层
      map.addLayer(tucengdian); //把图层绑定到map地图上
      var graphic = new mars3d.graphic.PointEntity({
        //PointEntity 像素点对象
        position: [108, 30], //坐标
        style: {
          //样式
          color: "pink", //颜色
          pixelSize: 10, //大小
          outline: true, //是否边框
          outlineColor: "#ffffff", //边框颜色
          outlineWidth: 2, //边框大小
        },
      });
      tucengdian.addGraphic(graphic); //把刚刚创建的像素点添加到图层上

新建一条线

	var tucengxian = new mars3d.layer.GraphicLayer(); //新建图层
      map.addLayer(tucengxian); //把图层绑定到map地图上
      var graphic = new mars3d.graphic.PolylineEntity({
        //PolylineEntity 线
        positions: [
          //坐标 --线是直至少两点组成的,所有需要二维数组坐标
          [108, 30],
          [108, 31],
        ],
        style: {
          width: 6,
          material: mars3d.MaterialUtil.createMaterialProperty(
            //新建材质线
            mars3d.MaterialType.PolylineOutline, //线的材质
            {
              color: Cesium.Color.ORANGE, //线的颜色
              outlineWidth: 2, //线的轮廓宽度
              outlineColor: Cesium.Color.BLACK, //线的轮廓颜色
            }
          ),
        },
      });
      tucengxian.addGraphic(graphic);//把线添加到图层中

圆和多边形

圆

	var tucengyuan = new mars3d.layer.GraphicLayer(); //新建图层
     map.addLayer(tucengyuan); //把图层绑定到map地图上
      let graphic = new mars3d.graphic.CircleEntity({
        //圆对象
        position: [116.1, 30.9, 1000], //坐标
        style: {
          //样式
          radius: 180000, //半径
          color: "#00ff00", //颜色
          opacity: 0.3, //透明度
          outline: true, //是否显示轮廓
          outlineWidth: 3, //轮廓宽度
          outlineColor: "#ffffff", //轮廓颜色
        },