0.4.0 • Published 2 years ago
xd-view v0.4.0
引入 xinda-datav
一般在 webpack 入口页面 main.js 中如下配置：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import XdView from "xd-view";
import "xd-view/lib/plugintest.css";
Vue.use(XdView);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");特别提示
库内用到了，百度地图 Api 因此您需要在 public 中的 index.html 中引入如下：
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的Key密钥"
></script>
</head>mian-page
虽然这是一个库，但是只有一个 mian-page 组件。这个组件既可以加载百度地图也可以加载 Cesium.js，它会便于你开发你的可视化页面，你可以直接把它用在你的可视化页面上：
<template>
<div class="home">
<main-page
:map="false"
:init_3d="init_3d"
titleName="实例标题"
:titleBlock="true"
>
<!--你的代码-->
</main-page>
</div>
</template>属性
mian-page 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| map | Boolean | true | true：百度地图；false：Cesium3D |
| titleBlock | Boolean | true | 是否要显示标题 |
| titleName | String | 标题的名称 | |
| url_3d | String | 加载 3D 模型的路径（目前只支持 B3DM 格式） | |
| init_3d | init_3d | 初始化 Cesium3D 的参数 | |
| model_3d | model_3d | 初始化 3D 模型的参数 | |
| sign_3d | sign_3d | 添加自定义图标 | |
| enclosure_3d | enclosure_3d | 添加电子围栏 | |
| line_3d | line_3d | 绘制路径 |
init_3d 类型
加载 Cesium3D 的参数
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| longitude | Number | 经度 | |
| latitude | Number | 纬度 | |
| viewHeight | Number | 试点高度 | |
| rotationAngle | Number | 旋转角度 | |
| viewAngle | Number | 视角角度 | |
| defaultLocation | Boolean | true | 是否开启自动定位（已加载 3D 模型） |
| fullscreenButton | Boolean | true | 是否显示全屏按钮 |
| ··· | ··· | ··· | ··· |
model_3d 类型
加载 3D 模型的参数
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| height | Number | 0 | 3D 模型距离地面的高度 |
| ··· | ··· | ··· | ··· |
sign_3d 类型
加载 3D 图标的参数
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | String | 单击事件中返回的标识 | |
| name | String | 图标的名称 | |
| longitude | String | 经度 | |
| latitude | String | 纬度 | |
| signHeight | String | 标记高度 | |
| image | String | 图标地址 | |
| pixelOffset | Array | 0,0 | 偏移量x,y |
| horizontalOption | String | 水平图标的位置：LEFT-左、RIGHT-右、CENTER-中 | |
| verticalOption | String | 垂直图标的位置：CENTER-中间、TOP-顶部、BOTTOM-底部 | |
| scale | Number | 缩放比例 | |
| show | Boolean | true | 是否显示 |
| width | Number | 宽 | |
| height | Number | 高 | |
| label | Label_3d | 文字提示 | |
| ··· | ··· | ··· | ··· |
Label_3d 类型
文字的参数
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| text | String | 文本内容 | |
| font | String | 字体 | |
| scale | Number | 缩放比例 | |
| pixelOffsetX | Number | X轴偏移量 | |
| pixelOffsetY | Number | Y轴偏移量 | |
enclosure_3d 类型
电子围栏的参数
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | String | 唯一标识 | |
| name | String | name | |
| data | Array | 二维数组[ longitude,latitude,··· ] | |
| color | String | 电子围栏的颜色 | |
| height | Number | 300 | 电子围栏的高度 |
| isAnimation | Boolean | false | 是否开启动画 |
line_3d 类型
绘制路径的参数
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | String | 唯一标识 | |
| name | String | name | |
| data | Array | 二维数组[ x,y,z,···] | |
| color | String | 颜色 | |
| opacity | Number | 不透明度 | |
| width | Number | 宽度 |