如何使用kendo在MVC中的多个标记之间绘制路径 [英] How to draw route between multiple markers in MVC using kendo
本文介绍了如何使用kendo在MVC中的多个标记之间绘制路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
一般将Line绘制到标记位置，但我想如何在MVC之间使用kendo绘制
多个标记之间的路径
行到标记位置源代码：
Map.cshtml ：
< ！DOCTYPE html >
< html >
< head >
< meta charset = utf-8 <温泉n class =code-keyword> / >
< 标题 > Kendo UI代码段< / title >
< link rel = 样式表 href = https://kendo.cdn.telerik.com/2018.2 .620 / styles / kendo.common.min.css / >
< link rel = stylesheet href = < span class =code-keyword> https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css / >
< 链接 rel = stylesheet href = https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css / >
< link rel = 样式表 href = https://kendo.cdn.telerik.com/2018.2.620/styles /kendo.mobile.all.min.css\" / >
< script < span class =code-attribute> src = https://code.jquery.com/ jquery-1.12.4.min.js > < / script >
< script src = https://kendo.cdn.telerik.com/2018.2.620/ js / kendo.all.min.js > < / script >
< / head >
< body >
< div id = map > < / div >
< script >
$（ #map）。kendoMap（ {
center：[ 18 。 89 ， - 72。 19 ]，
缩放： 5 ，
图层：[{
类型： shape，
dataSource：{
type： geojson，
transport：{
read： http://output.jsbin.com/zuguhajiye.js
}
}
}，{
类型： marker，
dataSource：{
data：[{
location ：[ 20 。 69 ， - 70。 96 ]，
title： Foo，
pointTo：[ 18 。 89 ， - 72。 19 ]
}]，
locationField： location，
titleField： title
}
}]，
重置： function （e）{
var map = e.sender;
var markers = map.layers [ 1 ]。items;
for （ var i = 0 ; i< markers.length; i ++）{
linkMarker（map，markers [i]）;
}
}
}）;
function linkMarker（map，marker）{
var 数据= marker.dataItem;
if （data.pointTo）{
// 将纬度/长度位置转换为屏幕上的坐标
// 参见：http：//docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView
var from = map .locationToView（marker。 location （））;
var to = map.locationToView（data.pointTo）;
// 在形状图层上绘制路径
< span class =code-comment> // 请参阅：http：//docs.telerik.com/kendo-ui/api/dataviz/drawing/path
// http://docs.telerik.com/kendo-ui/getting-started/ dataviz / drawing / basic-shapes
var shapeLayer = map.layers [ 0 ];
var line = new kendo.dataviz.drawing.Path（{
stroke ：{
color： #aaa，
width： 4 ，
lineCap： round
}
}）;
line.moveTo（from）.lineTo（to）;
shapeLayer.surface.draw（line）;
}
}
< / script >
< / body >
< / html >
最后我需要使用剑道在MVC中的多个标记之间绘制路线。
请帮帮我。
谢谢你。
我的尝试：
一般来说将线绘制到标记位置但我想如何使用kendo
解决方案
>
>
（ #map）。kendoMap（{
center：[<跨度class =code-digit> 18 。 89 ， - 72。 19 ]，
zoom： 5 ，
layers：[{
type： shape，
dataSource：{
type： geojson，
transport：{
read： http://output.jsbin.com/zuguhajiye.js
}
}
}，{
类型： marker，
dataSource：{
data：[{
location ：[ 20 。 69 ， - 70。 96 ]，
title： Foo，
pointTo：[ 18 。 89 ， - 72。 19 ]
}]，
locationField： location，
titleField： < span class =code-string> title
}
}]，
重置： function （e ）{
var map = e.sender;
var markers = map.layers [ 1 ]。items;
for （ var i = 0 ; i< markers.length; i ++）{
linkMarker（map，markers [i]）;
}
}
}）;
function linkMarker（map，marker）{
var 数据= marker.dataItem;
if （data.pointTo）{
// 将纬度/长度位置转换为屏幕上的坐标
// 参见：http：//docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView
var from = map .locationToView（marker。 location （））;
var to = map.locationToView（data.pointTo）;
// 在形状图层上绘制路径
< span class =code-comment> // 请参阅：http：//docs.telerik.com/kendo-ui/api/dataviz/drawing/path
// http://docs.telerik.com/kendo-ui/getting-started/ dataviz / drawing / basic-shapes
var shapeLayer = map.layers [ 0 ];
var line = new kendo.dataviz.drawing.Path（{
stroke ：{
color： #aaa，
width： 4 ，
lineCap： round
}
}）;
line.moveTo（from）.lineTo（to）;
shapeLayer.surface.draw（line）;
}
}
< / script >
< / body >
< / html >
最后我需要使用剑道在MVC中的多个标记之间绘制路线。
请帮帮我。
谢谢你。
我的尝试：
一般来说将线绘制到标记位置，但我想如何在MVC之间使用kendo在
多个标记之间绘制路径
你只需要一个以上的点就可以了 - 否则没有路线...
数据：[{
location ：[ 20 。 69 ， - 70. 96 ]，
title： Foo
}，
{
location ：[ 22 . 69 ， - 77。 96 ]，
title： Next Foo
}，
{
location ：[ 12 。 69 ， - 67。 96 ]，
title： Next Next Foo
}]，
如果你想画两点之间的线，你必须传递两个点（标记）到绘图方法...所以运行你的循环到一个前一个元素.. 。
for （ var i = 0 ;我< markers.length - 1 ; i ++）{
linkMarker（map，markers [i]，markers [i + 1 ]）;
}
和绘图功能：
< span class =code-keyword> function linkMarker（map，marker，nextMarker）{
var data = marker.dataItem;
var nextData = nextMarker.dataItem;
var dataFrom = map.locationToView（marker。 location （））;
var nextDataFrom = map.locationToView（nextMarker。 location （））;
var shapeLayer = map.layers [ 0 ];
var line = new kendo.dataviz.drawing.Path（{
stroke ：{
color： #aaa，
width： 4 ，
lineCap： round
}
}）;
line.moveTo（dataFrom）.lineTo（nextDataFrom）;
shapeLayer.surface.draw（line）;
}
Generally draw the Line to marker location but i want to how to draw route between
multiple markers in MVC using kendo
Line to marker location source code:
Map.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
$("#map").kendoMap({
center: [18.89, -72.19],
zoom: 5,
layers: [{
type: "shape",
dataSource: {
type: "geojson",
transport: {
read: "http://output.jsbin.com/zuguhajiye.js"
}
}
}, {
type: "marker",
dataSource: {
data: [{
location: [20.69, -70.96],
title: "Foo",
pointTo: [18.89, -72.19]
}],
locationField: "location",
titleField: "title"
}
}],
reset: function(e) {
var map = e.sender;
var markers = map.layers[1].items;
for (var i = 0; i < markers.length; i++) {
linkMarker(map, markers[i]);
}
}
});
function linkMarker(map, marker) {
var data = marker.dataItem;
if (data.pointTo) {
// Convert lat/long locations to coordinates on the screen
// See: http://docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView
var from = map.locationToView(marker.location());
var to = map.locationToView(data.pointTo);
// Draw a path on the shape layer
// See: http://docs.telerik.com/kendo-ui/api/dataviz/drawing/path
// http://docs.telerik.com/kendo-ui/getting-started/dataviz/drawing/basic-shapes
var shapeLayer = map.layers[0];
var line = new kendo.dataviz.drawing.Path({
stroke: {
color: "#aaa",
width: 4,
lineCap: "round"
}
});
line.moveTo(from).lineTo(to);
shapeLayer.surface.draw(line);
}
}
</script>
</body>
</html>
Finally i need draw route between multiple markers in MVC using kendo.
please help me.
thank u.
What I have tried:
Generally draw the Line to marker location but i want to how to draw route between
multiple markers in MVC using kendo
解决方案
("#map").kendoMap({ center: [18.89, -72.19], zoom: 5, layers: [{ type: "shape", dataSource: { type: "geojson", transport: { read: "http://output.jsbin.com/zuguhajiye.js" } } }, { type: "marker", dataSource: { data: [{ location: [20.69, -70.96], title: "Foo", pointTo: [18.89, -72.19] }], locationField: "location", titleField: "title" } }], reset: function(e) { var map = e.sender; var markers = map.layers[1].items; for (var i = 0; i < markers.length; i++) { linkMarker(map, markers[i]); } } }); function linkMarker(map, marker) { var data = marker.dataItem; if (data.pointTo) { // Convert lat/long locations to coordinates on the screen // See: http://docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView var from = map.locationToView(marker.location()); var to = map.locationToView(data.pointTo); // Draw a path on the shape layer // See: http://docs.telerik.com/kendo-ui/api/dataviz/drawing/path // http://docs.telerik.com/kendo-ui/getting-started/dataviz/drawing/basic-shapes var shapeLayer = map.layers[0]; var line = new kendo.dataviz.drawing.Path({ stroke: { color: "#aaa", width: 4, lineCap: "round" } }); line.moveTo(from).lineTo(to); shapeLayer.surface.draw(line); } } </script> </body> </html>
Finally i need draw route between multiple markers in MVC using kendo.
please help me.
thank u.
What I have tried:
Generally draw the Line to marker location but i want to how to draw route between
multiple markers in MVC using kendo
First of all you need more than one point to work with - otherwise there is no route...
data: [{ location: [20.69, -70.96], title: "Foo" }, { location: [22.69, -77.96], title: "Next Foo" }, { location: [12.69, -67.96], title: "Next Next Foo" }],
If you want to draw a line between two point you have to pass two points (markers) to the drawing method... So run your loop up to one-before-the-last elements...
for (var i = 0; i < markers.length - 1; i++) { linkMarker(map, markers[i], markers[i + 1]); }
And the drawing function:
function linkMarker(map, marker, nextMarker) { var data = marker.dataItem; var nextData = nextMarker.dataItem; var dataFrom = map.locationToView(marker.location()); var nextDataFrom = map.locationToView(nextMarker.location()); var shapeLayer = map.layers[0]; var line = new kendo.dataviz.drawing.Path({ stroke: { color: "#aaa", width: 4, lineCap: "round" } }); line.moveTo(dataFrom).lineTo(nextDataFrom); shapeLayer.surface.draw(line); }
这篇关于如何使用kendo在MVC中的多个标记之间绘制路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
