vue3结合pinia使用高德地图的完整示例
站长
· 阅读数 28
在我们使用高德地图的时候，官方给我们推荐了很多案例，demo，但是这些案例都是使用原生方法接入，并没有提供vue或者react 的demo，vue2的 接入网上也很多人都有写过，今天我们就来看看 vue3如何使用常用的高德地图api
前置工作
在开发之前我们需要了解 vue3 中接入高德地图的几个步骤
- 首先安装包并引入
npm i @amap/amap-jsapi-loader --save
import AMapLoader from '@amap/amap-jsapi-loader'
- 使用官方介绍的方式进行加载
高德地图这里提供了接口可以直接下载 vue3 组件的完整代码， 这里我直接官方的这个下载下来进行开发。Vue3有选项式和组合式两种开发方式，选项式使用上面的方式即可，我的示例使用组合式。 下载好了以后这个项目是直接可以run的， 我在 dependencies 中增加两个依赖 分别是 element-plus 和 pinia 。
完成效果
1、初始化地图，绘制点及线，渲染点位信息窗体
2、点及点、线、及空白处弹出不同的信息窗体
3、绘制图例
4、可连接两个点，绘制直线或曲线
5、可根据输入的经纬度，新增节点
模块的引入
- 首先导入的方式，和官网一样，后面我会贴完整代码， 这里我们使用
plugins加载插件， 其他配置如Loca， 直接进行配置， 这里需要注意版本问题， 写成 ‘2.0’ 是不行的，初始化函数在onmounted生命周期中执行。 - AMap存储 这里我做了很多存储，大家知道
.value的语法是vue3获取ref的语法，使ref的话会比较麻烦，这里我直接把实例化以后的对象存储在了pinia中，其他api的调用也直接在pinia里面进行，可以做到很好的解耦及维护。 - 模版样式不生效问题 我们在使用的时候， 就像我之前写的文章，点位新增的时候，我们会插入
content字符串模版，替换点样式，这里有两种方案修改样式，一种是 插入DOM，不使用字符串，然后在DOM上通过style直接修改样式，另一种就是使用模版的时候直接给class类名，但是这种样式如果我们给vue的style加了scoped就不会生效，这里大家可以自己灵活选择用哪种，我这里暂时先使用模版的方式，去掉了scoped。 - 图例 图例这里除了导入的时候，需要配置一下，使用上来说变化不大，样式的修改包括位置信息等，也都可以通过对象进行配置。
- 存储方案 这里除了地图初始化以后，其他的操作我们都封装到了
pinia中， 包括每一次实例化需要复用的类都进行了存储， 一些交互型的数据使用了虚拟数据或本地存储，正常在业务逻辑中这些部分应该是和后端通信的。
注意：代码中 key 请使用自己的key， 高德key 的申请如果不会的话，可以直接查看官方示例流程即可
下面我们先看一下模版代码，这里面我们显示在生命周期里面加载了地图，然后通过 initMapHandler 方法完成绘制、事件注册、信息窗体注册等初始化。 同时模版中我们使用一个简单的 form 来动态获取经纬度，通过 setMarker 方法完成点的绘制。
<template>
<div id="root">
<div>
<h3>添加选点请输入坐标</h3>
<el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" style="max-width: 600px">
<el-form-item label="经度" prop="lng">
<el-input v-model="form.lng"/>
</el-form-item>
<el-form-item label="纬度" prop="lat">
<el-input v-model="form.lat"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit(ruleFormRef)">确认</el-button>
<el-button type="primary" @click="onClear(ruleFormRef)">清空</el-button>
</el-form-item>
</el-form>
</div>
<div id="container"></div>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import getStroe from "./pinia/index";
const store = getStroe();
const { initMapHandler, setMarker } = store;
const ruleFormRef = ref()
const rules = reactive({
lng: [{required:true, message: '请输入经度', trigger: 'blur'}],
lat: [{required:true, message: '请输入纬度', trigger: 'blur'}]
})
const form = reactive({
lng: '',
lat: ''
})
const onSubmit = async (formEl) => {
await formEl.validate((valid,fields)=>{
if(valid){
const marker = {
position: [form.lng, form.lat],
name:'新增点位',
pointData: { out: 0, provide: 0}
}
setMarker(marker, 'new')
}
})
}
const onClear = (formEl) => {
formEl.resetFields()
}
onMounted(() => {
window._AMapSecurityConfig = {
securityJsCode: "d35fb6edbcc00628e7fa9200c2829953",
};
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MouseTool", "AMap.Driving", "AMap.BezierCurve"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
Loca: {
version: "2.0.0",
},
}).then(res=>{
initMapHandler(res, "container");
}).catch((e) => {
console.log("error", e);
});
});
</script>
<style>
#container {
width: 1350px;
height: 900px;
}
#root {
display: flex;
width: 100%;
}
#root > div:first-child {
display: flex;
flex-direction: column;
width: 250px;
padding: 5px;
margin-right: 10px;
box-shadow: 2px 2px 2px 2px #333;
}
.context_menu {
position: relative;
min-width: 12rem;
padding: 0;
background-color: white;
}
.context_menu p {
padding: 0.25rem 1.25rem;
cursor: pointer;
}
.context_menu p:hover {
background: #ccc;
}
.btn {
width: 80px;
margin-top: 10px;
}
.marker-route {
width: 15px;
height: 15px;
background-color: #22ddb8;
border-radius: 10px;
}
.marker-route.new{
background-color: #dd0a69;
}
.active {
background-color: #f76809;
}
.content {
display: flex;
align-items: center;
padding: 1px;
color: white;
background-color: rgb(0 0 0 / 30%);
}
.content span {
display: block;
width: 20px;
height: 20px;
margin: 0 10px;
background-color: #36b;
}
.content p {
margin-right: 10px;
}
.test {
box-sizing: content-box;
display: inline;
float: left;
height: 30px;
padding: 2px 10px;
line-height: 30px;
}
.test a {
color: #333 !important;
}
.test span {
width: 80px !important;
margin-left: 10px;
border-radius: 10px;
}
.amap-info-content {
background-color: rgb(255 255 255 / 60%);
}
.test_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
padding: 10px 18px 10px 10px;
overflow: auto;
line-height: 1.4;
background-color: rgb(255 255 255 / 60%);
border: 1px solid rgb(0 0 0 / 20%);
}
.input_inner {
width: 30px;
margin-right: 5px;
border: 1px solid #333;
border-radius: 2px;
}
</style>
在拆分逻辑代码之前，可以先看一下我们的模拟数据长什么样， 我使用的 coordData 模拟数据就是由这样的对象组成的数组， 大家可以任意 增加其他点位。
{
name: "黑龙江",
position: [127, 47],
pointData: {
out: 100,
provide: 10,
},
line: [
{
current: [
[127, 47],
[126, 43],
],
type: 1,
},
],
},
需要关注的细节点
- 样式 点和线的样式都是可以更改或配置的， 比如点的样式 在setMarker中我通过设置 content 模版的动态类名还修改样式，这里也可以使用配置项的 icon，来动态加载图标， 线的样式也是同理。
- 事件 弹窗的事件，我们实例化了点或者线的实例对象以后通过 on 的方式进行注册，在这里我们通过点击(click)来触发，这里修改成原生的其他事件也是可以的，比如 mouseover 这种。
- 信息窗体 点、线、和空白处点击弹出信息窗体的逻辑分别是在 点注册、线注册、以及初始化的时候注册的。空白处我们需要注册右键菜单，需要实例化类，这里我们直接在 contextMenuHandler 方法封装了实例化的过程。 信息窗体弹出的位置通过事件注册中的 实例对象的open方法第二个参数配置。
- 贝赛尔曲线 绘制曲线这里我封装了 setCurlLines 方法， 通过注释可以更改曲线还是直线的绘制，通过 getCenterLonLat 方法获取两个坐标点之间的中间点， 中间点便宜的方式设置曲率，具体的贝塞尔曲线规则及使用方案可以查看官方示例。
完整代码
代码如何使用？首先就是上面的流程，在官网上下载vue3组件完整代码，增加我上面说的两个依赖，使用我上面的模版替换掉 MapContainer 的内容。 然后在 components 新增 data.js ，内容为上面的对象组成的数据导出，同时新增pinia文件夹，新建index.js， 将下面的完整代码 复制到 这个index.js 中。最后别忘了在 main 中注册 pinia 以及 element。 运行项目即可。
import { defineStore } from "pinia";
import { coordData } from "../data";
// 过滤线方法
function setLine(arr) {
return arr.reduce((prev, item) => {
if (item?.line) {
prev.push(...item.line);
}
return prev;
}, []);
}
const headColors = ["#3366bb", "#6622FF"];
function getCenterLonLat(oneLon, oneLat, twoLon, twoLat) {
//oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度；
let aLon = 0, aLat = 0;
let bLon = Number(oneLon) - Number(twoLon);
let bLat = Number(oneLat) - Number(twoLat);
//Math.abs()绝对值
if( bLon > 0){
aLon = Number(oneLon) - Math.abs(bLon) / 2;
}else{
aLon = Number(twoLon) - Math.abs(bLon) / 2;
}
if( bLat > 0){
aLat = Number(oneLat) - Math.abs(bLat) / 2;
}else{
aLat = Number(twoLat) - Math.abs(bLat) / 2;
}
return [aLon, aLat];
}
const geoStore = defineStore("getStroe", {
state: () => {
return {
sourceInfoWindow: null, // 信息窗体
AMapInstance: null, // 高德实例
currentData: {}, // 当前选中点信息
currentPonit: null, // 当前选中点DOM
mapInstance: null, // 实例化后的地图容器
};
},
actions: {
// 初始化地图实例
initMapHandler(amap,instance){
this.AMapInstance = amap;
this.mapInstance = new amap.Map(instance, {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 4.8, //初始化地图级别
center: [116.397428, 39.90923], //初始化地图中心点位置
});
this.initWindow()
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
coordData.forEach( (marker) => {
this.setMarker(marker); // 设置点
});
// 过滤线信息
let renderLine = setLine(coordData);
// 设置线
let polyline = renderLine.reduce((prev, item) => {
let weight = item.type === 1 ? 5 : 3;
let color = item.type === 1 ? headColors[0] : headColors[1];
prev.push(this.setLines(item.current, color, weight));
return prev;
}, []);
this.mapInstance.add([...polyline]); // 绘制线
this.setLegentHa() // 图例
},
// 设置图例
setLegentHa(){
new this.contextMenuHandler(this.mapInstance) // 自定义右键菜单
// Loca 在加载的时候 直接被挂在到了 window 上
let loca = new window.Loca.Container({
map: this.mapInstance,
});
// 图例, 图例可以实例化多个，使用定位来设置位置
new window.Loca.Legend({
loca: loca,
title: {
label: "线段类型",
fontColor: "rgba(255,255,255,0.2)",
fontSize: "16px",
fontWeight: 'bold',
padding: '0 0 5px 0',
margin: 0,
},
style: {
backgroundColor: "rgba(255,255,255,0.2)",
left: "10px",
bottom: "100px",
fontSize: "12px",
},
dataMap: [
{ label: "类型1", color: headColors[1] },
{ label: "类型2", color: headColors[0] },
],
});
//修改图例排列方式
document
.getElementsByClassName("amap-loca loca-controls")[0]
.setAttribute("id", "testid");
let lis = document.querySelectorAll("#testid li");
for (let i = 0; i < lis.length; i++) {
lis[i].setAttribute("class", "test");
}
},
// 设置直线
setLines(lnglat, color, weight){
// 中心点用于弹出线上的信息窗体
const centerLngLat = getCenterLonLat(lnglat[0][0],lnglat[0][1],lnglat[1][0],lnglat[1][1]) // 获取两点之间的中心点
const category = new this.AMapInstance.Polyline({
path: lnglat,
// showDir:true ,// 设置线方向
strokeColor: color, // 线颜色
strokeWeight: weight, // 线宽
// draggable: true, 是否可拖拽
cursor: "pointer", // 鼠标在线上的样式
strokeOpacity: 0.6, // 透明度
});
category.on("click", (ev) => {
// 此处也可像下面的右键菜单一样，添加左键菜单。
// console.log(AMap, "ev", ev, category);
const { lnglat } = ev // 当前点击位置经纬度
const infoWindow = new this.AMapInstance.InfoWindow({
content: `<div>测试信息</div>`
})
infoWindow.open(this.mapInstance, [centerLngLat[0],centerLngLat[1]]);
});
//创建右键菜单
let contextMenu = new this.AMapInstance.ContextMenu();
//右键放大
contextMenu.addItem(
"放大一级",
() => {
this.mapInstance.zoomIn();
},
0
);
//绑定鼠标右击事件——弹出右键菜单
category.on("rightclick", (e) => {
contextMenu.open(this.mapInstance, e.lnglat);
});
return category;
},
// 设置曲线
setCurlLines(lnglat, color, weight){
// 控制点计算 https://lbs.amap.com/demo/javascript-api-v2/example/overlayers/beziercurve-draw-and-edit
//贝塞尔曲线经过的起点，途经点，控制点的二维数组
const pointA = lnglat[0]
const centerLngLat = getCenterLonLat(lnglat[0][0],lnglat[0][1],lnglat[1][0],lnglat[1][1]) // 获取两点之间的中心点
const center = [centerLngLat[0]+0.51,centerLngLat[1]+0.51] // 中心点位置偏移，绘制曲线
const path = [
pointA,
[...center,...lnglat[1]]
]
// 打印路径检查
console.log('path',path, this.AMapInstance.BezierCurve);
return new this.AMapInstance.BezierCurve({
path,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 3,
strokeColor: color,
strokeOpacity: 1,
strokeWeight: weight,
// 线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 10],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
})
},
// 设置点
setMarker(marker, type) {
//创建右键菜单
let contextMenu = new this.AMapInstance.ContextMenu();
//右键放大
contextMenu.addItem(
"放大一级",
() => {
this.mapInstance.zoomIn();
},
0
);
//右键缩小
contextMenu.addItem(
"缩小一级",
() => {
this.mapInstance.zoomOut();
},
1
);
contextMenu.addItem("设置起点", () => {
this.changeStyle(markerd.dom, marker);
contextMenu.close(); // 关闭右键菜单
});
contextMenu.addItem("与起点连线", () => {
if (!this.currentPonit) {
alert("请选择起点");
contextMenu.close();
return;
} else {
// 这里其实可以根据数据判定线类型了，因为第二个选中点的信息+和第一个选中点的信息都有了,但是过滤方法会比较复杂
let path = [this.currentData.position, marker.position];
// const polyline1 = this.setLines(path, "#3366bb", 5); // 设置直线
const polyline1 = this.setCurlLines(path, "#3366bb", 5); // 设置曲线
this.mapInstance.add(polyline1); // 添加线
this.mapInstance.setFitView([polyline1]) // 自动聚焦到所添加的线
this.clearPoint();
}
contextMenu.close(); // 关闭右键菜单
});
// 根据是否是新增点位 来设置样式
let content = `<div class="marker-route ${type === 'new' ? 'new' : ''}"></div>`;
let markerd = new this.AMapInstance.Marker({
map: this.mapInstance,
// icon: marker?.icon, // 可根据 数据中提供的 状态设置图标
content,
offset: new this.AMapInstance.Pixel(-8, -8),
visible: true, // 点标记是否可见
position: [marker.position[0], marker.position[1]],
});
let inputO = window.localStorage.getItem(marker.name + "inputOut");
let inputP = window.localStorage.getItem(marker.name + "inputPro");
// 左键点击的信息窗体， 宽度会在碰触到容器边缘的时候自适应的缩小
markerd.contents = `
<div>${marker.name}点</div>
<div>数值1：<input id="inputOut" class="input_inner" value="${
inputO ?? marker?.pointData?.out
}"/>单位1</div>
<div>数值2：<input id="inputPro" class="input_inner" value="${
inputP ?? marker?.pointData?.provide
}" />单位2</div>
<div>位置：经度${marker.position[0]},纬度${marker.position[1]}</div>`;
markerd.data = marker;
// 也可以使用 mouseover 等 原生事件触发 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseenter_event
markerd.on("click", (e)=>{
// 设置信息窗体
this.sourceInfoWindow.setContent(e.target.contents);
this.sourceInfoWindow.open(this.mapInstance, e.target.getPosition());
});
// 初始化的时候主动触发 点的点击事件， 完成弹窗出现
if (marker.name === "新疆") {
// 触发上面的点击事件
markerd.emit("click", { target: markerd });
}
//绑定鼠标右击事件——弹出右键菜单
markerd.on("rightclick", (e) => {
contextMenu.open(this.mapInstance, e.lnglat);
});
return markerd;
},
// 初始化信息窗体 侦听输入事件
initWindow() {
const _this = this
// 信息窗体
let infoWindow = new this.AMapInstance.InfoWindow({
offset: new this.AMapInstance.Pixel(0, -10),
retainWhenClose: true,
});
this.sourceInfoWindow = infoWindow;
infoWindow.on("open", function () {
let inputOut = document.getElementById("inputOut");
let inputPro = document.getElementById("inputPro");
inputOut.addEventListener("change", (e) => {
_this.setInput(e, "inputOut");
// window.location.reload();
});
inputPro.addEventListener("change", (e) => {
_this.setInput(e, "inputPro");
// window.location.reload();
});
});
},
contextMenuHandler(){
const _this = this
//自定义菜单类
class ContextMenu {
constructor(map) {
let me = _this;
//地图中添加鼠标工具MouseTool插件
_this.mouseTool = new _this.AMapInstance.MouseTool(map);
_this.contextMenuPositon = null;
const fragment = document.createElement("div"); // 使用 DOM 方式, 方便添加事件
fragment.className = "info context_menu";
const p = document.createElement("p");
p.addEventListener("click", this.delMarkerMenu);
p.textContent = "移除上次选中信息";
fragment.appendChild(p);
//通过content自定义右键菜单内容
_this.contextMenu = new _this.AMapInstance.ContextMenu({
isCustom: true,
content: fragment,
});
//地图绑定鼠标右击事件——弹出右键菜单
map.on("rightclick", function (e) {
me.contextMenu.open(map, e.lnglat);
me.contextMenuPositon = e.lnglat; //右键菜单位置
});
}
delMarkerMenu() {
// 右键菜单上次选中点的信息
_this.clearPoint();
_this.mouseTool.close();
_this.contextMenu.close();
}
}
return new ContextMenu(this.mapInstance)
},
// 保存输入信息
setInput(e, name) {
let text =
e.target.parentElement.parentElement.children[0].innerText.split(
"点"
)[0];
// let current = coordData.filter((item) => {
// return item.name === text
// })
window.localStorage.setItem(text + name, e.target.value);
},
// 工具方法
// 修改DOM 类名
changeStyle(res, data) {
if (this.currentPonit !== null) {
this.currentPonit.classList.remove("active");
}
this.currentPonit = res.children[0];
this.currentData = data;
this.currentPonit.classList.add("active");
},
// 清除点信息
clearPoint() {
if (this.currentPonit) {
this.currentPonit.classList.remove("active");
}
this.currentPonit = null;
this.currentData = {};
},
},
getters: {},
});
export default geoStore;
转载自:https://juejin.cn/post/7395151664284565540