天测时空大数据平台

# 功能模块

模块根据需求可以创建弹窗模式、无弹窗模式和嵌入模式，功能模块配置完成后，通过fast3dbase.widget.activate(options)来激活模块。

# 弹窗模式

以坐标定位功能为例： 在project/widgets下创建文件夹并命名为centerXY，在该文件夹下创建模块弹窗(view.html)、业务代码(view.js)、窗口样式(view.css)和地图交互代码(widget.js)。

# view.html

常规html写法，引入第三方库和样式文件，创建xyz输入框和确定按钮。

<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">

<head>
    <title>弹窗子页面</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="../../lib/include-lib.js?time=20180729" libpath="../../lib/"
            include="jquery,font-awesome,bootstrap,layer,haoutil"></script>
    <link href="../../css/widget-win.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">经度</span>
            <input type="number" id="point_lon" class="form-control" value="0" placeholder="请输入经度数值0-180" aria-describedby="basic-addon1" />
        </div>

        <div class="input-group">
            <span class="input-group-addon" id="basic-addon2">纬度</span>
            <input type="number" id="point_lat" class="form-control" value="0" placeholder="请输入纬度数值0-90" aria-describedby="basic-addon2" />
        </div>

        <div class="input-group">
            <span class="input-group-addon" id="basic-addon2">高度</span>
            <input type="number" id="point_height" class="form-control" value="0" placeholder="请输入高度值" aria-describedby="basic-addon2" />
        </div>

        <div class="input-group text-right">
            <input type="button" class="btn btn-primary" value="确定" onclick="submitXY()" />
        </div>
    </div>

    <script src="view.js?time=20180905"></script>
</body>
</html>

# view.js

业务代码，编写页面交互事件，通过thisWidget调用widget.js中地图交互事件

var thisWidget;
//当前页面业务
function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget;
    if (thisWidget.config && thisWidget.config.style) {//适应不同样式
        $("body").addClass(thisWidget.config.style);
    }
}

function centerAt(xy) {
    let lon = $("#point_lon").val(),
        lat = $("#point_lat").val(),
        height = $("#point_height").val(),
        val = { x: Number(lon), y: Number(lat), z: Number(height) };
    thisWidget.centerAt(val);
}

# widget.js

地图交互代码，继承模块基础类fast3dbase.widget.BaseWidget来实例化模块，并通过fast3dbase.widget.bindClass将创建的模块注册到模块管理器中。

options.view.type为window时为弹窗模式 options.view.windowOptions参数与config.json中相同，但优先级低于config.json

# 属性
属性名称 参数类型 说明
resources String[] 该模块依赖的外部js、css资源文件，会在实例化之前加入的页面中。 默认引用是当前widget所在目录的资源，相当于页面的资源或外部资源请以 “/” 或 “.” 或 “http” 开始命名
view Object/Array 定义模块的view页面配置信息，为空时表示当前模块无关联页面， 其中url地址规则，参考resources说明
# 方法
方法名 返回值 说明
init() void 模块初始化之前触发该方法，仅首次初始化执行1次
create() void 模块初始化，仅首次初始化执行1次
activateBase() void 激活模块初始方法，基类内部使用
beforeActivate() void activate激活模块之前调用，基类内部使用
activate() void 打开激活模块
winCreateOK(String opt,String result) void 每个view窗口或页面创建完成后调用
disableBase() void 释放模块初始方法，基类内部使用
beforeDisable() void disable释放模块之前调用，基类内部使用
disable() void 关闭释放模块
getHtml(String url,function callback) void 获取指定url的html信息
resetConfig() void 还原配置为config.json的初始状态
setViewVisible(Boolean visible) void 设置view弹窗或div的显示影藏，非释放方式
setViewCss(Object style) void 设置view弹窗的css,类同jquery的 $(dom).css(style)方
# 示例
//模块：
fast3dbase.widget.bindClass(fast3dbase.widget.BaseWidget.extend({
    options: {
        resources: [ 'view.css' ],
        //弹窗
        view: {
            type: "window",
            url: "view.html",
            windowOptions: {
                width: 210,
                height: 210
            }
        },
    },
    viewWindow: null,
    //每个窗口创建完成后调用
    winCreateOK: function (opt, result) {
        this.viewWindow = result;
    },
    //激活模块
    activate: function () {
    },
    //释放模块
    disable: function () {
        this.viewWindow = null;
    },
    centerAt: function (val) {
         viewer.mars.centerAt({ x: val.x, y: val.y });
    },
}));

