cesium在高德影像地图上叠加高德路网地图

熊抱抱的一粒

已于 2025-02-19 14:29:37 修改

阅读量366

点赞数 3

文章标签： vue.js

于 2025-02-19 14:28:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52959651/article/details/145728601

版权

效果图

在这里插入图片描述

直接上代码，有一部分是ai写的，结果ai写的不太准确，我又补了一部分，代码很简单，反正效果实现了，如果代码有什么问题请留言。

<template>
    <div>
        <div id="cesiumContainer" style="width: 100%; height: 600px;"></div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as Cesium from 'cesium';

// 引入 Cesium 样式
// import 'cesium/Build/Cesium/Widgets/widgets.css';

const viewer = ref(null);

onMounted(() => {
    // 初始化 Cesium Viewer
	Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZWFkNDRlZS1kNGM2LTQyZDctODZkMC0xNTFmMGYyZGFkNTMiLCJpZCI6MjA2NzcyLCJpYXQiOjE3MjMxODQ1NzB9.SB6hoK6WeFruXndYseYP38FFZcah9vlpvCf6x9XCR6c'

    viewer.value = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: false
    });
	const roadgaodeyx= new Cesium.UrlTemplateImageryProvider({
            url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
            credit: '高德影像地图'
        })
    // 添加高德路网图
    const roadNetworkProvider = new Cesium.UrlTemplateImageryProvider({
        url: 'http://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
        credit: '高德路网图'
    });
    viewer.value.imageryLayers.addImageryProvider(roadgaodeyx);
    viewer.value.imageryLayers.addImageryProvider(roadNetworkProvider);
});
</script>