Блог

Можно ли каким-то образом переопределить цветовую схему по умолчанию, используемую для элементов управления картой Azure? Я не могу найти в документах MS ничего, кроме настройки между «светлым» и «темным», однако ни один из их вариантов цвета не выглядит очень красиво, и мне нужно некоторое единообразие с цветовой схемой моего собственного темного режима в моем пользовательском интерфейсе.

Кроме того, настройка светлого/темного для стиля работает только для панели инструментов рисования, но не для других элементов управления картой, отсюда снимок экрана ниже:

Пример кода:

 //Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create an instance of the drawing manager and display the drawing toolbar.
    drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: theme,
            buttons: [
                "draw-line",
                "draw-polygon",
                "draw-circle",
                "draw-rectangle",
                "edit-geometry",
                "erase-geometry"]
        })
    });
    map.controls.add([
        new atlas.control.StyleControl({
            layout: 'list',
            mapStyles: [
                'blank', // Blank
                'grayscale_dark', // Greyscale (Night)
                'grayscale_light', // Greyscale (Light)
                'high_contrast_dark', // High Contrast (Dark)
                'high_contrast_light', // High Contrast (Light)
                'night', // Night
                'road_shaded_relief', // terra
                'satellite', // Satellite
                'satellite_road_labels'] // Hybrid
        }),
        new atlas.control.ZoomControl(),
        new atlas.control.CompassControl(),
        new atlas.control.PitchControl(),
    ], {
        position: "top-right",
        style: theme, // theme == 'light' or 'dark'
    });
});
 

Я должен научиться чаще использовать элемент inspect в отладке браузера, и я бы нашел необходимый css намного быстрее!

Обновите образец кода, исправляющий проблему с тем, что панель инструментов рисования не отображала темный режим.

 //Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create an instance of the drawing manager and display the drawing toolbar.
    drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: theme,
            buttons: [
                "draw-line",
                "draw-polygon",
                "draw-circle",
                "draw-rectangle",
                "edit-geometry",
                "erase-geometry"]
        })
    });
    map.controls.add([
        new atlas.control.StyleControl({
            style: theme, // theme == 'light' or 'dark'
            layout: 'list',
            mapStyles: [
                'blank', // Blank
                'grayscale_dark', // Greyscale (Night)
                'grayscale_light', // Greyscale (Light)
                'high_contrast_dark', // High Contrast (Dark)
                'high_contrast_light', // High Contrast (Light)
                'night', // Night
                'road_shaded_relief', // Terra
                'satellite', // Satellite
                'satellite_road_labels'] // Hybrid
        }),
        new atlas.control.ZoomControl({
            style: theme, // theme == 'light' or 'dark'
        }),
        new atlas.control.CompassControl({
            style: theme, // theme == 'light' or 'dark'
        }),
        new atlas.control.PitchControl({
            style: theme, // theme == 'light' or 'dark'
        }),
    ], {
        position: "top-right",
    });
});
 

Затем для переопределения CSS измените цвета:

 .azure-maps-control-button {
    background-color: #22262A !important;
    color: white !important;
}

.azure-maps-control-container.dark > .style-options.list button {
    background-color: #22262A !important;
}
    .azure-maps-control-container.dark > .style-options.list button:hover {
        background-color: #343A40 !important;
        color: white !important;
    }

    .dark .azure-maps-drawtoolbar-button {
        background-color: #22262A !important;
        color: white !important;
    }
    .dark .azure-maps-drawtoolbar-button:hover {
        background-color: #343A40 !important;
        color: white !important;
    }