Kendo Map API将标签添加到路径中

时间:2016-01-19 14:14:35

标签: jquery google-maps-api-3 kendo-ui kendo-map

我正在使用Kendo map API,我能够在两个位置之间绘制路径。

我需要在路径上贴一个标签,我能够带上标签 kendo.drawing.Text kendo.drawing.Group

但无法正确定位。

任何人都可以建议我该怎么做。

我想要一些类似于谷歌地图API 折线的东西,标签带有剑道地图

我需要data.TripCount位于每个数据路径的中心或附近

代码:

var geom = kendo.geometry;
var draw = kendo.drawing;

$("#map").kendoMap({
  center: [41.397, 69.644],
  zoom: 4,
  layers: [{
    type: "tile",
    urlTemplate: "http://tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
    subdomains: ["a", "b", "c"],
    attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
  }, {
    type: "shape",
    dataSource: {
      type: "geojson",
      transport: {
        read: "http://output.jsbin.com/zuguhajiye.js"
      }
    }
  }, {
    type: "marker",
    dataSource: {
      data: [{
        location: [60.0000, 90.0000],
        title: "Foo",
        pointTo: [26.8333, 30.3333],
        tripCount: 2
      }, {
        location: [29.672811, 56.00091],
        title: "Foo",
        pointTo: [40.139477, 79.434243],
        tripCount: 10
      }],
      locationField: "location",
      titleField: "title"
    }
  }],
  reset: function(e) {
    var map = e.sender;
    var markers = map.layers[2].items;

    for (var i = 0; i < markers.length; i++) {
      linkMarker(map, markers[i]);
    }
  }
});

function linkMarker(map, marker) {
  var data = marker.dataItem;
  if (data.pointTo) {
    var from = map.locationToView(marker.location());
    var to = map.locationToView(data.pointTo);
    var shapeLayer = map.layers[1];
    var line = new kendo.dataviz.drawing.Path({
      stroke: {
        color: "#FF0000",
        width: 4,
        lineCap: "round"
      }
    });
    line.moveTo(from).lineTo(to);

    var text = new draw.Text(
      data.tripCount,
      new geom.Point(to, to), {
        font: "bold 15px Arial"
      }
    );

    // Place all the shapes in a group
    var group = new draw.Group();
    group.append(line, text);

    // Translate the group
    group.transform(
      geom.transform().translate(to, to)
    );

    shapeLayer.surface.draw(group);
  }
}

0 个答案:

没有答案