# 无弹窗

以加载道路数据功能为例： 在project/widgets下创建文件夹并命名为loadRoad，在该文件夹下创建地图交互代码(widget.js)。

# widget.js

配置与弹窗模型相同，仅需要将view参数设置为空

//业务性演示功能
fast3dbase.widget.bindClass(fast3dbase.widget.BaseWidget.extend({
  options: {
    view: { }
  },
  layer: null,
  //初始化[仅执行1次]
  create: function () {
     var that = this;
  },
  handler: null,
  //打开激活
  activate: function () {
    var that = this;
    that.addGeoJson();
  },
  //关闭释放
  disable: function () {
    this.removeEffect();
    this.viewer.dataSources.remove(this.dataSources);
  },
  clear: function () {

  },
  entities: null,
  effects:[],
  //添加DynamicDivLabel
  addGeoJson: function () {
    let that = this; 
    Cesium.GeoJsonDataSource.load('./data/geojson/road.json').then(function (datasource) {
      that.dataSources = datasource
      that.entities = that.dataSources.entities.values;
      for (let i = 0; i < that.entities.length; i++) {
        let entity = that.entities[i];
        entity.polygon.fill = false;
        entity.polygon.outlineColor = Cesium.Color.RED;
        entity.polygon.outlineWidth = 5;
        entity.polygon.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 3200)
        entity.polygon.material=Cesium.Color.RED
        entity.polygon.outline=false,
        entity.polyline = {
          positions: entity.polygon.hierarchy._value.positions,
          width: entity.polygon.outlineWidth,
          material: new fast3dX.PolylineObject.PolylineArrowMaterialProperty({
            color: Cesium.Color.RED,
            duration: 2000,
            count: 3, //重复次数
            url: "./img/textures/arrow_01.png", //材质图片"
          }),
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 3200),
        };
      }
      viewer.dataSources.add(that.dataSources);
    });
    },
    removeEffect:function(){
      //特效清除
      let i=this.effects.length;
      while(i--){
        let item=this.effects[i];
        if(item.clear){
          item.clear();
        }
        if(item.remove){
        item.remove();
        }
        if(item.windowClose){
        item.windowClose();
        }
        this.effects.splice(i,1);
      }
  },
}));

# 嵌入页面

以地图打印功能为例： 在project/widgets下创建文件夹并命名为mapPrint，在该文件夹下创建模块弹窗(view.html)、窗口样式(view.css)和地图交互代码(widget.js)。

# view.html

<div class="printBar animation-slide-top no-print">
    <button id="btn_print_start" type="button" class="btn btn-default">
        <span class="fa fa-print" aria-hidden="true"></span> 打印
    </button>
    <button id="btn_print_close" type="button" class="btn btn-default">
        <span class="fa fa-remove" aria-hidden="true"></span>
    </button>
</div>

# widget.js

options.view.type为append时为弹窗模式

var toolPrint = fast3dbase.widget.bindClass(fast3dbase.widget.BaseWidget.extend({
    options: {
        resources: [
            'view.css',
        ],
        view: [
            { type: "append", url: "view.html" }
        ],
    }, 
    //初始化[仅执行1次]
    create: function () {
    },
    winCreateOK: function (opt, result) {
        var that = this;
        $("#btn_print_start").click(function () {
            that.printview();
        });
        $("#btn_print_close").click(function () {
            that.disableBase();
        });
    },
    //激活模块
    activate: function () {
        
    },
    //释放模块
    disable: function () {

    },

    printview: function () { 
        window.print();
    },

}));
Last Updated: 6/21/2024, 5:48:01 PM

← 说明 →