Задать вопрос
  • Скрипт рисования на яндекс карте поможете доделать?

    @1webmax1 Автор вопроса
    <canvas id="canv"></canvas>
    <div id="map"></div>
    <script src="http://mourner.github.io/simplify-js/simplify.js"></script>
    <script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
    
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    
    canvas {
      border: 1px solid #aaa;
      position: absolute;
      z-index: 99999;
      top: 0;
      left: 0;
    }
    
    <script>
    	var Map = (function() {
    
      ymaps.ready(init);
      var myMap;
    
      function init() {
        myMap = new ymaps.Map("map", {
          center: [43.2566700, 76.9286100], // Алматы
          zoom: 11
        }, {
          balloonMaxWidth: 200,
          searchControlProvider: 'yandex#search'
        });
    
        addPolygon()
      }
    
    
      function convert(coords) {
        var projection = myMap.options.get('projection');
    
        return coords.map(function(el) {
          var c = projection.fromGlobalPixels(myMap.converter.pageToGlobal([el.x, el.y]), myMap.getZoom());
          return c;
        });
      }
    
      function addPolygon(coord) {
        var myGeoObject = new ymaps.GeoObject({
          geometry: {
            type: "Polygon",
            coordinates: [coord],
          },
        }, {
          fillColor: '#00FF00',
          strokeColor: '#0000FF',
          opacity: 0.5,
          strokeWidth: 3
        });
    var geoObject1 = [!readsearchres? &reads=`[!search_words!]`!];
    	//var teststring = '!readsearchres? reads=`!search_words!`!';
    	//var teststring = '!getDillersCoords3!';
    					  
    					  objects = ymaps.geoQuery(geoObject1).addToMap(myMap);
    					  objects.setOptions('preset', 'islands#blueStretchyIcon');
    				  //
    				  objects.add(myGeoObject);
    				   myMap.geoObjects.add(myGeoObject);
        myGeoObject.editor.startEditing();//включить редактирование полигона
        var objectsInsidePoly = objects.searchInside(myGeoObject);
    					  objectsInsidePoly.setOptions('preset', 'islands#redStretchyIcon');
            // Оставшиеся объекты - синими.
    					   objects.remove(objectsInsidePoly).setOptions('preset', 'islands#blueStretchyIcon');
    	//alert('Добавление вершины полигона');
    	objects.searchInside(myGeoObject).addToMap(myMap);
            // Оставшиеся объекты будем удалять с карты.
            objects.remove(objectsInsidePoly).removeFromMap(myMap);
    						 //////////////////////////////////////////////////ловим изменение полигона
    						 myGeoObject.events.add('geometrychange', function () { window.setTimeout(function () {
    //если вершин больше 3 то ищем объекты в полигоне
    					  //if (myPolygon.geometry._coordPath._coordinates[0].length > 3) {
    	//myPolygon.editor.stopDrawing();
    					  var objectsInsidePoly = objects.searchInside(myGeoObject);
    					  objectsInsidePoly.setOptions('preset', 'islands#redStretchyIcon');
            // Оставшиеся объекты - синими.
    					   objects.remove(objectsInsidePoly).setOptions('preset', 'islands#blueStretchyIcon');
    	//alert('Добавление вершины полигона');
    	objects.searchInside(myGeoObject).addToMap(myMap);
            // Оставшиеся объекты будем удалять с карты.
            objects.remove(objectsInsidePoly).removeFromMap(myMap);
    	//}
    },100);
    					  });
      }
    
      return {
        addPolygon: addPolygon,
        convert: convert
      };
    })();
    
    //----------------------
    
    var canv = document.getElementById('canv'),
      ctx = canv.getContext('2d'),
    
      line = [];
    
    var map = document.getElementById('map');
    canv.width = map.offsetWidth;
    canv.height = map.offsetWidth;
    
    
    var startX = 0,
      startY = 0;
    
    function mouseDown(e) {
      ctx.clearRect(0, 0, canv.width, canv.height);
    
      startX = e.pageX - e.target.offsetLeft;
      startY = e.pageY - e.target.offsetTop;
    
      canv.addEventListener('mouseup', mouseUp);
      canv.addEventListener('mousemove', mouseMove);
    
    
      line = [];
      line.push({
        x: startX,
        y: startY
      });
    }
    
    
    function mouseMove(e) {
      var x = e.pageX - e.target.offsetLeft,
        y = e.pageY - e.target.offsetTop;
    
      ctx.beginPath();
      ctx.moveTo(startX, startY);
      ctx.lineTo(x, y);
      ctx.stroke();
    
      startX = x;
      startY = y;
      line.push({
        x: x,
        y: y
      });
    }
    
    function mouseUp() {
      canv.removeEventListener('mouseup', mouseUp);
      canv.removeEventListener('mousemove', mouseMove);
    
      aproximate();
      document.getElementById('canv').style.display = 'none';//убрать канву
    }
    
    function aproximate() {
      ctx.clearRect(0, 0, canv.width, canv.height);
      var res = simplify(line, 5);
      res = Map.convert(res);
      Map.addPolygon(res);
    }
    
    
    canv.addEventListener('mousedown', mouseDown);
    </script>
    Ответ написан