feat: 新增2D地图以及地图点位
This commit is contained in:
严妍
parent
728a3f0f24
commit
b474419566
@ -30,3 +30,7 @@ export const getRealNameSystem = () => {
|
||||
export const getEngineeringAll = () => {
|
||||
return http.get<ResponseSame<ScreenResponse.EngineeringAllResponse>>(BASEURL + `/gov/api/index/engineeringStat`);
|
||||
};
|
||||
//顶部查询工程统计信息
|
||||
export const getMapProject = () => {
|
||||
return http.get<ResponseSame<ScreenResponse.mapProjectResponse>>(BASEURL + `/gov/api/index/engineeringList`);
|
||||
};
|
||||
|
||||
40
src/api/types/common.d.ts
vendored
40
src/api/types/common.d.ts
vendored
@ -154,4 +154,44 @@ export declare namespace ScreenResponse {
|
||||
finish: number; //今年竣工工程
|
||||
important: number; //重点工程
|
||||
}
|
||||
interface mapProjectResponse {
|
||||
id: string;
|
||||
project_sn: string;
|
||||
engineering_sn: string;
|
||||
engineering_name: string; //工程名称
|
||||
engineering_code: string;
|
||||
engineering_type: number;
|
||||
engineering_use: number;
|
||||
engineering_cost: string; //工程造价(万元)
|
||||
engineering_area: string; //工程总面积(㎡)
|
||||
engineering_length: string;
|
||||
is_important: boolean;
|
||||
longitude: string;
|
||||
latitude: string;
|
||||
province: string; //省
|
||||
city: string; //市
|
||||
district: string; //区
|
||||
address: string; //详细地址
|
||||
license_key: string;
|
||||
license_create_time: string;
|
||||
safety_supervision: string;
|
||||
safety_supervision_person: string;
|
||||
safety_supervision_code: string;
|
||||
safety_supervision_state: string;
|
||||
safety_supervision_plan: string;
|
||||
quality_supervision: string;
|
||||
quality_supervision_person: string;
|
||||
quality_supervision_code: string;
|
||||
quality_supervision_state: string;
|
||||
quality_supervision_plan: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
create_time: string;
|
||||
examine_state: number;
|
||||
reject_reason: string;
|
||||
state: number; //工程状态(1:未开工;2:在建;3:在建.普通停工;4:在建.处罚停 工;5:在建.完工;6:待竣工;7:竣工)
|
||||
update_time: string;
|
||||
ai_alarm_stat: string;
|
||||
enterprise_name: string; //建设单位
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/assets/images/screenImg/mapImg/dian.png
Normal file
BIN
src/assets/images/screenImg/mapImg/dian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
@ -4,19 +4,39 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<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 } from "vue";
|
||||
// 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 initMap() {
|
||||
const initMap = () => {
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b"
|
||||
};
|
||||
@ -29,8 +49,8 @@ function initMap() {
|
||||
const map = new AMap.Map("container", {
|
||||
//设置地图容器id
|
||||
viewMode: "3D", //是否为3D地图模式
|
||||
zoom: 13, //初始化地图级别
|
||||
center: [104.065735, 30.659462], //初始化地图中心点位置
|
||||
zoom: 10, //初始化地图级别
|
||||
center: [114.085947, 22.547], //初始化地图中心点位置
|
||||
mapStyle: "amap://styles/67570a93d67b07a02ee522a2c1180be4"
|
||||
});
|
||||
// 添加插件
|
||||
@ -51,62 +71,139 @@ function initMap() {
|
||||
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 的经纬度值
|
||||
/*const marker = new AMap.Marker({
|
||||
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
||||
position: [113.808299,34.791787],
|
||||
// 通过设置 offset 来添加偏移量
|
||||
offset: new AMap.Pixel(-26, -54),
|
||||
});
|
||||
marker.setMap(map);*/
|
||||
// 单击自定义点位
|
||||
// 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);
|
||||
// }
|
||||
|
||||
// 折线
|
||||
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
|
||||
// 第二种 直接写死 position 的经纬度值
|
||||
mapProjectList.value.forEach((item, index, array) => {
|
||||
const marker = new AMap.Marker({
|
||||
icon: "/src/assets/images/screenImg/mapImg/dian.png",
|
||||
position: [`${item.longitude}`, `${item.latitude}`],
|
||||
// 通过设置 offset 来添加偏移量
|
||||
offset: new AMap.Pixel(-26, -24)
|
||||
});
|
||||
map.add([polyline]);
|
||||
}
|
||||
//信息窗口实例
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
initMap();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="orderBgc">
|
||||
<Map3D class="mapStyle"></Map3D>
|
||||
<!-- <Map2D class="mapStyle"></Map2D> -->
|
||||
<!-- <Map3D class="mapStyle"></Map3D> -->
|
||||
<Map2D class="mapStyle"></Map2D>
|
||||
<headerScreen class="topHeader"></headerScreen>
|
||||
<div class="bottomContent">
|
||||
<leftScreen class="leftScreen"></leftScreen>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user