vue集成mars3d后，basemaps加不上去

首先：

<template>

  <div id="centerDiv" class="mapcontainer">

    <mars-map :url="configUrl" @οnlοad="onMapload" />

  </div>

</template>

<script>

import MarsMap from '../components/mars-work/mars-map.vue'

import * as mars3d from 'mars3d'

//npm install mars3d-echarts --save

import 'mars3d-echarts'

const Cesium = mars3d.Cesium

export default {

  // eslint-disable-next-line vue/multi-word-component-names

  name: 'Index',

  components: {

    MarsMap

  },

  data() {

    const basePathUrl = window.basePathUrl || ''

    return {

      configUrl: basePathUrl + 'config/config.json'

    }

  },

  methods: {

    // 地图构造完成回调

    onMapload(map) {

      // 以下为演示代码

      map.setCameraView({ lat: 30.617828, lng: 116.294045, alt: 44160, heading: 357, pitch: -59 })

      // 创建entity图层

      const graphicLayer = new mars3d.layer.GraphicLayer()

      map.addLayer(graphicLayer)

      const tiles3dLayer = new mars3d.layer.TilesetLayer({

        url: '//data.mars3d.cn/3dtiles/bim-qiaoliang/tileset.json',

        maximumScreenSpaceError: 16,

        position: { lng: 117.096906, lat: 31.851564, alt: 45 },

        rotation: { z: 17.5 },

        flyTo: true

      })

      map.addLayer(tiles3dLayer)

      const poiQueryButton = new PoiQueryButton({

        insertIndex: 0 // 插入的位置顺序

      })

      map.addControl(poiQueryButton)

      // 2.在layer上绑定监听事件

      graphicLayer.on(this.mars3d.EventType.click, function (event) {

        console.log('监听layer，单击了矢量对象', event)

      })

      graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {

        console.log('监听layer，鼠标移入了矢量对象', event)

      })

      graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {

        console.log('监听layer，鼠标移出了矢量对象', event)

      })

      // 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效

      graphicLayer.bindPopup('我是layer上绑定的Popup', {

        anchor: [0, -10]

      })

      // 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效

      graphicLayer.bindContextMenu([

        {

          text: '删除对象',

          iconCls: 'fa fa-trash-o',

          callback: function (e) {

            const graphic = e.graphic

            if (graphic) {

              graphicLayer.removeGraphic(graphic)

            }

          }

        }

      ])

    },

    addDemoGraphic1: (graphicLayer) => {

      const graphic = new mars3d.graphic.LabelEntity({

        position: new mars3d.LngLatPoint(116.1, 31.0, 1000),

        style: {

          text: '火星科技Mars3D平台',

          font_size: 25,

          font_family: '楷体',

          color: '#003da6',

          outline: true,

          outlineColor: '#bfbfbf',

          outlineWidth: 2,

          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

          visibleDepth: false

        },

        attr: { remark: '示例1' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic2: (graphicLayer) => {

      const graphic = new mars3d.graphic.PointEntity({

        position: [116.2, 31.0, 1000],

        style: {

          color: '#ff0000',

          pixelSize: 10,

          outline: true,

          outlineColor: '#ffffff',

          outlineWidth: 2

        },

        attr: { remark: '示例2' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic3: (graphicLayer) => {

      const graphic = new mars3d.graphic.BillboardEntity({

        name: '贴地图标',

        position: [116.3, 31.0, 1000],

        style: {

          image: 'img/marker/mark-blue.png',

          scale: 1,

          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

          clampToGround: true

        },

        attr: { remark: '示例3' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic4: (graphicLayer) => {

      const graphic = new mars3d.graphic.PlaneEntity({

        position: new mars3d.LngLatPoint(116.4, 31.0, 1000),

        style: {

          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),

          dimensions: new Cesium.Cartesian2(4000.0, 4000.0),

          materialType: mars3d.MaterialType.Image2,

          materialOptions: {

            image: 'img/textures/poly-rivers.png',

            transparent: true

          }

        },

        attr: { remark: '示例4' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic5: (graphicLayer) => {

      const graphic = new mars3d.graphic.BoxEntity({

        position: new mars3d.LngLatPoint(116.5, 31.0, 1000),

        style: {

          dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),

          fill: true,

          color: '#00ffff',

          opacity: 0.9,

          heading: 45,

          roll: 45,

          pitch: 0

        },

        attr: { remark: '示例5' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic6: (graphicLayer) => {

      const graphic = new mars3d.graphic.CircleEntity({

        position: [116.1, 30.9, 1000],

        style: {

          radius: 1800.0,

          color: '#00ff00',

          opacity: 0.3,

          outline: true,

          outlineWidth: 3,

          outlineColor: '#ffffff',

          clampToGround: true

        },

        popup: '直接传参的popup',

        attr: { remark: '示例6' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic7: (graphicLayer) => {

      const graphic = new mars3d.graphic.CylinderEntity({

        position: [116.2, 30.9, 1000],

        style: {

          length: 3000.0,

          topRadius: 0.0,

          bottomRadius: 1300.0,

          color: '#00FFFF',

          opacity: 0.7

        },

        popup: '直接传参的popup',

        attr: { remark: '示例7' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic8: (graphicLayer) => {

      const graphic = new mars3d.graphic.EllipsoidEntity({

        position: new mars3d.LngLatPoint(116.3, 30.9, 1000),

        style: {

          radii: new Cesium.Cartesian3(1500.0, 1500.0, 1500.0),

          color: 'rgba(255,0,0,0.5)',

          outline: true,

          outlineColor: 'rgba(255,255,255,0.3)'

        },

        attr: { remark: '示例8' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic9: (graphicLayer) => {

      const graphic = new mars3d.graphic.ModelEntity({

        name: '消防员',

        position: [116.4, 30.9, 1000],

        style: {

          url: '//data.mars3d.cn/gltf/mars/firedrill/xiaofangyuan-run.gltf',

          scale: 16,

          minimumPixelSize: 100

        },

        attr: { remark: '示例9' }

      })

      graphicLayer.addGraphic(graphic)

    },

    addDemoGraphic10: (graphicLayer) => {

      const graphic = new mars3d.graphic.PolylineEntity({

        positions: [

          [116.5, 30.9, 1000],

          [116.52, 30.91, 1000],

          [116.53, 30.89, 1000]

        ],

        style: {

          width: 5,

          color: '#3388ff'

        },

        attr: { remark: '示例10' }

      })

      graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

    },

    addDemoGraphic11: (graphicLayer) => {

      const graphic = new mars3d.graphic.PolylineVolumeEntity({

        positions: [

          [116.1, 30.8, 1000],

          [116.12, 30.81, 1000],

          [116.13, 30.79, 1000]

        ],

        style: {

          shape: 'pipeline',

          radius: 80,

          color: '#3388ff',

          opacity: 0.9

        },

        attr: { remark: '示例11' }

      })

      graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

    },

    addDemoGraphic12: (graphicLayer) => {

      const graphic = new mars3d.graphic.CorridorEntity({

        positions: [

          [116.2, 30.8, 1000],

          [116.22, 30.81, 1000],

          [116.23, 30.79, 1000],

          [116.247328, 30.806077, 610.41]

        ],

        style: {

          width: 500,

          color: '#3388ff'

        },

        attr: { remark: '示例12' }

      })

      graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

    },

    addDemoGraphic13: (graphicLayer) => {

      const graphic = new mars3d.graphic.WallEntity({

        positions: [

          [116.3, 30.8, 1000],

          [116.31, 30.81, 1000],

          [116.334639, 30.800735, 721.39],

          [116.32, 30.79, 1000]

        ],

        style: {

          closure: true,

          diffHeight: 500,

          // 动画线材质

          materialType: mars3d.MaterialType.LineFlow,

          materialOptions: {

            image: 'img/textures/fence.png',

            color: '#00ff00',

            speed: 10,

            axisY: true

          }

        },

        attr: { remark: '示例13' }

      })

      graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

    },

    addDemoGraphic14: (graphicLayer) => {

      const graphic = new mars3d.graphic.RectangleEntity({

        positions: [

          [116.383144, 30.819978, 444.42],

          [116.42216, 30.793431, 1048.07]

        ],

        style: {

          color: '#3388ff',

          opacity: 0.5,

          outline: true,

          outlineWidth: 3,

          outlineColor: '#ffffff'

        },

        attr: { remark: '示例14' }

      })

      graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

    },

    addDemoGraphic15: (graphicLayer) => {

      const graphic = new mars3d.graphic.PolygonEntity({

        positions: [

          [116.510278, 30.834372, 567.29],

          [116.530085, 30.809331, 448.31],

          [116.507367, 30.788551, 98.21],

          [116.472468, 30.823091, 677.39]

        ],

        style: {

          materialType: mars3d.MaterialType.Water,

          materialOptions: {

            normalMap: 'img/textures/waterNormals.jpg', // 水正常扰动的法线图

            frequency: 8000.0, // 控制波数的数字。

            animationSpeed: 0.02, // 控制水的动画速度的数字。

            amplitude: 5.0, // 控制水波振幅的数字。

            specularIntensity: 0.8, // 控制镜面反射强度的数字。

            baseWaterColor: '#006ab4', // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4

            blendColor: '#006ab4' // 从水中混合到非水域时使用的rgba颜色对象。

          }

        },

        attr: { remark: '示例15' }

      })

      graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)

    }

  }

}

</script>

<style>

.mapcontainer {

  position: relative;

  height: 100%;

  overflow: hidden;

}

</style>

其次：

<template>

  <div :id="`mars3d-container${mapKey}`" class="mars3d-container"></div>

</template>

<script>

import Vue from "vue";

// 使用免费开源版本

// import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";

// import "mars3d/dist/mars3d.css";

// import * as mars3d from "mars3d";

// const Cesium = mars3d.Cesium;

// let mars3d = window.mars3d;

// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/architecture.html)

// echarts插件

// import 'mars3d-echarts'

// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用

// Vue.prototype.mars3d = mars3d

// Vue.prototype.Cesium = mars3d.Cesium

export default {

  name: "mars3dViewer",

  props: {

    // 地图唯一性标识

    mapKey: {

      type: String,

      default: "",

    },

    // 初始化配置config.json的地址

    url: String,

    // 自定义参数

    options: Object,

  },

  mounted() {

    window.mars3d.Resource.fetchJson({ url: this.url }).then((data) => {

      // 构建地图

      this.initMars3d({

        ...data.map3d,

        ...this.options,

      });

    });

  },

  beforeDestroy() {

    const map = this[`map${this.mapKey}`];

    if (map) {

      map.destroy();

      delete this[`map${this.mapKey}`];

    }

    console.log(">>>>> 地图卸载完成 >>>>");

  },

  methods: {

    initMars3d(mapOptions) {

      console.log(mapOptions);

      // if (this[`map${this.mapKey}`]) {

      //   this[`map${this.mapKey}`].destroy();

      // }

      // 创建三维地球场景

      var map = new window.mars3d.Map(

        `mars3d-container${this.mapKey}`,

        mapOptions

      );

      this[`map${this.mapKey}`] = map;

      console.log(">>>>> 地图创建成功 >>>>", map);

      // 挂载到全局对象下，所有组件通过 this.map 访问

      // Vue.prototype[`map${this.mapKey}`] = map

      // 绑定对alert的处理，右键弹出信息更美观。

      // window.haoutil = window.haoutil || {}

      // window.haoutil.msg = (msg) => {

      //   this.$message.success(msg)

      // }

      // window.haoutil.alert = (msg) => {

      //   this.$message.success(msg)

      // }

      // 抛出事件

      this.$emit("onload", map);

    },

  },

};

</script>

<style>

.mars3d-container {

  height: 100%;

  overflow: hidden;

}

/**cesium 工具按钮栏*/

.cesium-viewer-toolbar {

  top: auto !important;

  bottom: 35px !important;

  left: 12px !important;

  right: auto !important;

}

.cesium-toolbar-button img {

  height: 100%;

}

.cesium-viewer-toolbar > .cesium-toolbar-button,

.cesium-navigationHelpButton-wrapper,

.cesium-viewer-geocoderContainer {

  margin-bottom: 5px;

  float: left;

  clear: both;

  text-align: center;

}

.cesium-button {

  background-color: #3f4854;

  color: #e6e6e6;

  fill: #e6e6e6;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

  line-height: 32px;

}

/**cesium 底图切换面板*/

.cesium-baseLayerPicker-dropDown {

  bottom: 0;

  left: 40px;

  max-height: 700px;

  margin-bottom: 5px;

}

/**cesium 帮助面板*/

.cesium-navigation-help {

  top: auto;

  bottom: 0;

  left: 40px;

  transform-origin: left bottom;

}

/**cesium 二维三维切换*/

.cesium-sceneModePicker-wrapper {

  width: auto;

}

.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {

  float: right;

  margin: 0 3px;

}

/**cesium POI查询输入框*/

.cesium-viewer-geocoderContainer .search-results {

  left: 0;

  right: 40px;

  width: auto;

  z-index: 9999;

}

.cesium-geocoder-searchButton {

  background-color: #3f4854;

}

.cesium-viewer-geocoderContainer .cesium-geocoder-input {

  background-color: rgba(63, 72, 84, 0.7);

}

.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {

  background-color: rgba(63, 72, 84, 0.9);

}

.cesium-viewer-geocoderContainer .search-results {

  background-color: #3f4854;

}

/**cesium info信息框*/

.cesium-infoBox {

  top: 50px;

  background: rgba(63, 72, 84, 0.9);

}

.cesium-infoBox-title {

  background-color: #3f4854;

}

/**cesium 任务栏的FPS信息*/

.cesium-performanceDisplay-defaultContainer {

  top: auto;

  bottom: 35px;

  right: 50px;

}

.cesium-performanceDisplay-ms,

.cesium-performanceDisplay-fps {

  color: #fff;

}

/**cesium tileset调试信息面板*/

.cesium-viewer-cesiumInspectorContainer {

  top: 10px;

  left: 10px;

  right: auto;

  background-color: #3f4854;

}

</style>

问题的原因是:

服务有返回东西，使用的就是示例中的配置；数据正常返回了，mock拦截机制的原因，自行处理把mock注释掉就解决了。

 

 文章来源地址https://www.toymoban.com/news/detail-686358.html

到了这里，关于vue集成mars3d后，basemaps加不上去的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！