# xd-view
> 一般在 webpack 入口页面 `main.js` 中如下配置：
Latest version **0.4.0** (published 2022-07-06) · MIT license · 0 weekly downloads
## Install
```sh
npm install xd-view
pnpm add xd-view
yarn add xd-view
bun add xd-view
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.4.0 |
| Published | 2022-07-06 |
| First published | 2022-07-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 149.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | wkiss |
## Links
- npm: https://www.npmjs.com/package/xd-view
- npm.io page: https://npm.io/package/xd-view
## Dependencies (8)
- [vue](https://npm.io/package/vue.md) ^2.6.11
- [vuex](https://npm.io/package/vuex.md) ^3.4.0
- [three](https://npm.io/package/three.md) ^0.128.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [vue-router](https://npm.io/package/vue-router.md) ^3.2.0
- [superapi-51world](https://npm.io/package/superapi-51world.md) ^4.1.2
- [three-obj-mtl-loader](https://npm.io/package/three-obj-mtl-loader.md) ^1.0.3
- [babel-plugin-transform-remove-strict-mode](https://npm.io/package/babel-plugin-transform-remove-strict-mode.md) ^0.0.2
## Recent versions
- 0.4.0 (latest) — 2022-07-06
- 0.3.9 — 2022-07-05
- 0.3.8 — 2022-07-05
- 0.3.7 — 2022-07-05
- 0.3.6 — 2022-07-05
- 0.3.5 — 2022-07-04
## README
### 引入 xinda-datav
一般在 webpack 入口页面 `main.js` 中如下配置：
```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 中引入如下：
```html
```
### mian-page
虽然这是一个库，但是只有一个 mian-page 组件。这个组件既可以加载百度地图也可以加载 Cesium.js，它会便于你开发你的可视化页面，你可以直接把它用在你的可视化页面上：
```html
```
### 属性
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 | | 宽度 |
---
_Source: https://npm.io/package/xd-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._