xinda-datav
v0.3.0
Published
一般在 webpack 入口页面 `main.js` 中如下配置：
Downloads
37
Readme
引入 xinda-datav
一般在 webpack 入口页面 main.js 中如下配置：
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Xinda from "xinda-datav";
import "xinda-datav/lib/plugintest.css";
Vue.use(Xinda);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");特别提示
库内用到了，百度地图 Api 和 Cesium.js 因此您需要在 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>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>
<link
href="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
</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 | | 缩放比例 | | pixelOffset | Array | [0,0] | 偏移量[x,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 | | 宽度 |