数据可视化大屏项目开发中，需要使用两种主题切换地图样式的效果，所以使用百度地图，然后监听主题，切换主题样式，这里是使用的主题色id然后通过styleId来切换，但是在交付的时候遇到问题，开发时使用的是自己的百度账号生成的主题色，切换为客户的地图id后主题色id失效了。所以这里我们需要改为json文件方式渲染.

打开我们的百度主题色

打开我们的百度主题色,选择我们需要导出的主题色，下载样式文件。

<script>
import {ref, computed, watch, onMounted, h, render,nextTick} from 'vue';
import {useThemeStore} from '@/store/themeStore.js';
import checkBoxs from './components/checkBoxs/index.vue';
import pop from './components/pop/index.vue';
import fangxian from './data/data.json'
import lan from './data/lan.json'
import lv from './data/lv.json'
export default {
  name: 'BaiduMap',
  setup() {
    const themeStyles = {
      default: '9a48d4fb653ca0e1cfbcf9e3a242ba41',
      green: 'e157a7235df8457a5c0eb1f1db5d39ef'
    };

    const themeClass = computed(() => currentTheme.value);

    const colorBand = ['#00FF00', '#0000FF'];


    const setMapStyle = () => {
      if (map.value) {
        map.value.setMapStyleV2({
          styleId: themeStyles[currentTheme.value] || themeStyles.default
        });
      }
    };

导入样式文件

这里使用的是json方式渲染，所以方法要修改一下，使用styleJson来渲染主题色

import lan from './data/lan.json'
import lv from './data/lv.json'

要通过配置文件 lan 和 lv 来渲染主题色,您可以按以下步骤修改代码:

1. 首先,将 lan 和 lv 导入的 JSON 文件转换为主题样式对象:

import lan from './data/lan.json'
import lv from './data/lv.json'

const themeStyles = {
  default: lan,
  green: lv
};

2. 修改 setMapStyle 函数,使用导入的样式文件:

const setMapStyle = () => {
  if (map.value) {
    map.value.setMapStyleV2({
      styleJson: themeStyles[currentTheme.value] || themeStyles.default
    });
  }
};

3. 如果需要动态切换主题,可以在 watch 中监听 currentTheme 的变化:

watch(currentTheme, (newTheme) => {
  setMapStyle();
});

4. 在 onMounted 钩子中初始化地图样式:

onMounted(() => {
  // 其他初始化代码...
  setMapStyle();
});

5. 如果需要根据主题更改其他元素的颜色,可以在 themeStyles 中添加额外的颜色配置:

const themeStyles = {
  default: {
    mapStyle: lan,
    markerColor: '#0000FF',
    lineColor: '#00FFFF'
  },
  green: {
    mapStyle: lv,
    markerColor: '#00FF00',
    lineColor: '#008000'
  }
};

然后在使用这些颜色的地方,通过 themeStyles[currentTheme.value].markerColor 等方式获取当前主题的颜色。

这样,您就可以通过配置文件 lan 和 lv 来渲染不同的主题色,并且可以方便地扩展更多的主题样式。