vue + ceisum加载高德地图各个类型地图

 高德地图其他类型地图

高德地图(卫片):"http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
道路纯图:"https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=54658&y=26799&z=16&scl=1&ltype=2"
道路详图:"http://webrd01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&lang=zh_cn&size=1&scale=1&style=8"
道路简图:"http://webrd01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&size=1&scale=1&style=7"
纯道路图(路网):"https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=11",
纯地标图(地名):"https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=4"
路网加地名:"https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}"
矢量切片风格(常见):"http://webrd01.is.autonavi.com/appmaptile?&scale=1&lang=zh_cn&style=8&x={x}&y={y}&z={z}"
路网注记图:"http://webst01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&lang=zh_cn&size=1&scale=1&style=8"
影像图:"https://webst01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&style=6"

 通过cesium加载高德地图卫片以及纯地标图(地名)

 Cesium.Ion.defaultAccessToken =    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZGRiMjUzZS1jZWNlLTRjMDYtODU5Mi05MjNiZDRjOGUwNTIiLCJpZCI6NDMxMDUsImlhdCI6MTY0NjI3MDQ2M30.ZH81WWILiz6RytEPHTdeRV-_Au5QuYN6JzJ8LsNqzLw";
      var map = new Cesium.Viewer("map-container", {
        infoBox: false,
        baseLayerPicker: false, // 是否显示图层选择器
        selectionIndicator: false,
        animation: false, // 是否创建动画小器件,左下角仪表
        geocoder: false, // 是否显示geocoder小器件,右上角查询按钮
        homeButton: false, // 是否显示Home按钮
        sceneModePicker: false, // 是否显示3D/2D选择器
        timeline: false, // 是否显示时间轴
        navigationHelpButton: false, // 是否显示右上角的帮助按钮
        fullscreenButton: false, // 右下角的全屏按钮
        terrainProvider: Cesium.createWorldTerrain(),
        shouldAnimate: true,
        orderIndependentTranslucency: false,
        contextOptions: {
          webgl: {
            alpha: true,
          },
        },
        // 添加基础地图
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",  //高德地图(卫片) 
          minimumLevel: 1,
          maximumLevel: 18,
        }),
      });
      // 在基础地图上添加地图
      var imaglyser = new Cesium.ImageryLayer(
        new Cesium.UrlTemplateImageryProvider({
          url: "https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=4",  // 纯地标图(地名)
          minimumLevel: 1,
          maximumLevel: 18,
        })
      );
      map.imageryLayers.add(imaglyser);
      map.camera.flyTo({               // 地图定位到指定位置
        destination: Cesium.Cartesian3.fromDegrees(
          118.48653672087,
          36.690416508705,
          10000
        ), // 相机位置 不是地图位置
        // 相机的姿态
        orientation: {
          heading: Cesium.Math.toRadians(0.0), // 朝向
          pitch: Cesium.Math.toRadians(-90), // 俯视角 默认-90 垂直向下
          roll: 0.0,
        },
        duration: 0,
      });
      

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用MapboxGL和Vue3来加载高德地图实例。首先,确保你已经安装了MapboxGL和Vue3的依赖。 接下来,你可以创建一个Vue组件来加载地图。在这个组件中,你需要先引入MapboxGL和高德地图JavaScript库: ```javascript import mapboxgl from 'mapbox-gl'; import AMapLoader from '@amap/amap-jsapi-loader'; export default { mounted() { // 加载高德地图 AMapLoader.load({ key: 'your-amap-api-key', version: '2.0', plugins: ['AMap.Geocoder'] }).then(() => { // 初始化MapboxGL mapboxgl.accessToken = 'your-mapbox-access-token'; // 创建地图实例 const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], zoom: 12 }); // 在地图上添加高德地图瓦片层 const amapLayer = new AMap.TileLayer(); map.addLayer(amapLayer); // 在地图上添加其他层、标记等 // ... }); } } ``` 在上面的代码中,你需要替换`your-amap-api-key`为你的高德地图API密钥,以及`your-mapbox-access-token`为你的Mapbox访问令牌。你还可以根据需要设置地图的中心点和缩放级别。 最后,将地图容器添加到你的Vue模板中: ```html <template> <div id="map"></div> </template> <script> import mapComponent from '@/components/MapComponent.vue'; export default { components: { mapComponent } } </script> ``` 通过这种方式,你可以在Vue组件中使用MapboxGL和高德地图加载地图实例。记得替换你的API密钥和访问令牌,以及根据需要自定义地图样式和添加其他层。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值