|
|
@@ -12,6 +12,9 @@
|
|
|
<div class="yun-wrap">
|
|
|
<img class="yun yun3" src="../assets/img/云3.png" alt />
|
|
|
</div>
|
|
|
+ <el-dialog title="查看图片" :modal="false" :visible.sync="imgDialogVisible" width="40%">
|
|
|
+ <img width="100%" style="height:580px" :src="dialogImageUrl" alt />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -33,6 +36,8 @@ export default {
|
|
|
name: 'Mapview',
|
|
|
data() {
|
|
|
return {
|
|
|
+ imgDialogVisible: false,
|
|
|
+ dialogImageUrl: null,
|
|
|
AMap: null,
|
|
|
map: null,
|
|
|
lngLat: [106.628201, 26.646694],
|
|
|
@@ -193,37 +198,97 @@ export default {
|
|
|
if (val) {
|
|
|
if (val.longitude && val.latitude && !val.name) {
|
|
|
let lanLatArr = [val.longitude, val.latitude];
|
|
|
- let smallLabel =
|
|
|
- "<div class='info-small'>" +
|
|
|
- "<h5 class='marker-title'>" +
|
|
|
- val.countyName +
|
|
|
- '-' +
|
|
|
- val.smallNumber +
|
|
|
- '</h5>' +
|
|
|
- "<div class='marker-content'>" +
|
|
|
- '' +
|
|
|
- '<p>小班号：' +
|
|
|
- val.smallNumber +
|
|
|
- '</p>' +
|
|
|
- '<p>样地数：' +
|
|
|
- val.sampleCount +
|
|
|
- '</p>' +
|
|
|
- '<p>小班蓄积量：' +
|
|
|
- val.smallClassStock +
|
|
|
- '(立方米)' +
|
|
|
- '</p>' +
|
|
|
- '<p>小班占地面积：' +
|
|
|
- val.landArea +
|
|
|
- '(亩)' +
|
|
|
- '</p>' +
|
|
|
- '<p>小班树种组成：' +
|
|
|
- val.treeComp +
|
|
|
- '</p>' +
|
|
|
- '<p>所在位置：' +
|
|
|
- val.cityName +
|
|
|
- val.countyName +
|
|
|
- val.townName;
|
|
|
- '</p>' + '</div>' + '</div>';
|
|
|
+ let imgList = [];
|
|
|
+ if (val.imageList.length > 0) {
|
|
|
+ val.imageList.forEach((element) => {
|
|
|
+ imgList.push(
|
|
|
+ `<img id="markerLabel" src="${element.image}"/>`
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ imgList.push('暂无图片')
|
|
|
+ }
|
|
|
+ this.imgClick();
|
|
|
+ let smallLabel =
|
|
|
+ "<div class='info-details'>" +
|
|
|
+ "<h5 class='marker-title'>" +
|
|
|
+ val.countyName +
|
|
|
+ '-' +
|
|
|
+ val.smallNumber +
|
|
|
+ '</h5>' +
|
|
|
+ "<div class='marker-content'>" +
|
|
|
+ '<div>' +
|
|
|
+ '<p>小班号：' +
|
|
|
+ val.smallNumber +
|
|
|
+ '</p>' +
|
|
|
+ '<p>样地数：' +
|
|
|
+ val.sampleCount +
|
|
|
+ '</p>' +
|
|
|
+ '<p>小班蓄积量：' +
|
|
|
+ val.smallClassStock +
|
|
|
+ '(立方米)' +
|
|
|
+ '</p>' +
|
|
|
+ '<p>小班占地面积：' +
|
|
|
+ val.landArea +
|
|
|
+ '(亩)' +
|
|
|
+ '</p>' +
|
|
|
+ '<p>小班树种组成：' +
|
|
|
+ val.treeComp +
|
|
|
+ '</p>' +
|
|
|
+ '<p>地类：' +
|
|
|
+ val.landType +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林地权属：' +
|
|
|
+ val.landOwner +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林木权属：' +
|
|
|
+ val.forestOwner +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林种：' +
|
|
|
+ val.forestClass +
|
|
|
+ '</p>' +
|
|
|
+ '<p>树种结构：' +
|
|
|
+ val.treeStruct +
|
|
|
+ '</p>' +
|
|
|
+ '<p>起源：' +
|
|
|
+ val.origin +
|
|
|
+ '</p>' +
|
|
|
+ '<p>优势树种：' +
|
|
|
+ val.superTree +
|
|
|
+ '</p>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div>' +
|
|
|
+ '<p>主要灌木名称：' +
|
|
|
+ val.shrubName +
|
|
|
+ '</p>' +
|
|
|
+ '<p>地貌：' +
|
|
|
+ val.landForm +
|
|
|
+ '</p>' +
|
|
|
+ '<p>海拔：' +
|
|
|
+ val.altitude +
|
|
|
+ '</p>' +
|
|
|
+ '<p>坡位：' +
|
|
|
+ val.slopePosit +
|
|
|
+ '</p>' +
|
|
|
+ '<p>坡向：' +
|
|
|
+ val.slopeDirect +
|
|
|
+ '</p>' +
|
|
|
+ '<p>坡形：' +
|
|
|
+ val.slopeForm +
|
|
|
+ '</p>' +
|
|
|
+ '<p>坡度：' +
|
|
|
+ val.slope +
|
|
|
+ '</p>' +
|
|
|
+ '<p>森林健康度：' +
|
|
|
+ val.forestHealth +
|
|
|
+ '</p>' +
|
|
|
+ "<p class='marker-imgs'>" +
|
|
|
+ "<span class='marker-span'>图片：</span>" +
|
|
|
+ imgList +
|
|
|
+ '</p>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>';
|
|
|
this.smallMarker = new AMap.Marker({
|
|
|
map: this.map,
|
|
|
position: lanLatArr,
|
|
|
@@ -234,7 +299,7 @@ export default {
|
|
|
});
|
|
|
this.smallMarker.setLabel({
|
|
|
direction: 'right',
|
|
|
- offset: new AMap.Pixel(-170, -115), //设置文本标注偏移量
|
|
|
+ offset: new AMap.Pixel(-230, -160), //设置文本标注偏移量
|
|
|
content: smallLabel //设置文本标注内容
|
|
|
});
|
|
|
this.smallMarkers.push(_this.smallMarker);
|
|
|
@@ -966,7 +1031,10 @@ export default {
|
|
|
if (item.longitude && item.latitude) {
|
|
|
var lanLatArr = [];
|
|
|
lanLatArr = [item.longitude, item.latitude];
|
|
|
- if (this.$store.state.addr.mapLevel == 'district' || this.$store.state.addr.mapLevel == 'street') {
|
|
|
+ if (
|
|
|
+ this.$store.state.addr.mapLevel == 'district' ||
|
|
|
+ this.$store.state.addr.mapLevel == 'street'
|
|
|
+ ) {
|
|
|
this.smallClassN = new AMap.Text({
|
|
|
map: this.map,
|
|
|
position: lanLatArr,
|
|
|
@@ -983,14 +1051,27 @@ export default {
|
|
|
this.smallClassNArr.push(this.smallClassN);
|
|
|
}
|
|
|
smallClassPolygon.on('click', (e) => {
|
|
|
+ let imgList = [];
|
|
|
+ if (item.imageList.length > 0) {
|
|
|
+ item.imageList.forEach((element) => {
|
|
|
+ imgList.push(
|
|
|
+ `<img id="markerLabel" src="${element.image}"/>`
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ imgList.push('暂无图片')
|
|
|
+ }
|
|
|
+
|
|
|
+ this.imgClick();
|
|
|
let smallLabel =
|
|
|
- "<div class='info-small'>" +
|
|
|
+ "<div class='info-details'>" +
|
|
|
"<h5 class='marker-title'>" +
|
|
|
item.countyName +
|
|
|
'-' +
|
|
|
item.smallNumber +
|
|
|
'</h5>' +
|
|
|
"<div class='marker-content'>" +
|
|
|
+ '<div>' +
|
|
|
'<p>小班号：' +
|
|
|
item.smallNumber +
|
|
|
'</p>' +
|
|
|
@@ -1008,12 +1089,62 @@ export default {
|
|
|
'<p>小班树种组成：' +
|
|
|
item.treeComp +
|
|
|
'</p>' +
|
|
|
- '<p>所在位置：' +
|
|
|
- item.cityName +
|
|
|
- item.countyName +
|
|
|
- item.townName;
|
|
|
- '</p>' + '</div>' + '</div>';
|
|
|
+ '<p>地类：' +
|
|
|
+ item.landType +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林地权属：' +
|
|
|
+ item.landOwner +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林木权属：' +
|
|
|
+ item.forestOwner +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林种：' +
|
|
|
+ item.forestClass +
|
|
|
+ '</p>' +
|
|
|
+ '<p>树种结构：' +
|
|
|
+ item.treeStruct +
|
|
|
+ '</p>' +
|
|
|
+ '<p>起源：' +
|
|
|
+ item.origin +
|
|
|
+ '</p>' +
|
|
|
+ '<p>优势树种：' +
|
|
|
+ item.superTree +
|
|
|
+ '</p>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div>' +
|
|
|
+ '<p>主要灌木名称：' +
|
|
|
+ item.shrubName +
|
|
|
+ '</p>' +
|
|
|
+ '<p>地貌：' +
|
|
|
+ item.landForm +
|
|
|
+ '</p>' +
|
|
|
+ '<p>海拔：' +
|
|
|
+ item.altitude +
|
|
|
+ '</p>' +
|
|
|
+ '<p>坡位：' +
|
|
|
+ item.slopePosit +
|
|
|
+ '</p>' +
|
|
|
+ '<p>坡向：' +
|
|
|
+ item.slopeDirect +
|
|
|
+ '</p>' +
|
|
|
+ '<p>坡形：' +
|
|
|
+ item.slopeForm +
|
|
|
+ '</p>' +
|
|
|
+ '<p>坡度：' +
|
|
|
+ item.slope +
|
|
|
+ '</p>' +
|
|
|
+ '<p>森林健康度：' +
|
|
|
+ item.forestHealth +
|
|
|
+ '</p>' +
|
|
|
+ "<p class='marker-imgs'>" +
|
|
|
+ "<span class='marker-span'>图片：</span>" +
|
|
|
+ imgList +
|
|
|
+ '</p>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>';
|
|
|
that.smallMarker = new AMap.Marker({
|
|
|
+ map:that.map,
|
|
|
position: lanLatArr,
|
|
|
icon: require('@/assets/img/small-marker.png'),
|
|
|
anchor: 'bottom-center',
|
|
|
@@ -1021,20 +1152,22 @@ export default {
|
|
|
});
|
|
|
that.smallMarker.setLabel({
|
|
|
direction: 'right',
|
|
|
- offset: new AMap.Pixel(-170, -115), //设置文本标注偏移量
|
|
|
+ offset: new AMap.Pixel(-230, -160), //设置文本标注偏移量
|
|
|
content: smallLabel //设置文本标注内容
|
|
|
});
|
|
|
- that.smallMarker.setMap(that.map);
|
|
|
+ // that.smallMarker.setMap(that.map);
|
|
|
+ that.smallMarkers.push(that.smallMarker)
|
|
|
smallClassPolygon.setOptions({
|
|
|
fillOpacity: 0.7,
|
|
|
fillColor: 'yellow'
|
|
|
});
|
|
|
});
|
|
|
+
|
|
|
smallClassPolygon.on('mouseout', () => {
|
|
|
- if (that.smallMarker) {
|
|
|
- that.smallMarker.setMap(null);
|
|
|
- that.smallMarker = null;
|
|
|
- }
|
|
|
+ // if (that.smallMarker) {
|
|
|
+ // that.smallMarker.setMap(null);
|
|
|
+ // that.smallMarker = null;
|
|
|
+ // }
|
|
|
smallClassPolygon.setOptions({
|
|
|
fillOpacity: 0,
|
|
|
fillColor: '#ccebc5'
|
|
|
@@ -1043,9 +1176,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
// this.map.add(that.smallClassPolygon);
|
|
|
+ this.map.on('rightclick', function (e) {
|
|
|
+ that.map.remove(that.smallMarkers);
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ imgClick() {
|
|
|
+ document.getElementsByTagName('div')[0].addEventListener('click', (e) => {
|
|
|
+ if (e.target.id === 'markerLabel') {
|
|
|
+ this.imgDialogVisible = true;
|
|
|
+ this.dialogImageUrl = e.target.currentSrc;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
// 获取样地数据
|
|
|
getForestSample(page) {
|
|
|
forestSample({
|
|
|
@@ -1540,6 +1684,42 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+/deep/ .info-details {
|
|
|
+ background-image: url('../assets/img/small-label.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 26rem;
|
|
|
+ // height: 10rem;
|
|
|
+ color: #fff;
|
|
|
+ .marker-title {
|
|
|
+ margin: 0 auto;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ .marker-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20px 20px 20px;
|
|
|
+ .marker-span {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .marker-imgs {
|
|
|
+ line-height: 18px !important;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin: 0 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/deep/ .amap-marker-label {
|
|
|
border: 0;
|
|
|
background-color: transparent;
|
