首页 / 浏览问题 / WebGIS / 问题详情
使用iclient for openlayers创建标签专题图报错
11EXP 2023年08月02日

在使用iclient for openlayers过程中报错,相关代码如下:

        map.once('postrender', function () {
            var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
            getFeatureParam = new ol.supermap.FilterParameter({
                attributeFilter: attributeFilterStr
            });
            getFeatureBySQLParams = new ol.supermap.GetFeaturesBySQLParameters({
                queryParameter: getFeatureParam,
                toIndex: 500,
                datasetNames: [pt_dsname]
            });
            getFeatureBySQLService = new ol.supermap.FeatureService(pt_url).getFeaturesBySQL(
                getFeatureBySQLParams,
                processCompleted,
                ol.supermap.DataFormat.ISERVER
            );
        });
        function processCompleted(getFeaturesEventArgs) {
            var result = getFeaturesEventArgs.result;
            // 用户数据库中查到的报警状态更新对应的属性值
            result.features.forEach(function(f){
                f.fieldValues[4] = pt_alarm_dic[f.fieldValues[3]];
            })
            addPointUniqueThemeLayer(result.features);
            addLabelTheme(result.features);
        }
        function addPointUniqueThemeLayer(features){
            themeSource = new ol.source.Unique("ThemeLayer", {
                map: map,
                themeField: "ALARM",
                styleGroups: [
                    {
                        value: 0,
                        style: {
                            fillColor: "#00B050"
                        }
                    },
                    {
                        value: 1,
                        style: {
                            fillColor: "#FFF200"
                        }
                    },
                    {
                        value: 2,
                        style: {
                            fillColor: "#F1BD1D"
                        }
                    },
                    {
                        value: 3,
                        style: {
                            fillColor: "#FF0000"
                        }
                    }

                ]
            });
            themeSource.addFeatures(features);
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            map.addLayer(themeLayer);
        }
        function addLabelTheme(features)
        {
            themeSource = new ol.source.Label("labelThemeLayer", {
                map: map,
                style: new ol.supermap.ThemeStyle({
                    labelRect: true,
                    fontColor: "#000000",
                    fontWeight: "bolder",
                    fontSize: "18px",
                    fill: true,
                    fillColor: "#FFFFFF",
                    fillOpacity: 1,
                    stroke: false,
                    strokeColor: "#8B7B8B"
                }),
                themeField: "PTNO"
            });
            themeSource.addFeatures(features);  //features已经正常获取,这一句报错
            themeLayer = new ol.layer.Image({
                source: themeSource
            });
            map.addLayer(themeLayer);
        }

报错信息如下: 

iclient-ol-es6.min.js:1663 Uncaught TypeError: t.getCentroid is not a function
    at Sd.getLabelPxLocation (iclient-ol-es6.min.js:1663:4702)
    at Sd.getDrawnLabels (iclient-ol-es6.min.js:1663:1757)
    at Sd.redrawThematicFeatures (iclient-ol-es6.min.js:1663:1274)
    at Sd.r (iclient-ol-es6.min.js:1627:330)
    at n.getImageInternal (ImageCanvas.js:128:48)
    at n.getImage (Image.js:186:19)
    at n.prepareFrame (ImageLayer.js:89:35)
    at n.render (Layer.js:280:23)
    at n.renderFrame (Composite.js:125:29)
    at n.Wi (PluggableMap.js:1550:7)

1个回答

您好

如果您是想如果调用服务的方式来实现标签专题图建议您参考范例中的服务端标签专题图https://iclient.supermap.io/examples/openlayers/editor.html#03_themeLabel

示例中客户端专题图是提前写好的JSON数据,如下图

若您仍想创建客户端专题图,需要新建一个js,手写类似于下图的数据

然后再引入到html中

希望可以帮到您

280EXP 2023年08月02日
为什么单值专题图就可以直接把服务器返回的数据加进去,标签专题图就不行?技术上应该是可以实现的呀。我需要根据从其他关系型数据库中查出的信息来动态生成专题图,服务器端专题图很难实现这样的功能

您好

刚帮您看了一下示例代码中的features,在单值专题图中,其features为

在标签专题图中features为

而您的报错应该就与geometry有关,建议您参考示例代码中的如下部分

希望能够帮到您

...