floor-structure v1.3.1

组件安装

npm i -D floor-structure

组件注册

1、在main.js中注册组件

import floorStructure from "floor-structure";
import "floor-structure/floor-structure.css";
Vue.use(floorStructure);

2、 在指定容器中引入组件

<template>
  <floor-structure>
    <!-- 你的内容 -->
  </floor-structure>
</template>

3、 组件依赖

你的前端工程中需要引入minemap.js

使用方法

配置项：options

• 类型Object

• 默认值:

settings: {
    // 地图初始状态显示
    mapState: {
        mapInit: true, //是否需要地图容器(true:组件内初始化地图 false:使用已有地图容器)
        hiddenExtrusion: true, //是否自动关闭底图立体建筑物图层
        //mapInit为true时，以下map配置为必须
        serviceUrl: "//{ip}:{port}", // 地图服务地址
        solution: '地图方案号',
        center: [106.69715, 26.52642],
        zoom: 16.5,
        minZoom: 3,
        maxZoom: 19,
        pitch: 30,
        bearing: 0,
        projection: "LATLON" //投影方式:经纬度投影 LATLON，墨卡托投影 MERCATOR
    },
    // 白模建筑物设置
    extrusionStyle: {
        buildingUrl: "白模pbf接口完整地址", //白模pbf地址
        sourceLayer: "buildingLayer", //pbf接口对应source-layer
        beforeLayerId: "", //白模图层顺序控制：置于beforeLayerId图层之下
        minZoom: 14, //白模图层最小显示zoom级别
        maxZoom: 19, //白模图层最大显示zoom级别
        buildingIdField: "identity", //建筑物id字段名
        buildingHeightField: "levels", // 建筑物高度字段名
        buildingFlagField: "flag", // 是否有单体化字段名
        normalColor: "#616060", // 正常白模建筑颜色值和透明度
        normalOpacity: 0.5,
        hoverColor: "#ff0000", // 白模建筑鼠标hover颜色值和透明度
        hoverOpacity: 0.5,
        activeColor: "#616060", // 有单体化建筑色值和透明度
        activeOpacity: 0.65,
    },
    // 单体化信息设置
    buildingInfo: {
        requestUrl:
            '{根据建筑物id获取建筑物信息接口地址}?id=', //根据建筑物id获取建筑物信息(单元数、楼层数、房间数等其他信息)
        minZoom: 14, //单体化图层最小显示zoom级别
        maxZoom: 19, //单体化图层最小显示zoom级别
        flyToZoom: 18, //单体化状态默认地图级别和倾角
        flyToPitch: 45,
        flyToDuration: 2000,
        resultFields: ["result"],
        buildingNameField: "buildingName", //以上接口获取建筑物名称字段
        floorNumField: "floorNum", //楼层数字段名
        unitNumField: "unitNum", // 单元数字段名
        roomNumField: "roomNum", // 房间数字段名
        geometryField: "geometry", // 建筑物集合信息字段名
        normalColor: "#1e2dac", //单体化初始颜色
        normalOpacity: 0.7, //单体化初始透明度
        hoverColor: "#3243ec", //鼠标移入单体化颜色
        activeColor: "#800505", //选中单体化初始颜色
        spaceColor: "#aac2f5", //单元/楼层间隔颜色
        floorSpace: 0.4, //楼层间隔(米)
        unitSpace: 0.000001, //单元间隔(经纬度差值)
        unitTimer: 2000, //单体化时间间隔
        showInfoModal: true, //是否显示楼层信息弹窗
        canActiveBuilding: false, //是否可以通过建筑物名称选中楼栋单体化
        closeModalType: 2, //1-关闭弹窗同时取消单体化状态，2-只关闭弹窗取消高亮
        modalShowFollowBuilding: 'zoom', //zoom-zoom事件跟随，zoomend-zoomend事件跟随，null-不跟随单体化显隐
    },
    //弹框等样式设置
    theme: {
        //页面主题样式
        textNormalColor: "#32353C", //常规字体色
        textLightColor: "#999fae", //副标题字体色-比常规字体略浅
        textHoverColor: "#4859FF", //鼠标移入字体色
        textActiveColor: "#4859FF", //激活状态字体色
        normalIconColor: "#4859FF", //图标可用状态颜色
        disabledIconColor: "rgba(72,89,255,0.4)", //图标禁用状态颜色
        normalBgColor: "#ffffff", //面板背景色
        normalBorderColor: "#ffffff", //面板边框色
        activeBgColor: "rgba(72,89,255,0.6)", //选中状态背景色
        activeTextColor: "#ffffff", //选中状态背景色
        floorBorderColor: "#BAC0FA", //楼层边框色
        floorBgColor: "rgba(72,89,255,0.1)", //楼层面板背景色
        unitSplitColor: "#E6E9F0", //单元分割线色
        textArrowTipColor: "#7380FF", //楼层面板边框色
        textArrowTipStyle: 'simple'  // complex-三箭头样式，simple-单箭头
    },
},

