Krishna Veni Ответов: 1

Как нарисовать маршрут между несколькими маркерами в MVC с помощью kendo

Как правило, нарисуйте линию до местоположения маркера, но я хочу, как нарисовать маршрут между ними

несколько маркеров в MVC с использованием kendo

Строка к исходному коду местоположения маркера:

Карте.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>


Наконец, мне нужно нарисовать маршрут между несколькими маркерами в MVC с помощью kendo.

пожалуйста, помогите мне.

спасибо тебе.

Что я уже пробовал:

Как правило, нарисуйте линию до местоположения маркера, но я хочу, как нарисовать маршрут между ними

несколько маркеров в MVC с использованием kendo

1 Ответов

Рейтинг:
0

Kornfeld Eliyahu Peter

Прежде всего, вам нужно работать с несколькими точками - иначе маршрута не будет...

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"
}],


Если вы хотите нарисовать линию между двумя точками, вы должны передать две точки (маркеры) в метод рисования... Так что запускайте цикл до одного перед последним элементом...

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


И функция рисования:
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);
}