|
|
@@ -199,96 +199,96 @@ export default {
|
|
|
if (val.longitude && val.latitude && !val.name) {
|
|
|
let lanLatArr = [val.longitude, val.latitude];
|
|
|
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>';
|
|
|
+ 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>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div>' +
|
|
|
+ '<p>起源：' +
|
|
|
+ val.origin +
|
|
|
+ '</p>' +
|
|
|
+ '<p>优势树种：' +
|
|
|
+ val.superTree +
|
|
|
+ '</p>' +
|
|
|
+ '<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>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="imgList">' +
|
|
|
+ "<span class='marker-span'>图片：</span>" +
|
|
|
+ '<div class="marker-imgs">' +
|
|
|
+ imgList +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>';
|
|
|
this.smallMarker = new AMap.Marker({
|
|
|
map: this.map,
|
|
|
position: lanLatArr,
|
|
|
@@ -1058,8 +1058,8 @@ export default {
|
|
|
`<img id="markerLabel" src="${element.image}"/>`
|
|
|
);
|
|
|
});
|
|
|
- }else{
|
|
|
- imgList.push('暂无图片')
|
|
|
+ } else {
|
|
|
+ imgList.push('暂无图片');
|
|
|
}
|
|
|
|
|
|
this.imgClick();
|
|
|
@@ -1104,14 +1104,14 @@ export default {
|
|
|
'<p>树种结构：' +
|
|
|
item.treeStruct +
|
|
|
'</p>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div>' +
|
|
|
'<p>起源：' +
|
|
|
item.origin +
|
|
|
'</p>' +
|
|
|
'<p>优势树种：' +
|
|
|
item.superTree +
|
|
|
'</p>' +
|
|
|
- '</div>' +
|
|
|
- '<div>' +
|
|
|
'<p>主要灌木名称：' +
|
|
|
item.shrubName +
|
|
|
'</p>' +
|
|
|
@@ -1136,15 +1136,17 @@ export default {
|
|
|
'<p>森林健康度：' +
|
|
|
item.forestHealth +
|
|
|
'</p>' +
|
|
|
- "<p class='marker-imgs'>" +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="imgList">' +
|
|
|
"<span class='marker-span'>图片：</span>" +
|
|
|
+ '<div class="marker-imgs">' +
|
|
|
imgList +
|
|
|
- '</p>' +
|
|
|
'</div>' +
|
|
|
'</div>' +
|
|
|
'</div>';
|
|
|
that.smallMarker = new AMap.Marker({
|
|
|
- map:that.map,
|
|
|
+ map: that.map,
|
|
|
position: lanLatArr,
|
|
|
icon: require('@/assets/img/small-marker.png'),
|
|
|
anchor: 'bottom-center',
|
|
|
@@ -1156,7 +1158,7 @@ export default {
|
|
|
content: smallLabel //设置文本标注内容
|
|
|
});
|
|
|
// that.smallMarker.setMap(that.map);
|
|
|
- that.smallMarkers.push(that.smallMarker)
|
|
|
+ that.smallMarkers.push(that.smallMarker);
|
|
|
smallClassPolygon.setOptions({
|
|
|
fillOpacity: 0.7,
|
|
|
fillColor: 'yellow'
|
|
|
@@ -1177,8 +1179,8 @@ export default {
|
|
|
}
|
|
|
// this.map.add(that.smallClassPolygon);
|
|
|
this.map.on('rightclick', function (e) {
|
|
|
- that.map.remove(that.smallMarkers);
|
|
|
- });
|
|
|
+ that.map.remove(that.smallMarkers);
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
@@ -1689,6 +1691,7 @@ export default {
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 26rem;
|
|
|
+ padding-bottom: 13px;
|
|
|
// height: 10rem;
|
|
|
color: #fff;
|
|
|
.marker-title {
|
|
|
@@ -1698,25 +1701,35 @@ export default {
|
|
|
.marker-content {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- padding: 0 20px 20px 20px;
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+ .marker-span {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgList {
|
|
|
+ display: block;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 20px;
|
|
|
.marker-span {
|
|
|
display: block;
|
|
|
}
|
|
|
.marker-imgs {
|
|
|
+ display: block;
|
|
|
line-height: 18px !important;
|
|
|
img {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
margin: 0 4px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- p {
|
|
|
- text-align: left;
|
|
|
- font-size: 12px;
|
|
|
- margin: 0;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
