Kendo Map API добавляет метку к пути

Я использую Kendo map API и могу нарисовать путь между двумя точками.

Мне нужен ярлык на пути, я смог принести ярлык kendo.drawing.Text и kendo.drawing.Group.

Но не в состоянии правильно его расположить.

Может кто-нибудь подсказать, как мне поступить.

Я хочу что-то похожее на Google Map API Polyline с меткой с Kendo Map

Мне нужны данные.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 ответов

Другие вопросы по тегам