1.关于vue2使用mars3d

1.引入mars3d-使用html引入方式

在public的index.html中引入以下代码，可在mars3d官网中下载引入mars-git下载

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

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

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

  <!--第三方lib，非必须-->
  <link rel="stylesheet" href="lib/fonts/font-awesome/css/font-awesome.min.css">
  <script type="text/javascript" src="http://mars3d.cn/lib/hao/haoutil.js"></script>
  <script src="lib/include-lib.js" libpath="./lib/" include="jquery,layer,haoutil"></script>

2.引入之后在相应的vue文件使用如下

在标签中定义一个id

 <div id="mapContent" style="width:100%;position: static;"></div>

在函数中使用，

 async infoMars3d() {
      const that = this;
      var mapOptions = {
        scene: {
          center: {
            lat: 30.035192,
            lng: 103.936535,
            alt: 340000,
            heading: 359,
            pitch: -79
          },
          highDynamicRange: false
        },
        // 方式1：在创建地球前的参数中配置可修改为其它的具体看一个官方
        basemaps: [
          {
            name: "天地图影像(EPSG:4326)",
            icon: "img/basemaps/tdt_img.png",
            type: "group",
            show: true,
            layers: [
              {
                name: "底图",
                type: "tdt",
                layer: "img_d",
                crs: "EPSG:4326",
                key: ['XXX'] //切换自己的天地图tk注意是数组包裹
              },

              {
                name: "注记",
                type: "tdt",
                layer: "img_z",
                crs: "EPSG:4326",
                key: ['XXX']
              }
            ]
          }
        ]
      };

      this.map = await new mars3d.Map("mapContent", mapOptions);
  
      this.graphicLayer = await new mars3d.layer.GraphicLayer();

      this.map.addLayer(this.graphicLayer);
  

      // mouseMoveTarget的鼠标滑动事件
      // this.map.on(
        // mars3d.EventType.mouseMoveTarget,
       //  this.map_cameraChangedHandler,
       //  this
       //);
    //图层都加载完成在进行操作
      this.map.on(mars3d.EventType.load, function(event) {
      //函数使用...
      });
    },

这样基本的一个地图就出现了

3.要给地图的市级描边

获取市区的json文件官网地址
以下举例为成都市

  addDemoGraphics() {
      const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
        name: "成都市",
        data: cdJson, //在json网站下载相应的市区json
        symbol: {
          type: "polylineP",
          styleOptions: {
            materialType: mars3d.MaterialType.LineFlow, // 重要参数，指定材质 还有EllipsoidWave LineTrail ODLine WallScroll
            materialOptions: {
              color: "#038743",
              image: "/fence-line.png",
              speed: 40,
              repeat_x: 20
            },
            width: 3
          },
          flyTo: true
        }
      });

      this.map.addLayer(geoJsonLayer);
    },