pgis-floor-structure v1.0.4

pgis-floor-structure

安装

npm 推荐使用npm，这样可以跟随你的webpack配置去选择怎样打包。

npm i -D pgis-floor-structure

注册组件

1. minemap 引擎引入

 <link rel="stylesheet" href="minemap.css">
<script src="minemap-3.4.0.js"></script>

2. 全局注册

   <template>
     <floor-structure>
       <!-- 你的内容 -->
     </floor-structure>
   </template>
   <script>
   import floorStructure from "pgis-floor-structure";
   import "pgis-floor-structure/floor-structure.css";
   Vue.use(floorStructure);
   </script>

属性

options

• 类型Object

• 默认值:

{
    serviceUrl: "//192.168.154.104:9004/ga", //服务接口地址
        mapUrl: "//10.130.19.143", // minedata(以下涉及此地址均需要更改)
        mapSolution: 13706,
        mapToken: "ca78282dfff148e3be5390ce027068f5", //minedataToken
        mapCenter: [120.1325381, 33.364939], //地图初始中心点
        mapZoom: 11, //地图初始化zoom级别
        mapProjection: "LATLON", //投影方式
        // 地图初始状态显示
        mapState: {
        zoom: 17.2,
            pitch: 60,
            bearing: 144
    },
    // 倾斜摄影和单体化设置
    extrusionStyle: {
        tileShow: true, //是否显示倾斜摄影
            tileUrl: "http://10.130.19.143/osgb/yancheng/tileset.json", //倾斜摄影地址
            normalColor: "#233f67",
            activeColor: "#00ffb7"
    },
    // 地图控制器样式
    mapControl: {
        right: "16",
            bottom: "16",
            bgColor: "#242e42",
            borderColor: "#303540"
    },
    // 页面主题样式
    theme: {
        textColor: "#ffffff", //字体背景色
            bgColor: "rgba(14, 57, 145, 0.9)", //面板背景色
            borderColor: "#407fff", //边框背景色
            shadowColor: `rgba(10, 28, 73, 0.6)`, //面板阴影背景色
            titleBgColor: `rgba(17,65,162,.9)`, //面板标题背景色
            selectedItemBgColor: `#1860d7`, //列表选中状态背景色
    }
}

• 用法:

  <floor-structure :options="opts" @info="getBuildingInfo">
    <!-- 你的内容 -->
  </floor-structure>

• 如何添加自定义交互: 如上通过info对外暴露了点击户室操作获取到的信息， 可基于此可自行添加定制化交互

  getBuildingInfo(data) {
  //data为点击户室获取到的户室信息
  }