十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【二、创建地图】

在template标签内创建下列DOM

1、在template标签内，创建container的DOM 用于展示高德地图
2、创建一个div（state-text）用于展示当前鼠标所在的坐标信息
3、创建一个div（console）用于展示不同地块信息

上诉三步做完之后就会得到一个展示地图的容器，一个显示地图信息的展示板，以及一个用于控制展示信息的操作面板；

template 标签部分的完整代码

<template>
	<!--container-->
     <div id="container"></div>
     <!--用于展示坐标文字信息-->
     <div class="state-text" >{{texta}}</div>
     <!--控制台面板，用于控制显示不同地块信息-->
     <div class="Console">
        <h5>控制台</h5>
        <hr>
        <div class="Console_list">
            <ul>
                <li><span></span> <el-checkbox v-model="checked1" @change="GetMassif" true-label="2022,#ff2dc6,1" false-label="2022,#ff2dc6,0" label="2022年" size="large" /></li>
                <li><span></span> <el-checkbox v-model="checked1" @change="GetMassif" true-label="2021,#1549cf,1" false-label="2021,#1549cf,0" label="2021年" size="large" /></li>
                <li><span></span> <el-checkbox v-model="checked1" @change="GetMassif" true-label="2020,#e14915,1" false-label="2020,#e14915,0" label="2020年" size="large" /></li>
            </ul>
        </div>
     </div>
</template>

<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 100vh;
    }
    .state-text{
        padding: 0.75rem 1.25rem;
        margin-bottom: 1rem;
        border-radius: 0.25rem;
        position: fixed;
        top: 1rem;
        background-color: white;
        width: auto;
        min-width: 22rem;
        border-width: 0;
        right: 1rem;
        box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
    }
    .Console {
        padding: 0.75rem 1.25rem;
        margin-bottom: 1rem;
        border-radius: 0.25rem;
        position: fixed;
        top: calc( 1rem + 4rem);
        background-color: white;
        width: auto;
        min-width: 11rem;
        border-width: 0;
        right: 1rem;
        box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
    }
    .Console_list li{
        list-style: none;
        line-height: 28px;
    }
    .Console_list li:nth-child(1) span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #ff2dc6;
    }
    .Console_list li:nth-child(2) span{
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #1549cf;
    }
    .Console_list li:nth-child(3) span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #e14915;
    }
</style>

接下来开始进入重点的部分，首先我们在 script 标签内引入所需要的组件
注：本文讲解的内容仅适用 ts 方式，如果写传统的 js 请自行改造代码

代码如下：

<script setup lang='ts'>
	import { onMounted, reactive, ref } from 'vue';
	import {ElCheckbox} from "element-plus"
	import { shallowRef } from '@vue/reactivity'
	import AMapLoader from '@amap/amap-jsapi-loader';
	import axios from 'axios';
	// 上述内容不做注释

	onMounted(() => {
	    initMap() //调用地图
	})
	var amap = (null);//定义一个amap，可以根据自己习惯取名
	var texta = ref()

	//加载地图
	const initMap = () => {
	    AMapLoader.load({
	        key:"你的高德地图KEY",             // 申请好的Web端开发者Key，首次调用 load 时必填
	        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
	        plugins:[ //以下为使用到的JSAPI插件，可以在官方文档中根据自己用到的功能来添加。
	            "AMap.Scale", //工具条，控制地图的缩放、平移等
	            "AMap.ToolBar", //比例尺，显示当前地图中心的比例尺
	            // "AMap.Geolocation", //定位，提供了获取用户当前准确位置、所在城市的方法
	            "AMap.HawkEye", //鹰眼，显示缩略图
	            "AMap.GeoJSON", //GeoJSON
	            "AMap.convertFrom", //坐标系转换
	        ],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
	    }).then((AMap)=>{
	        amap = AMap
	        map = new AMap.Map("container",{  //设置地图容器id
	            viewMode:"2D",    //是否为3D地图模式
	            zooms:[6,16.7], //地图最小和最大的级别
	            zoom:15,           //初始化地图级别
	            center:[109.314545,23.964934], //初始化地图中心点位置
	            mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
	            layers: [//加载图层
	                new AMap.TileLayer.Satellite(), //卫星地图
	                new AMap.TileLayer.RoadNet({ //道路
	                    opacity:0.5  //透明度
	                }),
	            ],//地图图层
	            
	        });
			
			//异步同时加载多个控件
	        map.addControl(new AMap.Scale()); //放大缩小控件
	        map.addControl(new AMap.ToolBar()); //异步同时加载工具条控件
	        // 放大镜控件
	        let HawkEye = new AMap.HawkEye({
	            position: "LT", //控件停靠位置（LT/RT/LB/RB）
	        });
	        map.addControl(HawkEye);
	        
	        map.on('mousemove',showInfoMove)// 绑定鼠标移动事件
	
	    }).catch(e=>{
	        console.log(e);
	    })
	}

	//移动鼠标事件
	const showInfoMove = (e) =>{
	    texta.value = '当前经纬度：'+e.lnglat.getLng()+','+e.lnglat.getLat()
	}
</script>

至此，你已经完成，地图加载出来，并且能够实时获取鼠标所在坐标的功能；

下一章节，实战如何将geojson数据在地图上批量添加地块数据；

第一次在CSDN写文章，希望能帮到大家。

如果觉得有用请给我点个赞。