park-application-fe/src/components/map/index.vue

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

  </div>
</template>

<script>

export default {
  name: 'bd-map',
  props: {
    mapId: {
      type: String,
      default: 'map',
    },
    loaded: {
      type: Function,
      default: () => {
      },
    },
    center: {
      type: Array,
      default: () => [121.9580475686964, 30.949993496740227]
    },
  },
  mounted() {
    this.$nextTick(() => {
      const options = {
        mapType: BDLayers.Lib.Constant.BaseLayerType.Blank,
        mapModel: BDLayers.Lib.Constant.BaseLayerModel.Satellite,
        center: this.center,
        defaultZoom: 20,
        showCenter: true,
        baseControl: false,
        pitch: 0,
        lights: {
          directional: {
            direction: [-1, -1, -1],
            color: [1, 1, 1],
          },
          ambient: {
            exposure: 1.426,
            hsv: [0, 0, 0],
            orientation: 302.553,
          },
        },
      };
      bdmap.mapWrapper.loadMainMap(this.mapId, options);
      this.mapView = bdmap.mapWrapper.MainMap(this.mapId);
      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 satelliteTileLayer = new BDLayers.Lib.Layer.CBTileLayer('blayer_tdt_s', {
        url: [
          "https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}"
        ],
        subdomains: '01234567',
        maxZoom: [25, 25],
        minZoom: [3, 3],
      });
      this.mapView.addCustomLayers(satelliteTileLayer, -1, true);
      this.mapView.on('click', function (param) {
        console.log(new Date().toLocaleTimeString(),
          'click map on', param.coordinate.toFixed(5).toArray().join());
      });
      this.loaded(this.mapView);
    });
  },
  data() {
    return {
      mapView: null,
    };
  },
  created() {
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.map {
  ::v-deep .maptalks-wrapper {
    border-radius: 10px;
  }
}
</style>