Архивы map

Yandex Map: отображение меток в зависимости от масштаба карты

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

Работал давече с плагином HeatMap для яндекс карт. Всё хорошо, но один нюанс — невозможно навесить эвент на клик по точке карты. Ну или не нашел как. Пришлось задействовать «финт ушами» — при достижении определенного приближения, принудительно отрисовывать поверх точек heatmap свои «кликабельные» точки. В результете родилось нечто подобное:

obj = data.result; 
                heatmap = new ymaps.Heatmap(obj, {
                    // Радиус влияния.
                    radius: 15,
                    // Нужно ли уменьшать пиксельный размер точек при уменьшении зума. False - не нужно.
                    dissipating: false,
                    // Прозрачность тепловой карты.
                    opacity: 0.8,
                    // Прозрачность у медианной по весу точки.
                    intensityOfMidpoint: 0.05,
                    // JSON описание градиента.
                    gradient: {
                           0.1: 'rgba(128, 255, 0, 0.7)',
                           0.2: 'rgba(255, 255, 0, 0.8)',
                           0.7: 'rgba(234, 72, 58, 0.9)',
                           0.9: 'rgba(162, 36, 25, 1)',
                           1.0: 'rgba(0, 0, 0, 1)'
                       }
                });
                heatmap.options.events.add('click', function (e) {   
                    console.log(e);
                    var objectId = e.get('objectId');    
                    //objectManager.objects.balloon.open(objectId);
                });                    
                heatmap.setMap(myMap); 

        
       
        
                myMap.events.add('boundschange', function () {
                    size = myMap.getZoom();
                    console.log(size);
                    if (size>15){
                        console.log("-- пора бы и нарисовать метки");
                        if (all_deleted==true){
                            console.log("--- рисуем метки");
                            // настройки кластеризакции
                            objectManager = new ymaps.ObjectManager({
                                clusterDisableClickZoom: true,
                                geoObjectOpenBalloonOnClick: true,
                                clusterize: false
                            }); //кластеризуем
                            objectManager=SetClusterProp(objectManager);     
                            myMap.geoObjects.add(objectManager);   
                            objectManager.add(obj);  
                            objectManager.objects.events.add('click', function (e) {   
                                console.log(e);
                                var objectId = e.get('objectId');    
                                objectManager.objects.balloon.open(objectId);
                            });                                        
                          all_deleted=false;  
                        };
                    } else {
                        if (all_deleted==false){
                            myMap.geoObjects.remove(myMap.geoObjects.get(myMap.geoObjects.getLength()-1));                          
                            all_deleted=true;  
                        };
                    };
                });

obj = data.result;

heatmap = new ymaps.Heatmap(obj, {

// Радиус влияния.

radius: 15,

// Нужно ли уменьшать пиксельный размер точек при уменьшении зума. False - не нужно.

dissipating: false,

// Прозрачность тепловой карты.

opacity: 0.8,

// Прозрачность у медианной по весу точки.

intensityOfMidpoint: 0.05,

// JSON описание градиента.

gradient: {

0.1: 'rgba(128, 255, 0, 0.7)',

0.2: 'rgba(255, 255, 0, 0.8)',

0.7: 'rgba(234, 72, 58, 0.9)',

0.9: 'rgba(162, 36, 25, 1)',

1.0: 'rgba(0, 0, 0, 1)'

}

});

heatmap.options.events.add('click', function (e) {

console.log(e);

var objectId = e.get('objectId');

//objectManager.objects.balloon.open(objectId);

});

heatmap.setMap(myMap);