信息接收

<floor-structure
  :options="settings"
  @info="getExtrusionInfo"
  @buildingInfo="getBuildingInfo"
  @buildingFlag="getBuildingFlag"
  @error="getErrorInfo"
  @close="closeModalHandle"
  @zoomFlag="setMarkerShowHandle"
  @mapLoaded="mapLoadedHandle"
  ref="floor-structure"
>
    <!-- 你的内容 -->
</floor-structure>

• buildingFlag: 当前建筑物是否有单体化信息，1-有，0-无
• buildingInfo: 点击白膜建筑获取具体楼栋信息(单元数、层数、房间数、楼栋中心点)
• info: 选中具体单元、层、房间，抛出当前选中信息(type:unit-单元、floor-层、room-房间， data: 具体信息 buildingId、buildingName、unit、floor、room)
• zoomFlag: 根据地图 zoom 缩放，达到单体化显隐的地图级别，抛出信息：true-显示、false-隐藏
• mapLoaded: 地图初始化完成，抛出地图对象map
• close: 弹窗关闭抛出信号
• error: 抛出的错误信息

已有地图容器接入

• 执行 setMapLoaded 传入已有地图对象
• 将地图容器放入 floor-structure 标签内(使 marker 样式生效)

  <floor-structure
   :options="settings"
   ref="floor-structure"
   >
  <MapContainer @loaded="setMapLoaded" />
  </floor-structure>

自定义交互

1、 使用已有地图对象

//如果使用已有地图对象，需要在地图加载完成后将map对象赋值给组件
this.$refs["floor-structure"].setMapLoaded(map);

2、 清除弹窗保留单体化

this.$refs["floor-structure"].clearModalOnly();

3、 动态清除单体化和弹窗信息

this.$refs["floor-structure"].clearBuildingExtrusion();

4、 动态单体化高亮

/**
 * 动态单体化高亮
 * @param {String} buildingId 建筑物ID
 * @param {Number} unitNum 单元号
 * @param {Number} floorNum 楼层号
 * @returns void
 */
this.$refs["floor-structure"].clearBuildingExtrusion(
    buildingId,
    unitNum,
    floorNum
);

5、 动态清除单体化高亮

this.$refs["floor-structure"].resetBuildingExtrusion();

6、 动态清除房间高亮

this.$refs["floor-structure"].resetZoomActive();

7、 控制白模建筑物显隐

/**
 * 控制白模建筑物显隐
 * @param {Boolean} extrusionShow 是否显示
 * @returns void
 */
this.$refs["floor-structure"].setExtrusionPbfState(isExtrusionShow);

8、 更改主题颜色配置

/**
 * 更改主题颜色配置
 * @param {Object} options 新配置项
 * @returns void
 */
this.$refs["floor-structure"].resetOptions(newOptions);