Архивы map - Страница 2 из 2

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

09.11.2020 Павел Грибов PHP, WEB

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

Решение: для отображения используем 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); // добавляем на холст                  
        
    };
}

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);

<?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);

Оставить комментарий api, map, map.yandex, много

API yandex карт и капризы с типами переменных JavaScript

09.08.2013 Павел Грибов WEB

При работе с API Yandex карт столкнулся наконец с еще одним недостатком JavaScript, а точнее отсутствие явного задания типа переменной. Например, долго искал ошибки в этом коде:

  lastcoors=JSON.parse(e);   // парсим JSON в массив
                              ldt=lastcoors.rows[0].cell[0];
                              lid=lastcoors.rows[0].cell[1];
                              limei=lastcoors.rows[0].cell[2];
                              lx=lastcoors.rows[0].cell[3];
                              ly=lastcoors.rows[0].cell[4];
                              lz=lastcoors.rows[0].cell[5];                             
                              myPlacemark = new ymaps.Placemark([lx, ly], {                                  
                                balloonContentHeader: "Балун метки",
                                balloonContentBody: "Содержимое <em>балуна</em> метки",
                                balloonContentFooter: "Подвал",
                                hintContent: "Хинт метки"
                                });                              
                                
                              myMap.geoObjects.add(myPlacemark);
                              myMap.panTo([lx, ly], {delay: 1500});

lastcoors=JSON.parse(e); // парсим JSON в массив

ldt=lastcoors.rows[0].cell[0];

lid=lastcoors.rows[0].cell[1];

limei=lastcoors.rows[0].cell[2];

lx=lastcoors.rows[0].cell[3];

ly=lastcoors.rows[0].cell[4];

lz=lastcoors.rows[0].cell[5];

myPlacemark = new ymaps.Placemark([lx, ly], {

balloonContentHeader: "Балун метки",

balloonContentBody: "Содержимое <em>балуна</em> метки",

balloonContentFooter: "Подвал",

hintContent: "Хинт метки"

});

myMap.geoObjects.add(myPlacemark);

myMap.panTo([lx, ly], {delay: 1500});

Метка ставится правильно, а перемещение идет невесть куда. Оказалось, что при разборе JSON, переменные lx и ly почему-то становятся строками, и если функции PlaceMark все равно с чем оперировать, с числом или строкой, то PlanTo непременно работает только с числом.

Решение: в JavaScritpt строка становится числом если участвует в математической операции.

Например:

n=1; //явное число
lx=lx*n; // lx тоже становится числом.

1 2	n=1; //явное число lx=lx*n; // lx тоже становится числом.

Итого получаем рабочий код:

  lastcoors=JSON.parse(e);   // парсим JSON в массив
                              n=1;
                              ldt=lastcoors.rows[0].cell[0];
                              lid=lastcoors.rows[0].cell[1];
                              limei=lastcoors.rows[0].cell[2];
                              lx=lastcoors.rows[0].cell[3]*n;
                              ly=lastcoors.rows[0].cell[4]*n;
                              lz=lastcoors.rows[0].cell[5]*n;                             
                              myPlacemark = new ymaps.Placemark([lx, ly], {                                  
                                balloonContentHeader: "Балун метки",
                                balloonContentBody: "Содержимое <em>балуна</em> метки",
                                balloonContentFooter: "Подвал",
                                hintContent: "Хинт метки"
                                });                              
                                
                              myMap.geoObjects.add(myPlacemark);
                              //alert(lx);alert(ly);
                              myMap.panTo([lx, ly], {delay: 1500});

lastcoors=JSON.parse(e); // парсим JSON в массив

n=1;

ldt=lastcoors.rows[0].cell[0];

lid=lastcoors.rows[0].cell[1];

limei=lastcoors.rows[0].cell[2];

lx=lastcoors.rows[0].cell[3]*n;

ly=lastcoors.rows[0].cell[4]*n;

lz=lastcoors.rows[0].cell[5]*n;

myPlacemark = new ymaps.Placemark([lx, ly], {

balloonContentHeader: "Балун метки",

balloonContentBody: "Содержимое <em>балуна</em> метки",

balloonContentFooter: "Подвал",

hintContent: "Хинт метки"

});

myMap.geoObjects.add(myPlacemark);

//alert(lx);alert(ly);

myMap.panTo([lx, ly], {delay: 1500});

Оставить комментарий api, javascript, map, maps, yandex, преобразование типов

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

21.01.2013 Павел Грибов WEB

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

Оставить комментарий api, map, map.yandex, yandex, карты

« 1 2

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31