Cesium加载高德地图（含源代码）

最新推荐文章于 2024-06-13 10:34:44 发布

GIS小二郎

最新推荐文章于 2024-06-13 10:34:44 发布

阅读量6.5k

点赞数 6

分类专栏： Cesium 文章标签： gis

本文链接：https://blog.csdn.net/weixin_43816509/article/details/120990364

版权

Cesium 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

相比较天地图需要申请自己的Key，高德地图的加载方便很多，并不需要申请key，可以直接加载到我们的Cesium中。

//1.Cesium加载高德矢量地图
       var layer = new Cesium.UrlTemplateImageryProvider({
           url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
           minimumLevel: 4,
           maximumLevel: 18
       })
       viewer.imageryLayers.addImageryProvider(layer);

//2.Cesium加载高德影像
       var imgLayer = new Cesium.UrlTemplateImageryProvider({
           url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
           minimumLevel: 3,
           maximumLevel: 18
       })
       viewer.imageryLayers.addImageryProvider(imgLayer);

//3.Cesium加载注记要素
       var annLayer = new Cesium.UrlTemplateImageryProvider({
           url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
           minimumLevel: 3,
           maximumLevel: 18
       })
       viewer.imageryLayers.addImageryProvider(annLayer);

源代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>加载高德地图</title>
       <script src="Build/Cesium/Cesium.js"></script>
       <link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">
       <style>
       html,
       body,
       #cesiumContainer {
       width: 100%;
       height: 100%;
       margin: 0;3
       padding: 0;
       overflow: hidden;
       background-color: #000000;
       }
       </style>
   </head>

   <body>
       <div id="cesiumContainer"></div>
       <script type="text/javascript">
       Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwNGNmNWUwMi02NWEyLTQxNzItOTNhNC1mY2NiZTcxNDc2OWYiLCJpZCI6MTU5NDQsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1NjkyMjk3MTN9.PYUfCHykW23NuwRzzz04yW7JyZ4vQlcb4kToZ44r42w";
       var viewer = new Cesium.Viewer('cesiumContainer', {
           terrainProvider: Cesium.createWorldTerrain(),
               animation: false, //动画控制不显示
               timeline: false, //时间线不显示
               fullscreenButton: false, //全屏按钮不显示
               infoBox: false,
               geocoder:false, //右上角搜索
               homeButton:false, //右上角 Home
               sceneModePicker:false, //右上角 2D/3D切换
               baseLayerPicker:false, //右上角地形
               navigationHelpButton:false, //右上角 Help

       });

       viewer._cesiumWidget._creditContainer.style.display = "none";
       //1.Cesium加载高德矢量地图
       var layer = new Cesium.UrlTemplateImageryProvider({
           url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
           minimumLevel: 4,
           maximumLevel: 18
       })
       viewer.imageryLayers.addImageryProvider(layer);

       //2.Cesium加载高德影像
       var imgLayer = new Cesium.UrlTemplateImageryProvider({
           url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
           minimumLevel: 3,
           maximumLevel: 18
       })
       viewer.imageryLayers.addImageryProvider(imgLayer);

       //3.Cesium加载注记要素
       var annLayer = new Cesium.UrlTemplateImageryProvider({
           url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
           minimumLevel: 3,
           maximumLevel: 18
       })
       viewer.imageryLayers.addImageryProvider(annLayer);

       </script>
   </body>
</html>