这是一个 3d 地图ui租还

联系作者：梦玉 [email protected]

使用方法

vue2下载依赖
npm install map3d-gallery@latest

导入map3d-gallery
import xxx from "map3d-gallery";

导入组件样式
import "map3d-gallery/index.css";

组件使用
1.注册组件
components: { xxx },

1.组件初始化
<xxx v-if="mapProps.show"  :mapProps="mapProps" class="xxx" ref="refMap" >
<template #detailBox><div class="paramsName"><span>{{ detailData.paramsName }}</span></div></template>
</xxx>

2.组件参数说明
props: {
      mapProps: {
        // 地图操作回调
        mapParameters: {
          // 地图颜色
          map3dParam: {
            detailTexture: require('map3d-gallery/img/xxx.jpg'), // 地图表面贴图
          },
          labelSubAndText: {
            label2Sub: 'mainBodyCount',// mainBodyCount接口里需要展示到地图上的总数字段 字段名可以修改 没设置不显示
            label2Text: '家', // label2Sub有值才会显示 柱子上显示的数据和单位
          },
        },
        show: true, // 是否显示
        urlJson: "430000", // 地图code  也是请求数据地址 geojson/430000.json
        fatherCallBack: this.fatherCallBack,  // 地图操作回调
      },
},


3.组件方法说明
methods: { 
    // 回调更新数据
    fatherCallBack(datas) {
      const { name, data } = datas;
      switch (name) {
        case "cityPoint":  // 城市点位
          const arr = data.urlJson ? data.features : data;
          console.log(datas, "-----------cityPoint")
          const newArr = arr.map(element => {
            const { name, adcode, parent, level, center, centroid } = element.properties;
            // abnormalColor 异常颜色//预警主体：  粉红色
            // greenColor 废弃物回收信息 绿色 
            // orangeColor 主体 橙色
            // 默认蓝色
            let color = "";
            if (adcode == 430421) {
              color = "orangeColor"
            } else if (adcode == 430422) {
              color = "greenColor"
            } else if (adcode == 430423) {
              color = "abnormalColor"
            }
            return {
              centroid: adcode == 430900 ? center : centroid,
              level,
              adcode,
              parent,
              placeName: name,
              mainBodyCount: 3,
              color
            }
          });
          if (data.urlJson) {
            this.goback.paramsName = data.paramsName
            this.goback.urlJson = data.urlJson
          }
          return newArr;
        case "showDetails": // 是否显示详情
          this.detailData = data;
          this.$refs.xxx.detailUpdate();
          break;
        case "switchMaps": // 切换地图
          this.mapInit.show = false;
          this.mapInit.urlJson = data.urlJson;
          break;
      }
    },
}

4. 给元素设置高度
<style scoped lang="scss">
.xxx {
  height: 60vh;
}
</style>