Рубрика: WEB

Пока на работе выдалась небольшая творческая пауза, решил потыкать API версии 3, который приходит на смену версии 2.1 И рано или поздно как я понимаю версия 2.1 будет отключена. А проекты на «старой» версии есть.

Так вот, что не понравилось: все примеры в «песочнице», на typescript, а не на чистом javascript. Ну и полностью всё конечно поломано, т.е. не получится просто взять старый код, и чуть адаптировать — нужно всё переписывать. Вплоть до того что, они даже координаты «перевернули» местами, пришлось для того чтобы наложить полигоны районов со старой карты на новую, их «переворачивать».

Ну собственно, вот код,

<script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
<script src="https://api-maps.yandex.ru/v3/?apikey=уууу&lang=ru_RU" type="text/javascript"></script>
<div id="app"></div> 

<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel" src="ts/variables.ts"></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel" src="ts/common.ts"></script>
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel" src="ts/receipts.ts"></script>
        
<script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
       
import * as common from '../common';    

async function main() {
    await ymaps3.ready;
    const {YMap, YMapDefaultSchemeLayer,YMapFeature,YMapDefaultFeaturesLayer} = ymaps3;
    map = new YMap(
        document.getElementById('app'),
        {location: 
            {
                center: [39.8491648, 59.2084992], 
                zoom: 9 
            },
            showScaleInCopyrights: true
        },
        [
            new YMapDefaultSchemeLayer({}),
            new YMapDefaultFeaturesLayer({})
        ],

        
    );
       

    //получаем список районов
    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 YMapFeature({
                        geometry: {
                            type: 'Polygon',
                            coordinates: res2
                        },
                        properties:{
                            hintContent: areas_list.result[i].name   
                        },                                                
                        // Описание тут: https://yandex.ru/maps-api/docs/js-api/ref/index.html#interface-drawingstyle
                        style: {
                                stroke: [
                                    {
                                        color: '#196DFF99',
                                        dash: [5, 10],
                                        width: 3
                                        
                                    }
                                ],
                                fillOpacity: 0.2,
                                fill: "#"+areas_list.result[i].poly_fill_color
                            }
                    });
                    console.log(polygon);
                    map.addChild(polygon);                    
                    
                });                 
            };        
        };
    });
    
    
};    

window.map = null;            
main();
</script>     

common.ts:

/**
Получаем информацию об очертаниях районов (округов)
*/
export async function AjaxPost(url : string,payload: any): any {
  try {
    const response = await fetch(url, {
      method: 'POST', 
      headers: {'Content-Type': 'application/json; charset=UTF-8' },
      body: JSON.stringify(payload) 
    });
    if (!response.ok) {
      throw new Error(HTTP error! Status: ${response.status});
    }
    return response.json();
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

/**
Сделать паузу в милисекундах
*/
export async function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

/**
Перевернуть все координаты в массиве
*/
export function ReverseCoors(coors : any): any {
  
    for (var ii = 0; ii < coors.length; ii++) {                                
         for (var iii = 0; iii < coors[ii].length; iii++) {                                
            var x=0;
            var y=0;                        
            x=coors[ii][iii][0];
            y=coors[ii][iii][1];
            coors[ii][iii][1]=x;
            coors[ii][iii][0]=y;                             
         };
    };
    return coors;
}