|
|
@@ -12,47 +12,9 @@
|
|
|
<div class="yun-wrap">
|
|
|
<img class="yun yun3" src="../assets/img/云3.png" alt />
|
|
|
</div>
|
|
|
- <!-- <div class="info-small">
|
|
|
- <h5 class="marker-title">
|
|
|
- item.countyName +
|
|
|
- item.smallNumber +
|
|
|
- </h5>
|
|
|
- <div class="marker-content">
|
|
|
- <p>
|
|
|
- 小班号：' +
|
|
|
- item.smallNumber +
|
|
|
- '
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 样地数：' +
|
|
|
- item.sampleCount +
|
|
|
- '
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 小班蓄积量：' +
|
|
|
- item.smallClassStock +
|
|
|
- '(立方米)' +
|
|
|
- '
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 小班占地面积：' +
|
|
|
- item.landArea +
|
|
|
- '(亩)' +
|
|
|
- '
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 小班树种组成：' +
|
|
|
- item.treeComp +
|
|
|
- '
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- 所在位置：' +
|
|
|
- item.cityName +
|
|
|
- item.countyName
|
|
|
- item.townName;
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </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>
|
|
|
@@ -74,6 +36,8 @@ export default {
|
|
|
name: 'Mapview',
|
|
|
data() {
|
|
|
return {
|
|
|
+ imgDialogVisible: false,
|
|
|
+ dialogImageUrl: null,
|
|
|
AMap: null,
|
|
|
map: null,
|
|
|
lngLat: [106.628201, 26.646694],
|
|
|
@@ -234,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,
|
|
|
@@ -275,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);
|
|
|
@@ -1027,7 +1051,18 @@ export default {
|
|
|
this.smallClassNArr.push(this.smallClassN);
|
|
|
}
|
|
|
smallClassPolygon.on('click', (e) => {
|
|
|
- console.log(item);
|
|
|
+ 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-details'>" +
|
|
|
"<h5 class='marker-title'>" +
|
|
|
@@ -1101,19 +1136,15 @@ export default {
|
|
|
'<p>森林健康度：' +
|
|
|
item.forestHealth +
|
|
|
'</p>' +
|
|
|
- '<p>所在位置：' +
|
|
|
- item.cityName +
|
|
|
- item.countyName +
|
|
|
- item.townName;
|
|
|
- '</p>' +
|
|
|
- '<p>图片：' +
|
|
|
- item.treeComp +
|
|
|
- "<img src='' />"
|
|
|
+ "<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',
|
|
|
@@ -1121,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'
|
|
|
@@ -1143,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({
|
|
|
@@ -1655,6 +1699,18 @@ export default {
|
|
|
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;
|
