221 lines
8.0 KiB
Vue
221 lines
8.0 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div id="container"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||
/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
|
||
因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
|
||
否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
|
||
// import { shallowRef } from "@vue/reactivity";
|
||
import { ref, onMounted } from "vue";
|
||
import { getMapProject } from "@/api/modules/largeSreen";
|
||
|
||
onMounted(() => {
|
||
getProjectList();
|
||
});
|
||
// const map = shallowRef(null);
|
||
const path = ref([]);
|
||
const current_position = ref([]);
|
||
const projectStatusEnum = ref({
|
||
1: "开工前准备",
|
||
2: "在建工程",
|
||
3: "停工工程",
|
||
4: "完工待验收",
|
||
5: "已验收（安全评价）",
|
||
6: "已验收未备案",
|
||
7: "已竣工验收备案"
|
||
});
|
||
const mapProjectList = ref([]);
|
||
const getProjectList = async () => {
|
||
const { result } = await getMapProject();
|
||
mapProjectList.value = result;
|
||
console.log(mapProjectList.value, "aaa");
|
||
initMap();
|
||
};
|
||
function getImageUrl(name: string) {
|
||
return new URL(`../../../../assets/images/screenImg/mapImg/${name}` + ".png", import.meta.url).href;
|
||
}
|
||
const initMap = () => {
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b"
|
||
};
|
||
AMapLoader.load({
|
||
key: "ee87cfd8354d3ff2a898036bacc4b8a2", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||
version: "1.4.15" // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||
// plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||
})
|
||
.then(AMap => {
|
||
const map = new AMap.Map("container", {
|
||
//设置地图容器id
|
||
viewMode: "3D", //是否为3D地图模式
|
||
zoom: 10, //初始化地图级别
|
||
center: [114.085947, 22.547], //初始化地图中心点位置
|
||
mapStyle: "amap://styles/67570a93d67b07a02ee522a2c1180be4"
|
||
});
|
||
// 添加插件
|
||
AMap.plugin(
|
||
["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"],
|
||
function () {
|
||
//异步同时加载多个插件
|
||
// 添加地图插件
|
||
map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
|
||
map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
|
||
map.addControl(new AMap.HawkEye()); // 显示缩略图
|
||
map.addControl(new AMap.Geolocation()); // 定位当前位置
|
||
map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
|
||
|
||
// 以下是鼠标工具插件
|
||
const mouseTool = new AMap.MouseTool(map);
|
||
// mouseTool.rule();// 用户手动绘制折线图,测量距离
|
||
mouseTool.measureArea(); // 测量面积
|
||
}
|
||
);
|
||
// 单击自定义点位
|
||
// map.on("click", e => {
|
||
// // lng ==> 经度值 lat => 维度值
|
||
// current_position.value = [e.lnglat.lng, e.lnglat.lat];
|
||
// path.value.push([e.lnglat.lng, e.lnglat.lat]);
|
||
// // addMarker();
|
||
// // addPolyLine();
|
||
// });
|
||
// // 实例化点标记
|
||
// // 第一种(封成函数来触发)
|
||
// function addMarker() {
|
||
// const marker = new AMap.Marker({
|
||
// icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
||
// position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
|
||
// // 通过设置 offset 来添加偏移量
|
||
// offset: new AMap.Pixel(-26, -54)
|
||
// });
|
||
// console.log("我是经纬度", current_position.value);
|
||
// marker.setMap(map);
|
||
// }
|
||
|
||
// 第二种 直接写死 position 的经纬度值
|
||
mapProjectList.value.forEach((item, index, array) => {
|
||
const marker = new AMap.Marker({
|
||
icon: getImageUrl("dian"),
|
||
position: [`${item.longitude}`, `${item.latitude}`],
|
||
// 通过设置 offset 来添加偏移量
|
||
offset: new AMap.Pixel(-26, -24)
|
||
});
|
||
//信息窗口实例
|
||
const infoWindow = new window.AMap.InfoWindow({
|
||
offset: new window.AMap.Pixel(0, -31)
|
||
});
|
||
|
||
// // 图标-项目延期
|
||
// const postponeImage = require("@/assets/images/screenImg/mapImg/iconPostpone.png");
|
||
// // 图标-停工整改
|
||
// const shutdownRectificationImage = require("@/assets/images/screenImg/mapImg/iconShutdownRectification.png");
|
||
// // 图标-项目停滞
|
||
// const stagnateImage = require("@/assets/images/screenImg/mapImg/iconStagnate.png");
|
||
// // 图标-竣工验收
|
||
// const completedImage = require("@/assets/images/screenImg/mapImg/iconCompleted.png");
|
||
// // 图标-正常施工
|
||
// const normalConstruction = require("@/assets/images/screenImg/mapImg/iconNormalConstruction.png");
|
||
|
||
// const statusIcons = {
|
||
// projectDelay: createIcon(postponeImage), // 项目延期
|
||
// suspensionandrectification: createIcon(shutdownRectificationImage), // 停工整改
|
||
// projectStagnation: createIcon(stagnateImage), // 项目停滞
|
||
// completionAcceptance: createIcon(completedImage), // 竣工验收
|
||
// normalConstruction: createIcon(normalConstruction) // 竣工验收
|
||
// };
|
||
// /**
|
||
// * 创建地图图标
|
||
// * @param {string} image icon图片
|
||
// */
|
||
// function createIcon(image) {
|
||
// return new window.AMap.Icon({
|
||
// size: new window.AMap.Size(28, 40), // 图标尺寸
|
||
// image, // 图标的取图地址
|
||
// imageSize: new window.AMap.Size(28, 40), // 图标所用图片大小
|
||
// imageOffset: new window.AMap.Pixel(0, 0) // 图标取图偏移量
|
||
// });
|
||
// }
|
||
marker.content = `<div class="info-window" style="font-size: 14px">
|
||
<div class="info">
|
||
<span class="label" style="font-weight: 600">项目名称：</span>
|
||
<span class="value">${item.engineering_name}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label" style="font-weight: 600">项目状态：</span>
|
||
<span class="value">${projectStatusEnum.value[item.state] ? projectStatusEnum.value[item.state] : "暂无"}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label" style="font-weight: 600">项目造价：</span>
|
||
<span class="value">${item.engineering_cost || 0}万元</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label" style="font-weight: 600">工程面积：</span>
|
||
<span class="value">${item.engineering_area || 0}m²</span>
|
||
</div>
|
||
<div class="info">
|
||
<span class="label" style="font-weight: 600">建设单位：</span>
|
||
<span class="value">${item.enterprise_name || "暂无"}</span>
|
||
</div>
|
||
<span class="info">
|
||
<span class="label" style="font-weight: 600">项目地址：</span>
|
||
<span class="value">${item.province + item.city + item.district + item.address || "暂无"}</span>
|
||
</div>
|
||
</div>`;
|
||
marker.on("mousemove", markerMousemove);
|
||
// 鼠标移出事件
|
||
marker.on("mouseout", markerMouseout);
|
||
// 鼠标移入事件df
|
||
function markerMousemove(e) {
|
||
infoWindow.setContent(e.target.content);
|
||
infoWindow.open(map, e.target.getPosition());
|
||
}
|
||
|
||
// 鼠标移出事件
|
||
function markerMouseout(e) {
|
||
infoWindow.setContent(e.target.content);
|
||
infoWindow.close(map, e.target.getPosition());
|
||
}
|
||
marker.setMap(map);
|
||
});
|
||
// 鼠标移入事件
|
||
|
||
// // 折线
|
||
// function addPolyLine() {
|
||
// const polyline = new AMap.Polyline({
|
||
// path: path.value,
|
||
// isOutline: true,
|
||
// outlineColor: "#ffeeff",
|
||
// borderWeight: 1,
|
||
// strokeColor: "#3366FF",
|
||
// strokeOpacity: 0.6,
|
||
// strokeWeight: 5,
|
||
// // 折线样式还支持 'dashed'
|
||
// strokeStyle: "solid",
|
||
// // strokeStyle是dashed时有效
|
||
// // strokeDasharray: [10, 5],
|
||
// lineJoin: "round",
|
||
// lineCap: "round",
|
||
// zIndex: 50
|
||
// });
|
||
// map.add([polyline]);
|
||
// }
|
||
})
|
||
.catch(e => {
|
||
console.log(e);
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.app-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|