0.4.0 • Published 4 years ago

xd-view

Licence

MIT

Version

0.4.0

Deps

Size

150 kB

Vulns

Weekly

Summary Dependency Versions

引入 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	宽度