myMap.events.add('boundschange', function () {

size = myMap.getZoom();

console.log(size);

if (size>15){

console.log("-- пора бы и нарисовать метки");

if (all_deleted==true){

console.log("--- рисуем метки");

// настройки кластеризакции

objectManager = new ymaps.ObjectManager({

clusterDisableClickZoom: true,

geoObjectOpenBalloonOnClick: true,

clusterize: false

}); //кластеризуем

objectManager=SetClusterProp(objectManager);

myMap.geoObjects.add(objectManager);

objectManager.add(obj);

objectManager.objects.events.add('click', function (e) {

console.log(e);

var objectId = e.get('objectId');

objectManager.objects.balloon.open(objectId);

});

all_deleted=false;

};

} else {

if (all_deleted==false){

myMap.geoObjects.remove(myMap.geoObjects.get(myMap.geoObjects.getLength()-1));

all_deleted=true;

};

});

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

MapYandex API: получение расстояний между двумя координатами

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

Задача: получить расстояние от точки до точки по автомобильным дорогам

Решение: воспользуемся вызовом route:

ymaps.route([
                [data[i]["to_latlatitude"],data[i]["to_longitude"]],
                [data[i]["from_latlatitude"],data[i]["from_longitude"]]
            ], {
                mapStateAutoApply: true
            }).then(function (route) {
                console.log("Маршрут:");
                console.log(route);
                console.log(route.getLength());

            });

ymaps.route([

[data[i]["to_latlatitude"],data[i]["to_longitude"]],

[data[i]["from_latlatitude"],data[i]["from_longitude"]]

], {

mapStateAutoApply: true

}).then(function (route) {

console.log("Маршрут:");

console.log(route);

console.log(route.getLength());

});

Оставить комментарий map, yandex, маршрут, расстояние

Получение геокординат по адресу

16.05.2023 Павел Грибов PHP

Задача: получить координаты по известному адресу

Решение: воспользуемся API Яндекс.Карты по геокодированию. К сожалению бесплатная версия ограничена 1000 запросов в сутки. Но это обходимо возможностью «растягивать» во времени заполнение БД


            $address= urlencode($maddress->address);
            $rul="https://geocode-maps.yandex.ru/1.x/?geocode=".$address."&format=json&results=1&apikey=".$api_map;
            var_dump($rul);
            $ch = curl_init($rul);        
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json')); 
            $res_curl=json_decode(curl_exec($ch));            
            if ($res_curl!=null){
                if (isset($res_curl->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos)){
                 $coors=$res_curl->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos;     
                 $coors= explode(" ",$coors);
                 var_dump($coors);
                }              
            };

$address= urlencode($maddress->address);

$rul="https://geocode-maps.yandex.ru/1.x/?geocode=".$address."&format=json&results=1&apikey=".$api_map;

var_dump($rul);

$ch = curl_init($rul);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

$res_curl=json_decode(curl_exec($ch));

if ($res_curl!=null){

if (isset($res_curl->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos)){

$coors=$res_curl->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos;

$coors= explode(" ",$coors);

var_dump($coors);

}

};

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

JavaScript именованные массивы как набор записей

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

Обычно для этой цели используют конструкцию Map, однако лично мне не нравится его синтаксис, когда для доступа необходимо использовать get /set. Поэтому я обычно использую создание объекта. Т.е. получается что-то вроде:

// набор записей
TBokings=new Object();
TBokings={
  x:0,
  x1:0,
  starttime:"12:00",
  endtime:"13:00",
  status:"busy"
};
// сам массив
ArrBooking=new Array();

///добавление в массив
  TBokings.x=startRectX;
  TBokings.x1=EndRectX;
  TBokings.starttime=item.DtFrom_UTC;
  TBokings.endtime=item.DtTo_UTC;
  TBokings.status="busy";
  ArrBooking.push(Object.assign({}, TBokings));      

// перебор массива

ArrBooking.forEach(function(item){
	console.log(item);
});

// набор записей

TBokings=new Object();

TBokings={

x:0,

x1:0,

starttime:"12:00",

endtime:"13:00",

status:"busy"

};

// сам массив

ArrBooking=new Array();

///добавление в массив

TBokings.x=startRectX;

TBokings.x1=EndRectX;

TBokings.starttime=item.DtFrom_UTC;

TBokings.endtime=item.DtTo_UTC;

TBokings.status="busy";

ArrBooking.push(Object.assign({}, TBokings));

// перебор массива

ArrBooking.forEach(function(item){

console.log(item);

});

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

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

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, много

1 2 »

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				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