切换地图主题

<template>
    <div style="position: relative;width: 100%; height: 500px;">
        <div id="maptalks-container" style="width: 100%; height: 100%;" />
        <div class="theme-container">
            <el-radio-group v-model="theme" @change="onChangeTheme">
                <el-radio v-for="item in themeList" :key="item.key" :label="item.key">
                    {{ item.name }}
                </el-radio>
            </el-radio-group>
        </div>
    </div>
</template>

<script lang="ts" setup name="maptalks-step-one">
import { onMounted, onUnmounted, ref } from 'vue'
import { MapHelper, type TThemeConfigProps } from 'fpi-tg-maptalks-helper/src/index'
let mapHlper: MapHelper | null = null
const themeList = ref<TThemeConfigProps[]>([])
const theme = ref<string>('light')

onMounted(() => {
    mapHlper = new MapHelper({
        mapConfig: {
            zoom: 12,
            pitch: 30,
            center: [120, 30],
        },
    })
    mapHlper?.initMap('maptalks-container')
    // 获取所有的主题
    themeList.value = mapHlper.getThemeList()
    // 设置主题
    mapHlper?.setTheme(theme.value)
})

const onChangeTheme = () => {
    mapHlper?.setTheme(theme.value)
}

onUnmounted(() => {
    mapHlper?.destory()
})
</script>

<style scoped>
.theme-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 100px;
    background-color: #fff;
}
</style>

显示代码

TIP

地图内置了 light、dark、image这3种地图主题，可以通过mapHlper.getThemeList()进行获取主题配置对象

自定义主题

// 内置了 light, dark, image等主题

mapHlper = new MapHelper({
    themeList: [
        { name: '白色主题', key: 'light'}, // 表示使用默认的light主题
        {
            name: '图片主题',
            key: 'image',
            add: (map: any) => {
                // 自己实现图层添加 参考maptalks官网
                map.addLayer('xxxxx')
            },
            remove: (map: any) => {
                // 自己实现图层移除 参考maptalks官网
                map.removeLayer('xxxxx')
            }
        } // 表示自定义了 image 主题
    ],
...
})

// 内置了 light, dark, image等主题

mapHlper = new MapHelper({
    themeList: [
        { name: '白色主题', key: 'light'}, // 表示使用默认的light主题
        {
            name: '图片主题',
            key: 'image',
            add: (map: any) => {
                // 自己实现图层添加 参考maptalks官网
                map.addLayer('xxxxx')
            },
            remove: (map: any) => {
                // 自己实现图层移除 参考maptalks官网
                map.removeLayer('xxxxx')
            }
        } // 表示自定义了 image 主题
    ],
...
})

贡献者：

大气-李国帝

切换地图主题 ​

自定义主题 ​

贡献者： ​

切换地图主题

自定义主题

贡献者：