我正在使用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: "© <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);
}
}