Архив метки: map.yandex

Яндекс карты: отображение очень большого количества обьектов на карте

Задача: отобразить на карте  ОЧЕНЬ большого количества обьектов на карте:

Решение: для отображения используем ObjectManager с включенной кластеризаций, кроме того, обекты загружаем через JSON с типом «Feature» — т.е. метки загружаются ни как обьекты, а как «теневой массив», который не умеет отображать контент,хинты и имеет еще ряд ограничений. Этот момент мы обходим следующим образом: при наведении курсора мышки на  метку, мы переносим её в «обьекты».

javascript:

    var myMap;    
    latitude=55.76;
    longitude=37.64;
    navigator.geolocation.getCurrentPosition(
    function(location) {
      latitude=location.coords.latitude;
      longitude=location.coords.longitude;
      accuracy=location.coords.accuracy;
      ymaps.ready(init);
    },
    function(error){
        ymaps.ready(init);        
    }
    );    


function init () {
    console.log("-инициируем карту в "+latitude+" и "+longitude);
    myMap = new ymaps.Map('map', {
        center: [latitude, longitude], 
        controls: ['trafficControl','zoomControl','routeButtonControl','routeEditor'],
        zoom: 15
    }, {
        searchControlProvider: 'yandex#search'
    });    
    if (isMobile.any()) {
        console.log("-открыто на мобильнике - отключаем мультитач");
        //myMap.behaviors.disable('drag');
        myMap.behaviors.disable('multiTouch');
    }
    LoadEVCByCar(<?=$Users->defaultcar?>);
}    
function LoadEVCByCar(carcode){
    //очищаем холст
    myMap.geoObjects.removeAll();
    NormalCollection = new ymaps.GeoObjectCollection();
    //теневые не полноценные обьекты загружаем скопом
    objectManager = new ymaps.ObjectManager({clusterize: true}); 
    myMap.geoObjects.add(objectManager);        
    $.post("csdcsdcs", {  
        carcode:carcode,
        latitude:latitude,
        longitude:longitude
    }).done(function(data) {
        jsond=JSON.parse(data);
        objectManager.add(jsond);    
    });
    // по событию "попадание мышкой" теневой обьект удаляем и создаем "настоящий" полноценный, с которым далее и работаем..
    objectManager.objects.events.add(['mouseenter', 'mouseleave'], Shadow2Normal);
  
};
function Shadow2Normal (e) {
    aa=e;
    console.log(e);
    if (e.get('type') == 'mouseenter') {        
        objectIdcur = e.get('objectId');
        newob=objectManager.objects.getById(objectIdcur);
        myMap.geoObjects.remove([objectIdcur]);
        objectManager.remove([objectIdcur]);
                
        newob.options["draggable"]=false;
        newob.options["id"]=newob.id;
        NormalObject = new ymaps.GeoObject(
                {
                    id:   newob.id,
                    geometry :   newob.geometry,
                    properties:  newob.properties
                },
                    newob.options
                );
        
        NormalCollection.add(NormalObject); //добавляем в коллекцию    
        myMap.geoObjects.add(NormalCollection); // добавляем на холст                  
        
    };
}

PHP:

<?php
    $JsonEVCS=array();
    $JsonEVCS["type"]="FeatureCollection";
    
    $longitude= _POST("longitude");
    $latitude= _POST("latitude");
    $carcode= _POST("carcode");
    for ($i = 1; $i <= 10000; $i++) {
            $evcs_info=array();
            $evcs_info["type"]="Feature";
            $evcs_info["id"]=$i;        
            $evcs_info["geometry"]["type"]="Point";
            $m1=rand(0,1);if ($m1==0){$m1=-1;};
            $m2=rand(0,1);if ($m2==0){$m2=-1;};
            $evcs_info["geometry"]["coordinates"]=array($latitude+$m1*rand(1,200)/100,$longitude+$m2*rand(1,200)/100);                                
            $evcs_info["properties"]["balloonContent"]="html код";
            $evcs_info["properties"]["hintContent"]="Подсказка";
            $evcs_info["properties"]["data"]["ip"]="32у23";  
            $evcs_info["options"]["preset"]="islands#redDotIcon";
            $evcs_info["properties"]["iconContent"]="Имя";
            $evcs_info["options"]["draggable"]=false;
            $evcs_info["options"]["hideIconOnBalloonOpen"]=false;
            $JsonEVCS["features"][]=$evcs_info;
    };
  echo json_encode($JsonEVCS);

