Архивы api

Map API Yandex 3: Подсказки при наведении на полигон

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

Нет, всё таки версия 3 еще сыровата для внедрения в прод. Ну или «лыжи не едут». Для решения простой задачи — отображение подсказки над полигоном, пришлось переписываться с тех поддержкой яндекса (и они даже ответили!, чем я безмерно удивлён). В результате родился скрипт, в котором требуется переопределение вызовов класса. Хм.. это определенно не то что хочется видеть для получения базовых вещей, которые в версии 2.1 работают «из коробки».

async function main() {
    await ymaps3.ready;
    ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}',['@yandex/ymaps3-hint@0.0.1']);
    const {YMap,YMapDefaultSchemeLayer,YMapFeature,YMapDefaultFeaturesLayer,YMapFeatureSource,YMapFeatureDataSource,YMapEntity} = ymaps3;
    const {YMapHint,YMapHintContext} = await ymaps3.import('@yandex/ymaps3-hint');


    map = new ymaps3.YMap(
        document.getElementById('app'),
        {location: 
            {
                center: [39.8491648, 59.2084992], 
                zoom: 9 
            },
            showScaleInCopyrights: false  //шкала масштаба рядом в логотипом
        }        
    );  
    

    const defaultScheme = new YMapDefaultSchemeLayer({});    // Добавляем рисованное изображение карты
    map.addChild(defaultScheme);

    const features = new YMapDefaultFeaturesLayer();
    map.addChild(features);

       
   //получаем список районов
    common.AjaxPost("index.php?r=site2/get-areas","").then(async areas_list=>{
        console.log("-прочитал список районов ",areas_list);
        if (areas_list.error==false){
            for (var i = 0; i < areas_list.result.length; i++) {                        
                await common.AjaxPost("areas/"+areas_list.result[i].poly_filename,"aa").then(res2=>{
                    console.log(areas_list.result[i].name);                    
                    res2=common.ReverseCoors(res2);
                    console.log(areas_list.result[i].poly_fill_color);
                    const polygon = new ymaps3.YMapFeature({
                        geometry: {
                            type: 'Polygon',
                            coordinates: res2
                        },
                        properties: {
                          hint: areas_list.result[i].name+" район"
                        },                        
                        style: {
                                stroke: [
                                    {
                                        color: '#196DFF99',
                                        dash: [5, 10],
                                        width: 3
                                        
                                    }
                                ],
                                fillOpacity: 0.2,
                                fill: "#"+areas_list.result[i].poly_fill_color
                            }
                    });
                    features.addChild(polygon);
                });                 
            };        
        };
    });    
    
      const hint = new YMapHint({
        layers: [features.layer],
        hint: object => object?.properties?.hint
      });
      map.addChild(hint);

      hint.addChild(
        new(
          class MyHint extends YMapEntity {
            _onAttach() {
                this._element =document.createElement('div');
                this._element.className ='hint';
                this._detachDom =ymaps3.useDomContext(this,this._element);
                this._watchContext(
                YMapHintContext,
                    () => {
                      const context =this._consumeContext(YMapHintContext);
                      this._element.textContent =(context?.hint || '');
                      console.log(this._element);
                    }, {
                      immediate: true
                    }
                  );
                }
            _onDetach() {this._detachDom();}
          }
        )()
      );

};    

window.map = null;            
main();

Оставить комментарий 3, api, hint, map, yandex, подсказка, полигон

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

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

Microtik: включение API и вывод уровня сигнала wifi соеднинений

21.01.2023 Павел Грибов Linux

Вывести уровни сигнала соединений:

/interface wireless registration-table> print

Включить сервис API:

/ip service> enable 5

Оставить комментарий api, mikrotik, wifi

Список выбора с checkbox на карте yandex

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

Чтобы получилось примерно такое:

Нужно выполнить довольно много телодвижений:

    // кнопка фильтров
  var listBoxItems = ['111', '222']
       .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: false
                }
            })
        }),
        // Список 
        listBoxControl = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр',
                title: 'Фильтр'
            },
            items: listBoxItems,
            state: {
                // Признак, развернут ли список.
                expanded: false,
                filters: listBoxItems.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    myMap.controls.add(listBoxControl);   
    listBoxControl.events.add(['select', 'deselect'], function(e) {
        var listBoxItem = e.get('target');
        console.log(e);
        var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
        filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
        console.log(filters);
        listBoxControl.state.set('filters', filters);
    });

// кнопка фильтров

var listBoxItems = ['111', '222']

.map(function(title) {

return new ymaps.control.ListBoxItem({

data: {

content: title

state: {

selected: false

}

})

}),

// Список

listBoxControl = new ymaps.control.ListBox({

data: {

content: 'Фильтр',

title: 'Фильтр'

items: listBoxItems,

state: {

// Признак, развернут ли список.

expanded: false,

filters: listBoxItems.reduce(function(filters, filter) {

filters[filter.data.get('content')] = filter.isSelected();

return filters;

}, {})

}

});

myMap.controls.add(listBoxControl);

listBoxControl.events.add(['select', 'deselect'], function(e) {

var listBoxItem = e.get('target');

console.log(e);

var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));

filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();

console.log(filters);

listBoxControl.state.set('filters', filters);

});

Оставить комментарий api, checkbox, input, listbox, map.yandex, yandex, список

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

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 3 »

Июль 2026
Пн	Вт	Ср	Чт	Пт	Сб	Вс
		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