webGIS开发第七章（地图图层的使用）

图层

1. 标准图层 TileLayer
2. 卫星图层 TileLayer.Satellite
3. 路网图层 TileLayer.RoadNet
4. 实时交通图层 TileLayer.Traffic
5. 楼块图层 Buildings
6. 室内地图 IndoorMap

例子：实时交通图层地图的使用

    var map = new AMap.Map('container',{
         zoom:10
    })

    var traffic = new AMap.TileLayer.Traffic({
  'autoRefresh': true,     //是否自动刷新，默认为false
  'interval': 180,         //刷新间隔，默认180s
    });

    map.add(traffic); //通过add方法添加图层
    //map.remove(traffic) //需要时可以移除

在vue3中如何应用

<template>
    <div id="container"></div>
    <el-button type="" @click="add">显示实时交通图层</el-button>
    <el-button type="" @click="remove">隐藏实时交通图层</el-button>
</template>
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null
let traffic = null
onMounted(() => {
    AMapLoader.load({
        key: "21c44ceb3f0aaeaf82d6a698c574cd90",
        version: "2.0",
        plugins: [],
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 10, // 初始化地图级别
                center: [117.120128, 36.652069], // 初始化地图中心点位置
                // pitch: 45,
                terrain: true,
                skyColor: 'red',
                showIndoorMap: true,
                roofColor: 'red',
                showLabel: true,
                wallColor: '#000',
            });
            traffic = new AMap.TileLayer.Traffic({
                'autoRefresh': true,     //是否自动刷新，默认为false
                'interval': 1,         //刷新间隔，默认180s
            });
        })
        .catch((e) => {
            console.log(e)
        });
});
const add = (() => {
    map.add(traffic); //通过add方法添加图层
})
const remove = (() => {
    map.remove(traffic);
})
onUnmounted(() => {
    map?.destroy();
});
</script>

<style scoped>
body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

#container {
    width: 500px;
    height: 500px;
}
</style>

点击显示实施交通图层

点击隐藏实施交通图层

其他的图层也是这样使用

其他的图层

其他图层使用的链接

原文地址：https://blog.csdn.net/weixin_60196946/article/details/136934021

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！