Наложение выполненных услуг на Яндекс.Карты

Давече сделал интересный скриптик, который иммитирует «онлайн» выполнение заказов и накладывает их на Яндекс.Карты

Демо тут.

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
        <link href="main.css" rel="stylesheet"/>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=df140307-afa8-4232-8513-6308f7fc6f65" type="text/javascript"></script>
</head>
<body>
    <div id="main_layer" style="position: relative; width: 100%;  height: 500px; overflow: hidden;">
        <div class="tickets-wrapper with-list">
            <div id="tickets-map"></div>
            <div id="tickets-list" class="tickets-list">                
            </div>
        </div>
    </div>
    <script>
        ymaps.ready(function () {
            work_show=new Array();
            work_show.push({
                            address : "ул. Герцена 60",
                            nameuser : "Вася",
                            work : "Роутер",
                            summ : 1000,
                            status : "Сделано",
                            img: "waterheater.jpg",                
                            comment: "Абра швабра кадабра!",
                            
                            point : [59.220392, 39.891568], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            work_show.push({
                            address : "ул. Герцена 54",
                            nameuser : "Павел",
                            work : "Газовый котел",
                            summ : 1600,
                            status : "Сделано",
                            img: "waterheater.jpg",
                            comment: "Сделали быстро.Чаевых не просили.",
                
                            point : [59.230492, 39.891568], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            work_show.push({
                            address : "ул. Ленина 54",
                            nameuser : "Вася",
                            work : "Котел",
                            summ : 900,
                            status : "Делаем",
                            img: "waterheater.jpg",
                            comment: "Потек конденцатор. Заменили.",
                
                            point : [59.232492, 39.891568], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            work_show.push({
                            address : "ул. Путина 54",
                            nameuser : "Вася 2",
                            work : "Котел",
                            summ : 100,
                            status : "Делаем",
                            img: "waterheater.jpg",
                            comment: "Потек конденцатор. Заменили.",
                
                            point : [59.232492, 39.893568], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            work_show.push({
                            address : "ул. Карла Маркса 99",
                            nameuser : "Карл-Маркс",
                            work : "Читать книгу",
                            summ : 900,
                            status : "Сделали",
                            img: "waterheater.jpg",
                            comment: "Почитали.Рады.",
                
                            point : [59.237492, 39.891868], //координаты точки                            
                            ico_preset :  'islands#darkGreenStretchyIcon', // иконка сообщения
                        }
                    );
            

        
        
            myMap = new ymaps.Map('tickets-map', {
                    center: [59.220492, 39.891568],
                    zoom: 20,
                    controls: ['rulerControl'],
                   // behaviors: ['default', 'scrollZoom']
                }, {
                    //searchControlProvider: 'yandex#search'
                }),
                    clusterer = new ymaps.Clusterer({

                    preset: 'islands#invertedVioletClusterIcons',
                    groupByCoordinates: false,

                    clusterDisableClickZoom: false,
                    clusterHideIconOnBalloonOpen: false,
                    geoObjectHideIconOnBalloonOpen: false
                }),
                myMap.controls.add(new ymaps.control.ZoomControl({options: { position: { right: 10, top: 50 }}}));
                getPointData = function (index) {
                 return {
                        balloonContentHeader: 'Задача: '+work_show[index].work,
                        balloonContentBody: 'Адрес: '+work_show[index].address+","+work_show[index].nameuser+"<br/>Сумма работ:"+work_show[index].summ+"руб.",
                        balloonContentFooter: work_show[index].comment,
                        clusterCaption: "Сделано: "+work_show[index].summ+"руб.",
                        iconContent: "Сделано: "+work_show[index].summ+"руб.",
                    };
                },
                geoObjects = [];
                messages=new Array();
                for(var i = 0, len = work_show.length; i < len; i++) {
                    geoObjects[i] = new ymaps.Placemark(work_show[i].point, getPointData(i), {preset: work_show[i].ico_preset});                                
                    messages.push('<div id="ticket_id_'+i+'" class="ticket ticket-completed" style="display:none">'+
                            '<div class="ticket-icon" style="background-image: url(images/'+work_show[i].img+')">'+
                            '</div>'+
                            '<div class="ticket-content">'+
                            '    <div class="ticket-title">'+
                            '        <span class="ticket-address">'+work_show[i].address+'</span>'+
                            '        <span class="ticket-contact">'+work_show[i].nameuser+'</span>'+
                            '    </div>'+
                            '    <div class="ticket-category">'+work_show[i].work+'</div>'+
                            '    <div class="ticket-sum">'+work_show[i].summ+'₽</div>'+
                            '    <span class="ticket-state ticket-state-completed">'+work_show[i].status+'</span>'+
                            '</div>'+
                        '</div>');                    
                    if (i<=3) {
                        $("#tickets-list").prepend(messages[i]);
                        $("#ticket_id_"+i).show();
                    };
                }
            clusterer.options.set({
                gridSize: 80,
                clusterDisableClickZoom: true
            });

            clusterer.add(geoObjects);
            myMap.geoObjects.add(clusterer);

            myMap.setBounds(clusterer.getBounds(), {
              //  checkZoomRange: true
            });
            //setTimeout('myMap.setZoom(20);', 2000)            
            // запускаем таймер во время которго перебираем все точки раз в секунду (по кругу)..
             timerId = setInterval(AnimatePoint, 2000);
             gcnt=3; // начинаем с 3-й точки
             function AnimatePoint(){
                 gcnt++;          
                 if (gcnt==work_show.length){gcnt=0;};                 
                 $("#tickets-list").prepend(messages[gcnt]);          
                 $("#ticket_id_"+gcnt).show(1000);
                 myMap.panTo(work_show[gcnt].point, {delay: 500});
                // geoObjects[gcnt].balloon.open();
                // objectState = clusterer.getObjectState(geoObjects[gcnt]);
                 //clusterer.balloon.open(objectState.cluster);
                var objectState = clusterer.getObjectState(geoObjects[gcnt]);
                    if (objectState.isClustered) {
                        objectState.cluster.state.set('activeObject', geoObjects[gcnt]);
                        clusterer.balloon.open(objectState.cluster);
                    } else if (objectState.isShown) {
                        geoObjects[gcnt].balloon.open();
                    }                 
             };            
            
        });

    </script>    
</body>
</html>

Реализация рисования на картах с использованием API Яндекс.Карт.

Задача: необходимо реализовать рисование на картах, с возможностью сохранения нарисованного во внешнюю базу.

Снимок экрана из 2015-07-01 10:34:22

Решение: будем использовать API Яндекс.Карт.

Логика: отображаем карту в зависимости от выбранного подразделения, и слоя. При выборе подразделения или слоя, подгружаем из вне ранее нарисованные обьекты. При нажатии кнопки «Сохранить» — сохраняем их во внешнюю базу.

Демо (безо возможности сохранения обьектов)

Далее код: Читать далее Реализация рисования на картах с использованием API Яндекс.Карт.

Свои карты в Яндекс-Картах.

По мотивам вот этой статьи. Не захотелось тратить время на разработку своего движка,т.к. вдумчиво почитав документацию к API.Yandex пришел к выводу, что весь функционал необходимый для моих нужд, уже есть и написан. Один правда большой недостаток — для работы необходимо будет постоянное подключение к интернет, не нашел пока способа вытащить скрипты от яндекса в оффлайн. Итак, пошаговое руководство:
Читать далее Свои карты в Яндекс-Картах.