基于mars3d内置Cesium组件初始化地图的示例代码

基于mars3d内置Cesium组件初始化地图的示例代码
基于Cesium 1.121.2版本 mars3D 3.8.4版本

csMap.vue

<template>
    <ConfigProvider :locale="locale">
        <div class="mars-map-view" id="mars-map-view">
            <div id="centerDivMap" class="centerDiv-container">
              <div id="csMap" class="csMapClass"></div>
            </div>
        </div>
    </ConfigProvider>    
</template>

<script setup lang="ts">
import * as page   from "@/api/vuePage"
import * as mars3d from "mars3d"
import * as Cesium from "mars3d-cesium"

import {
   
    ConfigProvider } from "ant-design-vue"
import zhCN from "ant-design-vue/es/locale/zh_CN"

const locale = zhCN

var myToken =
      "customCesiumTokenCode";
Cesium.Ion.defaultAccessToken = myToken;
window.Cesium = Cesium;

let viewer=page.ts_reactive({
   
   });

//OK 初始化地图控件视图
function initMap() {
   
   
  //OK 添加 本地一张全局图片  加载本地图片全球地图  
  let baseImageProvider =Cesium.ImageryLayer.fromProviderAsync(
     Cesium.SingleTileImageryProvider.fromUrl('/img/Earth.jpg'),{
   
   }
  );
  //OK
  let baseImageProvider2=Cesium.ImageryLayer.fromProviderAsync(
      Cesium.TileMapServiceImageryProvider.fromUrl(Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")),{
   
   }
  )
          
  //OK  xyz 在线高德地图 
  let url_xyz_gd='https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'  
  let baseImageProvider_gd = new Cesium.UrlTemplateImageryProvider({
   
   url:url_xyz_gd});
  let baseImageLayer_gd=new Cesium.ImageryLayer(baseImageProvider_gd);

  //OK  xyz 本地下载google地图
  let url_xyz_google="http://IP/google/{z}/{x}/{y}.png";
  let baseImageProvider_google = new Cesium.UrlTemplateImageryProvider({
   
   url:url_xyz_google});
  let baseImageLayer_google=new Cesium.ImageryLayer(baseImageProvider_google)