|
|
|
|
@ -69,17 +69,9 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// import mapboxgl from 'mapbox-gl'
|
|
|
|
|
// import 'mapbox-gl/dist/mapbox-gl.css'
|
|
|
|
|
// import VueAMap from '@vuemap/vue-amap';
|
|
|
|
|
// import '@vuemap/vue-amap/dist/style.css'
|
|
|
|
|
import location from '@/assets/ecosphere/point.png'
|
|
|
|
|
// import { reportList, reportInfo } from '@/api/zongzhi/manage'
|
|
|
|
|
import {
|
|
|
|
|
listJbmap,
|
|
|
|
|
getJbmap,
|
|
|
|
|
} from "@/api/netManage/index.js";
|
|
|
|
|
|
|
|
|
|
import location from "@/assets/ecosphere/point.png";
|
|
|
|
|
import { listJbmap, getJbmap } from "@/api/netManage/index.js";
|
|
|
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
// VueAMap.initAMapApiLoader({
|
|
|
|
|
@ -95,189 +87,131 @@ export default {
|
|
|
|
|
// markers: [],
|
|
|
|
|
// 展示的内容
|
|
|
|
|
currentMsg: {
|
|
|
|
|
jbdx: '电子科技有限公司',
|
|
|
|
|
szbh: 'SZ2023',
|
|
|
|
|
jbsj: '2023-07-31',
|
|
|
|
|
dz: '太仓人民政府',
|
|
|
|
|
jbnr: '偷电'
|
|
|
|
|
jbdx: "电子科技有限公司",
|
|
|
|
|
szbh: "SZ2023",
|
|
|
|
|
jbsj: "2023-07-31",
|
|
|
|
|
dz: "太仓人民政府",
|
|
|
|
|
jbnr: "偷电",
|
|
|
|
|
},
|
|
|
|
|
map: null,
|
|
|
|
|
pointList: [
|
|
|
|
|
{ id: 1, lng: 121.136909, lat: 31.463778, title: '太仓人民政府' },
|
|
|
|
|
{ id: 2, lng: 121.086958, lat: 31.460883, title: '苏州吉闽物流有限公司' },
|
|
|
|
|
{ id: 3, lng: 121.05452, lat: 31.515175, title: '太仓星兴亮机械设备有限公司' },
|
|
|
|
|
{ id: 4, lng: 121.127801, lat: 31.472566, title: '兴和电子有限公司' },
|
|
|
|
|
{ id: 5, lng: 121.142345, lat: 31.477655, title: '太仓裕盛体育用品有限公司' }
|
|
|
|
|
{ id: 1, lng: 121.136909, lat: 31.463778, title: "太仓人民政府" },
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
lng: 121.086958,
|
|
|
|
|
lat: 31.460883,
|
|
|
|
|
title: "苏州吉闽物流有限公司",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
lng: 121.05452,
|
|
|
|
|
lat: 31.515175,
|
|
|
|
|
title: "太仓星兴亮机械设备有限公司",
|
|
|
|
|
},
|
|
|
|
|
{ id: 4, lng: 121.127801, lat: 31.472566, title: "兴和电子有限公司" },
|
|
|
|
|
{
|
|
|
|
|
id: 5,
|
|
|
|
|
lng: 121.142345,
|
|
|
|
|
lat: 31.477655,
|
|
|
|
|
title: "太仓裕盛体育用品有限公司",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
layers: {
|
|
|
|
|
layer: null,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
var layer = new AMap.createDefaultLayer({
|
|
|
|
|
zooms:[14,18], //可见级别
|
|
|
|
|
visible:true, //是否可见
|
|
|
|
|
opacity:1, //透明度
|
|
|
|
|
zIndex:10, //叠加层级
|
|
|
|
|
// skyColor: '#032f58',
|
|
|
|
|
mapStyle: 'amap://styles/d02b66b0a7f190d5a1556a3f59c86518',
|
|
|
|
|
this.initGdMap();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 初始化高德地图
|
|
|
|
|
initGdMap() {
|
|
|
|
|
let _this = this;
|
|
|
|
|
AMapLoader.load({
|
|
|
|
|
key: "b3c7a7ce466721c3be1d4ea539f82421", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
|
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
|
|
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
|
|
})
|
|
|
|
|
var map = new AMap.Map('container',{
|
|
|
|
|
zoom: 16, //设置地图显示的缩放级别
|
|
|
|
|
zooms: this.zooms,
|
|
|
|
|
center: this.center,//设置地图中心点坐标
|
|
|
|
|
mapStyle: 'amap://styles/d02b66b0a7f190d5a1556a3f59c86518', //设置地图的显示样式
|
|
|
|
|
// skyColor: '#032f58',
|
|
|
|
|
layers: [
|
|
|
|
|
// 高德默认标准图层
|
|
|
|
|
// new AMap.TileLayer.Satellite(),
|
|
|
|
|
layer,
|
|
|
|
|
// 楼块图层
|
|
|
|
|
new AMap.Buildings({
|
|
|
|
|
zooms: [14, 18],
|
|
|
|
|
zIndex: 11,
|
|
|
|
|
wallColor: 'rgba(24,79,129,1)',
|
|
|
|
|
roofColor: 'rgba(24,79,129,1)',
|
|
|
|
|
// heightFactor: 2//2倍于默认高度，3D下有效
|
|
|
|
|
.then((AMap) => {
|
|
|
|
|
_this.map = new AMap.Map("container", {
|
|
|
|
|
// 设置地图容器id
|
|
|
|
|
showLabel: false,
|
|
|
|
|
viewMode: "2D", // 是否为3D地图模式
|
|
|
|
|
zoom: 15, // 初始化地图级别
|
|
|
|
|
center: _this.center, // 初始化地图中心点位置
|
|
|
|
|
mapStyle: "amap://styles/darkblue",
|
|
|
|
|
});
|
|
|
|
|
_this.getMarkerData();
|
|
|
|
|
})
|
|
|
|
|
],
|
|
|
|
|
resizeEnable: true,
|
|
|
|
|
rotateEnable:false,
|
|
|
|
|
pitchEnable:false,
|
|
|
|
|
pitch: 55,
|
|
|
|
|
rotation: 25,
|
|
|
|
|
viewMode: '3D', //设置地图模式
|
|
|
|
|
lang:'zh_cn', //设置地图语言类型
|
|
|
|
|
buildingAnimation:true,
|
|
|
|
|
// expandZoomRange:true,
|
|
|
|
|
.catch((e) => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
});
|
|
|
|
|
this.layers.layer = new AMap.OverlayGroup(); // 点位
|
|
|
|
|
map.add(this.layers.layer);
|
|
|
|
|
// console.log(map.getLayers());
|
|
|
|
|
map.getLayers().forEach((m)=>{
|
|
|
|
|
if(m.CLASS_NAME == 'AMap.SkyLayer') {
|
|
|
|
|
map.remove(m)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取图标数据
|
|
|
|
|
async getMarkerData() {
|
|
|
|
|
let res = await listJbmap({ isStatus: 1, pageNum: 1, pageSize: 50 });
|
|
|
|
|
res.rows.map((row, index) => {
|
|
|
|
|
if (index == 0) {
|
|
|
|
|
//将地图的经纬度设置第一个坐标点
|
|
|
|
|
this.map.setCenter([row.longitude, row.latitude]);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.map = map;
|
|
|
|
|
this.init(this.map);
|
|
|
|
|
})
|
|
|
|
|
// let data = await reportList();
|
|
|
|
|
// listJbmap({isStatus:1,pageNum:1,pageSize:50}).then(data=>{
|
|
|
|
|
// let arr = []
|
|
|
|
|
// data.rows.map((item)=>{
|
|
|
|
|
// let obj = {}
|
|
|
|
|
// obj.id = item.id
|
|
|
|
|
// obj.lng = item.longitude
|
|
|
|
|
// obj.lat = item.latitude
|
|
|
|
|
// obj.title = item.jbObj
|
|
|
|
|
// arr.push(obj)
|
|
|
|
|
// })
|
|
|
|
|
// this.pointList = arr
|
|
|
|
|
// const _this = this
|
|
|
|
|
// mapboxgl.accessToken = 'pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw'
|
|
|
|
|
// const map = new mapboxgl.Map({
|
|
|
|
|
// container: 'map', // 地图容器的id或元素
|
|
|
|
|
// style: 'mapbox://styles/sharealex/cl3ntpire000314ookb5o81oo', // 地图样式
|
|
|
|
|
// center: [121.136909, 31.463778], // 中心点经纬度
|
|
|
|
|
// zoom: 14.5,
|
|
|
|
|
// pitch: 50
|
|
|
|
|
// })
|
|
|
|
|
var viaMarker = new AMap.Marker({
|
|
|
|
|
position: new AMap.LngLat(row.longitude, row.latitude),
|
|
|
|
|
// 将一张图片的地址设置为 icon
|
|
|
|
|
icon: location,
|
|
|
|
|
extData: row,
|
|
|
|
|
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|
|
|
|
// offset: new AMap.Pixel(-13, -30),
|
|
|
|
|
});
|
|
|
|
|
viaMarker.on("click", (e) => {
|
|
|
|
|
let rowItem = e.target.getExtData();
|
|
|
|
|
this.getMarkerInfo(rowItem.id);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// // 地图加载完毕
|
|
|
|
|
// map.on('load', function() {
|
|
|
|
|
// // 地图点位
|
|
|
|
|
// _this.pointList.forEach(item => {
|
|
|
|
|
// const el = document.createElement('div')
|
|
|
|
|
// el.className = 'map-marker'
|
|
|
|
|
// el.innerHTML = `
|
|
|
|
|
// <img class="marker-img" src= "${require('@/assets/ecosphere/point.png')}" />
|
|
|
|
|
// <div class="marker-text">${item.title}</div>
|
|
|
|
|
// `
|
|
|
|
|
// new mapboxgl.Marker(el)
|
|
|
|
|
// .setLngLat([item.lng, item.lat])
|
|
|
|
|
// .addTo(map)
|
|
|
|
|
// el.addEventListener('click', () => {
|
|
|
|
|
// // 点击事件里去修改内容
|
|
|
|
|
// // reportInfo(item.id).then(res=>{
|
|
|
|
|
// getJbmap(item.id).then(res=>{
|
|
|
|
|
// let { jbObj, number, jbTime, address, content } = res.data
|
|
|
|
|
// _this.currentMsg.jbdx = jbObj
|
|
|
|
|
// _this.currentMsg.szbh = number
|
|
|
|
|
// _this.currentMsg.jbsj = jbTime
|
|
|
|
|
// _this.currentMsg.dz = address
|
|
|
|
|
// _this.currentMsg.jbnr = content
|
|
|
|
|
// _this.isShowDialog = true
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
// map.addLayer({
|
|
|
|
|
// id: 'lou-extrusion',
|
|
|
|
|
// type: 'fill-extrusion',
|
|
|
|
|
// source: {
|
|
|
|
|
// type: 'geojson',
|
|
|
|
|
// data: require('@/utils/mapGeojson/1.json')
|
|
|
|
|
// },
|
|
|
|
|
// paint: {
|
|
|
|
|
// // 设置填充颜色
|
|
|
|
|
// 'fill-extrusion-color': '#2998F8',
|
|
|
|
|
// // 从属性中获得高度，这里用的是height字段
|
|
|
|
|
// 'fill-extrusion-height': ['get', 'height'],
|
|
|
|
|
// 'fill-extrusion-base': 0,
|
|
|
|
|
// // 透明度设置
|
|
|
|
|
// 'fill-extrusion-opacity': 0.7
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
// this.map = map
|
|
|
|
|
// })
|
|
|
|
|
var text = new AMap.Text({
|
|
|
|
|
text: row.jbObj,
|
|
|
|
|
anchor: "bottom-center", // 设置文本标记锚点
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
angle: 0,
|
|
|
|
|
style: {
|
|
|
|
|
"font-size": "20px",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
init(map){
|
|
|
|
|
|
|
|
|
|
listJbmap({isStatus:1,pageNum:1,pageSize:50}).then(data=>{
|
|
|
|
|
// let arr = [];
|
|
|
|
|
map.clearMap();
|
|
|
|
|
data.rows.map((item)=>{
|
|
|
|
|
// let obj = {}
|
|
|
|
|
// obj.id = item.id;
|
|
|
|
|
// obj.imgSrc = location;
|
|
|
|
|
// obj.lng = item.longitude
|
|
|
|
|
// obj.lat = item.latitude
|
|
|
|
|
// obj.title = item.jbObj
|
|
|
|
|
var marker = new AMap.Marker({
|
|
|
|
|
position: new AMap.LngLat(item.longitude, item.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
|
|
// <span style="color: #fff; font-size: 25px;width:${item.jbObj.length * 26}px">${item.jbObj}</span>
|
|
|
|
|
content: `<div class="amap-markers" data-projectid="${item.id}">
|
|
|
|
|
<img src="${location}" />
|
|
|
|
|
<div style="color: #fff; font-size: 25px;width:${item.jbObj.length * 26}px">${item.jbObj}</div>
|
|
|
|
|
</div>`,
|
|
|
|
|
offset:new AMap.Pixel(-(item.jbObj.length * 10), -30),
|
|
|
|
|
offset: [30, 0],
|
|
|
|
|
position: new AMap.LngLat(row.longitude, row.latitude),
|
|
|
|
|
extData: row,
|
|
|
|
|
});
|
|
|
|
|
text.on("click", (e) => {
|
|
|
|
|
let rowItem = e.target.getExtData();
|
|
|
|
|
this.getMarkerInfo(rowItem.id);
|
|
|
|
|
});
|
|
|
|
|
this.map.add([viaMarker, text]);
|
|
|
|
|
});
|
|
|
|
|
marker.on('click', (e)=>{
|
|
|
|
|
getJbmap(item.id).then(res=>{
|
|
|
|
|
let { jbObj, number, jbTime, address, content } = res.data
|
|
|
|
|
this.currentMsg.jbdx = jbObj
|
|
|
|
|
this.currentMsg.szbh = number
|
|
|
|
|
this.currentMsg.jbsj = jbTime
|
|
|
|
|
this.currentMsg.dz = address
|
|
|
|
|
this.currentMsg.jbnr = content
|
|
|
|
|
this.isShowDialog = true
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
map.add(marker);
|
|
|
|
|
// arr.push(obj)
|
|
|
|
|
})
|
|
|
|
|
// this.pointList = arr;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取点位详情
|
|
|
|
|
async getMarkerInfo(id) {
|
|
|
|
|
let res = await getJbmap(id);
|
|
|
|
|
let { jbObj, number, jbTime, address, content } = res.data;
|
|
|
|
|
this.currentMsg.jbdx = jbObj;
|
|
|
|
|
this.currentMsg.szbh = number;
|
|
|
|
|
this.currentMsg.jbsj = jbTime;
|
|
|
|
|
this.currentMsg.dz = address;
|
|
|
|
|
this.currentMsg.jbnr = content;
|
|
|
|
|
this.isShowDialog = true;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
this.map?.destroy();
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.map-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: $ScreenHeight;
|
|
|
|
|
@ -298,7 +232,7 @@ export default {
|
|
|
|
|
background: rgba(255, 255, 255, 0);
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-dialog {
|
|
|
|
|
background: url('~@/assets/dialog/wlglDialog/bg.png') no-repeat 100% 100%;
|
|
|
|
|
background: url("~@/assets/dialog/wlglDialog/bg.png") no-repeat 100% 100%;
|
|
|
|
|
//width: 1260px;
|
|
|
|
|
height: 590px;
|
|
|
|
|
//padding-top:20px;
|
|
|
|
|
@ -345,7 +279,7 @@ export default {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 25px;
|
|
|
|
|
left: 261px;
|
|
|
|
|
background: url('~@/assets/dialog/btn-bg.png') no-repeat 100% 100%;
|
|
|
|
|
background: url("~@/assets/dialog/btn-bg.png") no-repeat 100% 100%;
|
|
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
@ -356,7 +290,7 @@ export default {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.dialogClose:hover {
|
|
|
|
|
background: url('~@/assets/dialog/btn-bg-act.png') no-repeat 100% 100%;
|
|
|
|
|
background: url("~@/assets/dialog/btn-bg-act.png") no-repeat 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dialog-title {
|
|
|
|
|
@ -374,7 +308,7 @@ export default {
|
|
|
|
|
.dialog-explain {
|
|
|
|
|
margin-top: 39px;
|
|
|
|
|
height: 125px;
|
|
|
|
|
background: url('~@/assets/dialog/信息-bg.png') no-repeat 100% 100%;
|
|
|
|
|
background: url("~@/assets/dialog/信息-bg.png") no-repeat 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
.dialog-content {
|
|
|
|
|
width: 1073px;
|
|
|
|
|
|
