代码之家 › 专栏 › 技术社区 › Yuva

将分析图模型与UI5中的OData服务绑定

sapui5 html javascript

Yuva · 技术社区 · 6 年前

我是新来的 UI5 开发工具,我正在尝试将着色规则函数与组成地图的区域绑定在一起。

名为的着色函数 oColor() 位于 格式化程序.js (我通过控制器呼叫)。

地图被成功地淹没在 视图.js (nb:not.xml)使用 sap.ui.vbm.AnalyticMap() 函数和 国家.json 有关时代的档案。

这个 奥达塔 设置在 init 的节 组件.js 具有以下功能:

var oModelInputless = new sap.ui.model.odata.v2.ODataModel({
                serviceUrl: "http://server:port/path/Inputless.xsodata",
                json: true,
                defaultBindingMode: sap.ui.model.BindingMode.TwoWay
            });
            sap.ui.getCore().setModel(oModelInputless, "/Inputless");

它包含一个名为数据 .有用的属性命名为: 身份证件 , 部和比率 .

我想根据比例(函数应该将其作为参数接收)给地图的区域着色 OColor()。 但我不知道该怎么做。

这是我的 视图.js:

sap.ui.jsview("package.view.main", {

/* Specifies the Controller belonging to this View. 
 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
 * @memberOf controller.main
 */
getControllerName: function() {
    return "Laposte.controller.main";
},

/* Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
 * Since the Controller is given to this method, its event handlers can be attached right away.
 * @memberOf controller.main
 */
createContent: function(oController) {

    // set the geojson location to some data
    jQuery.sap.require("sap.ui.vbm.AnalyticMap");
    // Map GeoJSON
    sap.ui.vbm.AnalyticMap.GeoJSONURL = "./map/country.json";

    var oRegion = new sap.ui.vbm.Region({
        code: "{id}",
        color: {
                parts: [
                    {path: "ratio"}
                ],
                formatter: oController.formatter.oColor
            },
        tooltip: "ratio"
    });

    var oVBI1 = new sap.ui.vbm.AnalyticMap('vbi', {
        width: "100%",
        height: 1000,
        plugin: false,
        centerPosition: "2.2137;46.2276",
        zoomlevel: 6,
        regions : {
                    path : "/Inputless/Data",
                    template: oRegion
                }

    });

    var oPage = new sap.m.Page({
        title: "{i18n>title}",
        content: [oVBI1]
    });

    var app = new sap.m.App("myApp", {
        initialPage: "oPage"
    });
    app.addPage(oPage);
    return app;
  }
});

我被告知使用 bindAggregation 方法和 parameters : {select DEPT,QSperc} 在参数中区域我的地图 oVBI1 但我不知道怎么做

1 回复 | 直到 6 年前

Yuva 6 年前

var oModelInputless = new sap.ui.model.odata.v2.ODataModel("http://server:port/path/Inputless.xsodata",{
    json: true,
    useBatch: false,
    defaultBindingMode: "None"
});
sap.ui.getCore().setModel(oModelInputless, "Inputless");

//set the device model
this.setModel(models.createDeviceModel(), "device");

//instanciation the map in the Component.js but not in the view
sap.ui.getCore().byId("vbi").setModel(oModelInputless, "Inputless");
sap.ui.getCore().byId("vbi").bindAggregation("regions", {
    path: "Inputless>/Data",
    template: sap.ui.getCore().byId("region"),
    parameters: {
        select: "dpt,ratio"
    }
});

/* Specifies the Controller belonging to this View. 
 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
 * @memberOf controller.main
 */
getControllerName: function() {
    return "package.controller.main";
},

/* Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
 * Since the Controller is given to this method, its event handlers can be attached right away.
 * @memberOf controller.main
 */
createContent: function(oController) {

    // set the geojson location to some data
    jQuery.sap.require("sap.ui.vbm.AnalyticMap");
    // Map GeoJSON
    sap.ui.vbm.AnalyticMap.GeoJSONURL = "./map/country.json";

    //region template
    var oRegion = new sap.ui.vbm.Region("region", {
        code: "{Inputless>DEPT}",
        color: { // fixÃ© en rajoutant data-sap-ui-bindingSyntax="complex" au index.html
            parts: ["Inputless>QSperc"],
            formatter: oController.formatter.qsColor
        },
        tooltip: "{Inputless>QSperc}"
    });

    var oVBI1 = new sap.ui.vbm.AnalyticMap('vbi', {
        width: "100%",
        height: 1000,
        plugin: false,
        centerPosition: "2.2137;46.2276",
        zoomlevel: 6,
        vos: [oSpots] 
    });
    var oPage = new sap.m.Page({
        title: "{i18n>title}",
        content: [oVBI1]
    });

    var app = new sap.m.App("myApp", {
        initialPage: "oPage"
    });
    app.addPage(oPage);
    return app;
    }
});