3.0.6 • Published 4 months ago
laisongis-v3 v3.0.6
laisongis-v3
基于VUE3开发的地图组件,目前支持高德地图,谷歌地图
安装
npm i laisongis-v3
使用 -- 全局导入
main.ts页面
import App from './App.vue'
import laisonGis from 'laisongis-v3'
import 'laisongis-v3/dist/style.css'
const app = createApp(App)
app.use(laisonGis)
使用页面
<template>
<div style="width: 100%">
<mapEntrance
:mapOrigin="mapOrigin"
:propInitData="propInitData"
:markerData="markerData"
:dialogMsg="dialogMsg"
:infoWinStyle="infoWinStyle"
@click="mapClick"
@dragend="mapDragend"
@zoomend="mapZoomend"
@mapOverlaysClick="mapCoverClick"
@mapOverlaysDragend="mapCoverDragend"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import marker from "@/assets/image/marker.png";
import { InfoWindowsConfigAMap } from "@/views/mapTest/infoWinAMap";
import { InfoWindowsConfigGoogle } from "@/views/mapTest/infoWindowsGoogle";
export default defineComponent({
name: "mapTest",
setup() {
const propInitData = reactive({
center: {
lng: 120.1099,
lat: 30.2671,
},
zoom: 10,
mapIndex: 1,
projection: "EPSG:4490",
viewMode: "3d",
mapType: "roadmap",
zooms: [1, 21],
});
const markerData = ref([
{
center: [120.1099, 30.2671],
data: {
type: "equip",
info: {
meterNo: "no002",
userName: "tony",
nickName: "王五",
address: "江苏省",
id: "1",
},
},
dataIndex: 1,
// autoOpen: true,
showCluster: true,
style: {
size: [60, 60],
image: marker,
imageSize: [40, 40],
},
},
{
center: [121, 31],
data: {
type: "concentator",
info: {
concentorNo: "1",
installTime: "里斯",
address: "黑龙江省",
id: "2",
},
},
dataIndex: 2,
showCluster: true,
population: 100,
// autoOpen: true,
populationStyle: {
strokeColor: "rgb(150, 194, 255)",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "rgb(207, 227, 255)",
fillOpacity: 0.35,
},
style: {
size: [60, 60],
image: marker,
imageSize: [40, 40],
},
},
]);
// 弹窗label
const dialogMsg = [
{
type: "equip",
data: [
// { label: '标题', fields: 'title' },
{ label: "表号", fields: "meterNo" },
{ label: "用户名", fields: "userName" },
{ label: "姓名", fields: "nickName" },
{ label: "安装地址", fields: "address" },
{ label: "id", fields: "id" },
],
},
{
type: "concentator",
data: [
// { label: '标题', fields: 'title' },
{ label: "集中器编号", fields: "concentorNo" },
{ label: "安装地址", fields: "address" },
{ label: "安装时间", fields: "installTime" },
{ label: "id", fields: "id" },
],
}
];
const mapOrigin = ref("amap");
function mapClick(data: any) {
console.log("地图点击事件", data);
}
function mapDragend(data: any) {
console.log("地图拖拽", data);
}
function mapZoomend(data: any) {
console.log("地图缩放", data);
}
function mapCoverClick(data: any) {
console.log("覆盖物点击事件", data);
}
function mapCoverDragend(data: any) {
console.log("覆盖物拖拽事件", data);
markerData.value.forEach((i) => {
if (i.dataIndex === data.data.dataIndex) {
i.center = data.coord;
}
});
}
// 高德弹窗样式
function infoWinStyle(val: any, clickEvent: any) {
return InfoWindowsConfigAMap(val, clickEvent);
}
// //谷歌弹窗样式
// function infoWinStyle(val: any) {
// return InfoWindowsConfigGoogle(val);
// }
return {
propInitData,
mapOrigin,
markerData,
dialogMsg,
handle,
mapClick,
mapCoverClick,
mapCoverDragend,
infoWinStyle,
mapDragend,
mapZoomend,
};
},
});
</script>
弹窗样式
/**
* 信息弹窗配置
*/
export function InfoWindowsConfigAMap(data, closeInfoWindow) {
// 弹窗内容
let title = '', content = [], contentHtml = ''
data.data?.forEach(i => {
if (i.fields !== 'title') {
contentHtml += "<span>" + i.label + ":" + i.value + "</span>"
}
})
content.push(contentHtml)
// 定义信息弹窗
let info = document.createElement("div");
info.style.setProperty('position', 'relative');
info.style.setProperty('top', '10');
info.style.setProperty('width', 'auto');
info.style.setProperty('padding', '0');
info.style.setProperty('margin-left', '-90px')
info.style.setProperty('margin-top', '-150px')
info.style.setProperty('display', 'flex')
info.style.setProperty('flex-direction', 'column-reverse')
info.style.setProperty('cursor', 'default')
// 宽度设置
info.style.width = "220px";
info.style.height = '140px'
let titleD = document.createElement("div");
titleD.style.setProperty('display', 'inline-block');
titleD.innerHTML = title;
// 定义底部内容
var bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
var sharp = document.createElement("img");
sharp.src = "https://webapi.amap.com/images/sharp.png";
bottom.appendChild(sharp);
info.appendChild(bottom);
// 定义中部内容
let middle = document.createElement("div");
middle.innerHTML = content;
middle.style.setProperty('display', 'flex')
middle.style.setProperty('background', 'white');
middle.style.setProperty('border', '1px solid #b4b4b4');
middle.style.setProperty('padding', '10px');
middle.style.setProperty('align-items', 'flex-start')
middle.style.setProperty('flex-direction', 'column-reverse')
middle.style.setProperty('font-size', '14px')
middle.style.setProperty('font-weight', '500')
middle.style.setProperty('padding-top', '10px')
middle.style.setProperty('color', 'black')
info.appendChild(middle);
// 定义关闭按钮
let closeX = document.createElement("img");
let top = document.createElement("div");
top.style.setProperty('display', 'flex');
top.style.setProperty('background', 'white');
top.style.setProperty('padding', '5px');
top.style.setProperty('flex-direction', 'row-reverse');
top.style.setProperty('border', '1px solid #b4b4b4');
top.style.setProperty('border-bottom', 'none');
top.style.setProperty('background', '#efefef');
closeX.src = "https://webapi.amap.com/images/close2.gif";
closeX.style.setProperty('cursor', 'pointer')
closeX.dataIndex = data.dataIndex
closeX.onclick = closeInfoWindow
top.appendChild(closeX);
info.appendChild(top);
return info;
}
功能介绍
- 可自由切换地图服务源(AMAP/Google)
- 可自由配置地图初始化数据
- 自定义地图样式
- 自定义地图语言
- 自定义是否显示弹窗
- 自定义是否打开多个弹窗
- 自定义弹窗是否在页面移动时关闭
- 自定义覆盖点数据
- 自定覆盖线段数据
- 自定义覆盖面数据
- 自定义配置弹窗内容
- 自定义配置弹窗样式
- 自定义信息跳转地图
- 手动重新加载页面
- 自定义定位信息配置
参数配置
/** 地图服务源 */
mapOrigin = 'amap' / 'google' // 高德地图/谷歌地图
/** 传入的地图初始化数据 */
propInitData = {
center: { // 地图中心点坐标
lng: xxx,
lat: xxx,
},
zoom: xx, // 地图初始化层级
projection: "EPSG:4490", // 地图坐标系
viewMode: '2D' / '3D', // 地图展示模式 2D/3D
mapType: 'roadmap' / 'satellite' / 'hybrid', // 地图显示类型 默认道路图/绿色卫星图/卫星/道路图混合(鸟瞰图)
zooms: [1, 21], // 地图可缩放层级 [1, 21]
minZoom: 1, // 地图最小缩放层级
maxZoom: 21, // 地图最大缩放层级
}
/** 地图样式 */
mapStyle = {}
/** 地图初始化语言 */
language = 'zh-CN' / 'en'
/** 是否显示弹窗 */
popUpToggle = true / false
/** 是否打开多个弹窗 */
multiPopUpToggle = true /false
/** 弹窗是否在页面移动时关闭 */
popUpCloseScroll = true / false
/** 覆盖点数据集合 */
markerData = [{
center: xxx,
autoOpen: true / false, // 是否自动打开弹窗
editOverlays: true / false, // 是否可拖拽
dataIndex: xx, // 数据key值
data: { // 弹窗数据
type: string, // 弹窗类型,与dialogMsg的type匹配
infoMsg: {} // 覆盖点弹窗数据
},
style: { // 覆盖点样式
size: [xx, xx],
image: string,
imageSize: [xx, xx]
},
}]
/** 折线数据集合 */
lineData = [{
path: [],
data: {
type: string,
infoMsg: {}
},
dataIndex: number,
strokeColor: string,
strokeOpacity: number,
strokeWeight: number,
zIndex: number,
editOverlays: boolean,
editable: boolean,
}]
/** 覆盖面数据集合 */
sideData = [{
path: [],
data: {
type: string,
infoMsg: {}
},
dataIndex: number,
strokeColor: string,
strokeOpacity: number,
strokeWeight: number,
zIndex: number,
editOverlays: boolean,
editable: boolean,
}]
/** 弹窗label */
dialogMsg = {}
/** 弹窗样式 */
infoWinStyle = Function
/** 输入坐标后跳转至 */
skipMsg = {}
/** 重新加载页面 */
reLoadControl = true / false
/** 定位信息配置项 */
positionOption = {}