traffic-eff-backend/ruoyi-ui/src/views/bd/map/index.vue

<template>
  <div id="map" class="map" style="width: 100%;height: 100%">

  </div>
</template>

<script>

export default {
  name: 'bd-map',
  props: {
    loaded: {
      type: Function,
      default: () => {},
    },
  },
  mounted() {

    this.$nextTick(() => {
      const options = {
        mapType: BDLayers.Lib.Constant.BaseLayerType.Blank,
        mapModel: BDLayers.Lib.Constant.BaseLayerModel.Satellite,
        center: [108.95965, 34.2189],
        defaultZoom: 14,
        showCenter: false,
        baseControl: true,
        pitch: 45,
        lights: {
          directional: {
            direction: [-1, -1, -1],
            color: [1, 1, 1],
          },
          ambient: {
            exposure: 1.426,
            hsv: [0, 0, 0],
            orientation: 302.553,
          },
        },
      };
      bdmap.mapWrapper.loadMainMap('map', options);
      this.mapView = bdmap.mapWrapper.MainMap('map');
      this.mapView.createGLScense({
        sceneConfig: {
          environment: {
            enable: true, // 是否开启环境天空盒绘制
            mode: 1, // 天空盒模式： 0: 氛围模式， 1: 实景模式
            level: 0, // 实景模式下的模糊级别，0-3
            brightness: 0.915, // 天空盒的明亮度，-1 - 1， 默认为0
          },
          postProcess: {
            enable: true, // 是否开启后处理
          },
          ground: {
            enable: true, // 是否开启地面绘制
            renderPlugin: { // 地面的绘制插件，取值范围 lit(pbr) 或者 fill(phong)
              type: 'lit', // 用pbr材质渲染三维面数据的渲染插件
            },
            symbol: {
              polygonOpacity: 1, // 透明度 0-1
              material: { // 如果绘制插件为lit，设置pbr材质
                baseColorFactor: [0.48235, 0.48235, 0.48235, 1], // 基础色，四位归一化数组
                hsv: [
                  0, 0, -
                      0.532,
                ], // hsv颜色参数，三位分别是hue，saturation，value，即色相，饱和度和明度，每一位的取值范围都是0-1
                roughnessFactor: 0.22, // 粗糙度，取值范围 0 - 1，0为最光滑，1为最粗糙
                metallicFactor: 0.58, // 金属度，取值范围 0 - 1，0为非金属，1为金属
              },
            },
          },
        },
      });
      // http://200.200.19.253:31838/bdgis/folder/zy9?time=1728373968099
      const d3tiles = new BDLayers.Lib.Layer.CB3DtilesLayer('3dtiles', {
        offet: {
          from: 'GCJ02',
          to: 'WGS84',
        },
        mapView: this.mapView,
        maxCacheSize: 10000,
        services: [
          {
            url: 'http://127.0.0.1:8800/bdgis/folder/zy9/tileset.json', //"http://resource.dvgis.cn/data/3dtiles/dayanta/tileset.json",
            maximumScreenSpaceError: 16.0,
            heightOffset: 0, //-420,
          },
        ],
      });
      const satelliteTileLayer = new BDLayers.Lib.Layer.CBTileLayer('blayer_tdt_s', {
        url: [
          'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + BDLayers.Lib
              .Constant.WebMapKeys.Tianditu,
          'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + BDLayers.Lib
              .Constant.WebMapKeys.Tianditu,
        ],
        subdomains: '01234567',
        maxZoom: [18, 18],
        minZoom: [3, 3],
      });
      this.mapView.addCustomLayers(satelliteTileLayer, -1, true);
      window.map = this.mapView;
      this.loaded(this.mapView);
    });
  },
  data() {
    return {
      mapView: null,
    };
  },
  created() {
  },
  methods: {},
};
</script>