使用 Kendo UI 从 geojson 创建气泡

Question

我有一个包含点集合的 geojson 文件：

{
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "name": "Point one",
      },
      "geometry": {
        "type": "Point",
        "coordinates": [13,52]
      }
    },...

默认情况下，这些点显示为标准位置标记。

$("#map").kendoMap({
            center: [52, 13],
            zoom: 10,
            layers: [{
                type: "shape",
                dataSource: {
                    type: "geojson",
                    transport: {
                        read: function(e) {
                            e.success(myPoints);
                        }
                    }
                }
            }]
        });     
    });

但我想将点显示为气泡。寻找； how to display geojson data with kendo ui, 然后我只找到图层type: shape结合geojson多边形的教程。如果我读到 kendo ui tutorials for type bubble，那么有一个值字段来定义半径，这在 geojson 数据中没有定义。如何编辑geojson点的标准标记显示？或者如何根据 geojson 数据输入设置气泡层的属性？

Answer 1

通过layerDefaults.marker.shape you can customize the marker and even set a custom icon for the marker, as shown here.

要显示不同大小的气泡，请添加带有 GeoJSON 地图和气泡层的 bubble layer. Here is a dojo，气泡直径基于人口值。

编辑：气泡层需要以下格式的数据

[
  {
    "City":"City A",
    "Country":"USA",
    "MyValueField":123456789,
    "MyLocationField":[
       45.2,
       24.33
    ]
  },
  {
    "City":"City B",
    "Country":"USA",
    "MyValueField":123456789,
    "MyLocationField":[
     34.47,
     95.28
    ]
  }
]

如果端点 returns 数据格式不同，您可以使用 schema.parse 函数以预期格式解析响应：

          {
            type: "bubble",
            dataSource: {
                transport: {
                    read: {
                        url: "https://get/my/data",
                        dataType: "json"
                    }
                },
              schema: {
                parse: function(response) {
                  // parse response to match expected format
                  return response;
                }
              }
            },
            locationField: "MyLocationField", //The Map accepts a [Latitude, Longitude] format for its locations field 
            valueField: "MyValueField"
          }

使用 Kendo UI 从 geojson 创建气泡

Create bubbles from geojson with Kendo UI

kendo-ui

geojson