美文网首页
Cesium加载高德地图

Cesium加载高德地图

作者: zhuyx0304 | 来源:发表于2024-03-26 09:32 被阅读0次
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cesium加载高德地图</title>
    <link rel="stylesheet" href="../Cesium/Widgets/widgets.css" />
    <style>
      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
      }
      #cesiumContainer {
        width: 100%;
        height: 100%;
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script src="../Cesium/Cesium.js"></script>    
    <script>
      var viewer = new Cesium.Viewer("cesiumContainer", {
        imageryProvider: new Cesium.SingleTileImageryProvider({
          url: "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==",
        }),
        baseLayerPicker: false,
        animation: false,
        fullscreenButton: false,
        vrButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false,
        scene3DOnly: true,
        shouldAnimate: false,
        skyBox: false,
      });
      // 隐藏版权信息
      viewer.cesiumWidget.creditContainer.style.display = "none";

      // style 6-影像 7-矢量 8-标注
      var aMapProvider = new Cesium.UrlTemplateImageryProvider({  
          url: 'https://webst0{s}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&size=1',  
          subdomains: ['1', '2', '3', '4'], // 如果有多个子域名用于负载均衡,可以在这里指定  
          tilingScheme: new Cesium.WebMercatorTilingScheme(),  
          maximumLevel: 18, // 根据高德地图的实际最大层级设置  
      });         
        
      viewer.imageryLayers.addImageryProvider(aMapProvider);
    </script>
  </body>
</html>

相关文章

网友评论

      本文标题:Cesium加载高德地图

      本文链接:https://www.haomeiwen.com/subject/kahstjtx.html