Azure Map 控件覆盖 CSS 样式

Question

是否可以以某种方式覆盖用于 Azure 地图控件的默认配色方案？除了在 'light' 和 'dark' 之间设置之外，我在 MS Docs 中找不到任何东西，但是它们的颜色选择看起来都不是很好，我希望在 [=] 上与我自己的黑暗模式的配色方案保持一致24=].

另外，样式设置light/dark只对绘图工具栏有效，对其他地图控件无效，故截图如下：

示例代码：

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

Answer 1

我应该学会在浏览器调试中更频繁地使用检查元素，我会更快地找到所需的 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;
    }

Azure Map 控件覆盖 CSS 样式

Azure Map Controls override the CSS style

javascript

azure-maps