<template>
<div class="map-wrap">
<div id="container" tabindex="0"></div>
<div id="mask"></div>
<div class="yun-wrap">
<img class="yun yun1" src="../assets/img/云1.png" alt />
</div>
<div class="yun-wrap">
<img class="yun yun2" src="../assets/img/云2.png" alt />
</div>
<div class="yun-wrap">
<img class="yun yun3" src="../assets/img/云3.png" alt />
</div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';
import {
smallClassMap,
rightScrollData,
forestSample,
alarmDataApi,
financeBasePlant,
financeBaseDetail,
farmInfo,
smallClassDetail,
treePlant
} from '@/service/index.js';
import { mapMutations, mapState, mapGetters } from 'vuex';
import { Message } from 'element-ui';
export default {
name: 'amap',
data() {
return {
AMap: null,
map: null,
lngLat: [106.628201, 26.646694],
adName: '',
zoom: 8,
adcode: '贵州省',
mapLevel: 'province',
parentId: '520000',
province: '',
districtExplorer: null,
tipMarker: null,
$tipMarkerContent: null,
currentAreaNode: null,
smallClassMapArr: [],
smallMarker: null,
treeCompData: {},
treeSmallLabel: null,
leftPage: 'forest',
parentId: '',
// 行政区
polygon: null,
// 城市标注点
cityMarker: null,
smallClassPolygon: null,
forestMarker: null,
rightScrollMarker: null,
boundaryPolygon: null,
eventMarker: null,
markerData: {},
cityMarkerArr: [],
putPolygonData: [],
townPolygons: [],
treeCompMarkers: [],
forestFarmData: [],
districtList: [],
selectData: {},
districtData: {},
streetData: {},
smallMarkers: [],
eventMarkers: [],
treePlant: [],
baseMarkers: []
};
},
mounted() {
// this.initMAp();
this.initAMap();
},
watch: {
'$store.state.addr.parentId': {
handler(val) {
if (this.$store.state.addr.mapLevel != 'street') {
this.selectData = this.$store.state.addr.selectCity;
this.districtData = this.$store.state.addr.selectDistrict;
this.streetData = this.$store.state.addr.selectStreet;
if (this.map) {
this.parentId = val;
this.switch2AreaNode(
val,
this.$store.state.addr.mapLevel,
this.$store.state.addr.selectCity,
this.leftPage
);
this.getDistrict(
this.$store.state.addr.parentName,
this.$store.state.addr.mapLevel
);
// this.$store.dispatch('searchArea', {
// parentId: val,
// name: this.$store.state.addr.parentName,
// mapLevel: this.$store.state.addr.mapLevel
// });
}
}
}
},
'$store.state.addr.selectStreet'(val) {
if (val.label && val.value && val.areaId) {
this.map.remove(this.polygon);
this.map.setCity(val.label);
// that.map.setZoomAndCenter(13, centerLanLatArr, false, 12);
// this.$store.dispatch('getSmallClassMap', {
// cityId: this.$store.state.addr.selectCity.areaId,
// countyId: this.$store.state.addr.selectDistrict.areaId,
// townId: this.$store.state.addr.selectStreet.areaId
// });
// that.map.setBounds(townPolygon.getBounds(), null, null, true);
if (this.leftPage === 'forest') {
this.addForestPolygon(this.smallClassMapArr);
this.getForestSample(this.leftPage);
} else if (this.leftPage === 'treeSpecies') {
this.addTreeSpeciesPolygon(this.smallClassMapArr);
this.getRightScrollData(this.leftPage);
} else if (this.leftPage === 'economics') {
this.getEconomics(this.smallClassMapArr);
} else if (this.leftPage === 'event') {
this.getEven();
}
}
// this.putPolygon(val)
},
'$store.state.addr.page': {
handler(val) {
this.leftPage = val;
if (!this.parentId) {
this.parentId = '520000';
this.$store.state.addr.parentName = '贵州省';
}
if (this.parentId) {
this.getSmallClass();
this.mapPolygon();
this.switch2AreaNode(
this.parentId,
this.$store.state.addr.mapLevel,
this.$store.state.addr.selectStreet,
this.leftPage
);
this.getDistrict(
this.$store.state.addr.parentName,
this.$store.state.addr.mapLevel
);
}
}
},
// '$store.state.addr.smallClassMapArr': {
// deep: true,
// immediate: true,
// handler: function (val, oldVal) {
// console.log();
// if (this.$store.state.addr.mapLevel == 'province') {
// } else {
// this.smallClassMapArr = val;
// if (this.smallClassMapArr) {
// if (this.$store.state.addr.mapLevel === 'district') {
// if (this.leftPage === 'forest') {
// this.addForestPolygon(this.smallClassMapArr);
// } else if (this.leftPage === 'treeSpecies') {
// this.addTreeSpeciesPolygon(this.smallClassMapArr);
// } else if (this.leftPage === 'event') {
// this.getEven(this.smallClassMapArr);
// } else if (this.leftPage === 'economics') {
// this.getEconomics(this.smallClassMapArr);
// }
// }
// }
// }
// }
// },
'$store.state.addr.smallClassSearch': {
deep: true,
immediate: true,
handler: function (val, oldVal) {
let _this = this;
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>';
this.smallMarker = new AMap.Marker({
map: this.map,
position: lanLatArr,
icon: require('@/assets/img/small-marker.png'),
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
zIndex: 9999
});
this.smallMarker.setLabel({
direction: 'right',
offset: new AMap.Pixel(-170, -115), //设置文本标注偏移量
content: smallLabel //设置文本标注内容
});
// this.smallMarker.setMap(this.map);
// this.map.add(this.smallMarker);
this.smallMarkers.push(_this.smallMarker);
} else if (val.name == false && this.smallMarker) {
this.map.on('rightclick', function (e) {
_this.map.remove(_this.smallMarkers);
});
}
}
}
},
'$store.state.addr.eventData': {
deep: true,
immediate: true,
handler: function (val, oldVal) {
let _this = this;
if (val) {
if (val.longitude && val.latitude && !val.name) {
let lanLatArr = [val.longitude, val.latitude];
let baseIcon = '';
let fireIcon = require('@/assets/img/fire.png');
let cutTreeIcon = require('@/assets/img/cutTree.png');
let insectpestIcon = require('@/assets/img/insectpest.png');
if (val.eventType == 1) {
val.eventContLabel = '火灾';
baseIcon = fireIcon;
} else if (val.eventType == 2) {
val.eventContLabel = '砍伐';
baseIcon = cutTreeIcon;
} else if (val.eventType == 3) {
val.eventContLabel = '病虫害';
baseIcon = insectpestIcon;
} else if (val.eventType == 4) {
val.eventContLabel = '偷盗林木';
}
let treeSmallLabel =
"<div class='info-small'>" +
"<h5 class='marker-title'>历史事件" +
'</h5>' +
"<div class='marker-content'>" +
'<p>事件类型：' +
val.eventContLabel +
'</p>' +
'<p>上报时间：' +
val.createTime +
'</p>' +
'<p>上报人：' +
val.createBy +
'</p>' +
'<p>位置：' +
val.cityName +
val.countyName +
val.townName +
val.villageName +
'</p>' +
'</div>' +
'</div>';
this.eventMarker = new AMap.Marker({
map: this.map,
position: lanLatArr,
icon: baseIcon,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
zIndex: 9999
});
this.eventMarker.setLabel({
direction: 'top',
offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
content: treeSmallLabel //设置文本标注内容
});
this.eventMarkers.push(this.eventMarker);
// this.map.add(this.eventMarker);
} else if (val.name == false && this.eventMarker) {
this.map.on('rightclick', function (e) {
_this.map.remove(_this.eventMarkers);
});
}
}
}
},
'$store.state.addr.baseDetail': {
deep: true,
immediate: true,
handler: function (val, oldVal) {
let _this = this;
if (val) {
if (val.baseLongitude && val.baseLatitude && !val.name) {
let lanLatArr = [val.baseLongitude, val.baseLatitude];
let treeSmallLabel =
"<div class='info-small'>" +
"<h5 class='marker-title'>" +
val.baseName +
'</h5>' +
"<div class='marker-content'>" +
'<p>基地名称：' +
val.baseName +
'</p>' +
'<p>种植/养殖/加工作物：' +
val.cropName +
'</p>' +
'<p>占地面积：' +
val.baseArea +
'亩' +
'</p>' +
'<p>位置：' +
val.cityName +
val.countyName +
val.townName +
'</p>' +
'</div>' +
'</div>';
this.baseMarker = new AMap.Marker({
map: this.map,
position: lanLatArr,
icon: require('@/assets/img/small-marker.png'),
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
zIndex: 9999
});
this.baseMarker.setLabel({
direction: 'top',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: treeSmallLabel //设置文本标注内容
});
this.baseMarkers.push(_this.baseMarker);
} else if (val.name == false && this.baseMarker) {
this.map.on('rightclick', function (e) {
_this.map.remove(_this.baseMarkers);
});
}
}
}
}
},
computed: {
...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList']),
...mapState(['selectCity', 'selectDistrict', 'selectStreet'])
},
created() {
this.getTreePlant();
},
methods: {
...mapMutations([
'changeSelectCity',
'changeSelectDistrict',
'changeSelectStreet',
'changeSelectAddr'
]),
initAMap() {
let _this = this;
window._AMapSecurityConfig = {
securityJsCode: 'e6666dfe93e7d3c6f3a5dc35cad6befb' // 密钥
};
AMapLoader.load({
key: 'f79d862df9288710e3dce6591af9dff1', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
Loca: {
version: '2.0'
},
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: '1.1', // AMapUI 缺省 1.1
plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
}
}).then((AMap) => {
_this.AMap = AMap;
_this.map = new AMap.Map('container', {
//设置地图容器id
viewMode: '3D', //是否为3D地图模式
terrain: true,
zoom: _this.zoom, //初始化地图级别
center: _this.lngLat, //初始化地图中心点位置
pitch: 45,
// layers: [
// new AMap.TileLayer.Satellite(),
// new AMap.TileLayer.RoadNet()
// ],
features: ['road', 'bg', 'building'] //地图要素
});
AMapUI.load(
['ui/geo/DistrictExplorer', 'lib/$'],
function (DistrictExplorer) {
_this.loadMapData(DistrictExplorer, $);
}
);
var wms = new AMap.TileLayer.WMTS({
url: 'http://t4.tianditu.gov.cn/img_w/wmts',
blend: false,
tileSize: 256,
params: {
Layer: 'img',
Version: '1.0.0',
Format: 'tiles',
// TileMatrixSet: 'EPSG:3857',
TileMatrixSet: 'w',
STYLE: 'default',
tk: '0864c66cc5f141fc17511169957aad51'
}
});
wms.setMap(_this.map);
// this.$nextTick(() => {
// // this.getDistrict()
// });
});
},
getDistrict(adName, mapLevel) {
if (mapLevel === 'street') {
mapLevel = 'district';
}
switch (adName) {
case '黔西南州':
adName = '黔西南布依族苗族自治州';
break;
case '黔东南州':
adName = '黔东南苗族侗族自治州';
break;
case '黔南州':
adName = '黔南布依族苗族自治州';
break;
}
let that = this;
this.map.clearMap();
AMap.plugin(['AMap.DistrictSearch'], function () {
var district = new AMap.DistrictSearch({
// 返回行政区边界坐标等具体信息
extensions: 'all',
// 设置查询行政区级别为 区 （district）
level: mapLevel,
// 显示下级行政区级数，1表示返回下一级行政区
subdistrict: 1
});
district.search(adName, function (status, result) {
var outer = [
new AMap.LngLat(-360, 90, true),
new AMap.LngLat(-360, -90, true),
new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true)
];
if (result.districtList != undefined) {
var holes = result.districtList[0].boundaries;
var pathArray = [outer];
pathArray.push.apply(pathArray, holes);
that.polygon = new AMap.Polygon({
pathL: pathArray,
map: that.map,
strokeColor: '#00eeff',
strokeWeight: 1,
fillColor: '#0c1b05', // 遮罩背景色
fillOpacity: 0.8,
height: 10000
});
that.polygon.setPath(pathArray);
// that.map.add(that.polygon);
var cityArr = result.districtList[0].districtList;
that.districtList = cityArr;
for (let i = 0; i < cityArr.length; i++) {
that.cityMarker = new AMap.Text({
//c城市指示标
text: cityArr[i].name,
zIndex: 1,
map: that.map,
anchor: 'center', // 设置文本标记锚点
style: {
padding: '0px 6px',
color: '#fff',
border: 'none',
fontSize: '12px',
'background-color': '#E6810C'
},
position: [cityArr[i].center.lng, cityArr[i].center.lat]
});
// that.map.add(that.cityMarker);
that.cityMarkerArr.push(that.cityMarker);
}
} else {
return false;
}
});
});
},
loadMapData(DistrictExplorer, $) {
let that = this;
//创建一个实例
that.districtExplorer = window.districtExplorer = new DistrictExplorer({
eventSupport: true, //打开事件支持
bubble: true,
map: that.map
});
//当前聚焦的区域
this.$tipMarkerContent = $('<div class="tipMarker top"></div>');
this.tipMarker = new AMap.Marker({
content: this.$tipMarkerContent.get(0),
offset: new AMap.Pixel(0, 0),
bubble: true
});
//监听feature的hover事件
this.districtExplorer.on(
'featureMouseout featureMouseover',
(e, feature) => {
this.toggleHoverFeature(
feature,
e.type === 'featureMouseover',
e.originalEvent ? e.originalEvent.lnglat : null
);
}
);
//监听鼠标在feature上滑动
this.districtExplorer.on('featureMousemove', (e) => {
//更新提示位置
this.tipMarker.setPosition(e.originalEvent.lnglat);
});
var adName = that.adcode; //贵州省
var mapLevel = that.mapLevel;
var adcode = '520000';
//feature被点击
this.districtExplorer.on('featureClick', (e, feature) => {
const props = feature.properties;
for (let item of this.forestFarmData) {
if (props.name == item.cityName || props.name == item.countyName) {
mapLevel = props.level;
adName = props.name;
this.$store.dispatch('searchArea', {
parentId: props.adcode,
name: props.name,
mapLevel: props.level
});
let valCode = props.adcode + '000000';
let areaId = '';
this.vuexCityList.forEach((item) => {
if (valCode == item.areaCode) {
areaId = item.areaId;
}
});
this.vuexDistrictList.forEach((item) => {
if (valCode == item.areaCode) {
areaId = item.areaId;
}
});
if (props.level == 'city') {
this.changeSelectCity({
value: valCode,
label: props.name,
areaId: areaId
});
} else if (props.level == 'district') {
this.changeSelectDistrict({
value: valCode,
label: props.name,
areaId: areaId
});
}
}
}
});
this.map.on('mousewheel', (e) => {
// console.log(e.lnglat.lng, e.lnglat.lat);
var zoom = this.map.getZoom(); //获取当前地图级别
if (
zoom > '10.5' &&
zoom < '11' &&
this.$store.state.addr.mapLevel == 'street'
) {
if (this.districtData.value) {
let districtCode = this.districtData.value.substring(0, 6);
this.$store.dispatch('searchArea', {
parentId: districtCode,
name: this.districtData.label,
mapLevel: 'district'
});
}
}
if (
zoom > '9' &&
zoom < '9.5' &&
this.$store.state.addr.mapLevel == 'district'
) {
if (this.selectData.value) {
let districtCode = this.selectData.value.substring(0, 6);
this.$store.dispatch('searchArea', {
parentId: districtCode,
name: this.selectData.label,
mapLevel: 'city'
});
}
}
if (
zoom > '7.6' &&
zoom < '7.9' &&
this.$store.state.addr.mapLevel == 'city'
) {
this.$store.dispatch('searchArea', {
parentId: '520000',
name: '贵州省',
mapLevel: 'province'
});
}
});
that.getDistrict(adName, mapLevel);
this.switch2AreaNode(adcode);
},
//根据Hover状态设置相关样式
toggleHoverFeature(feature, isHover, position) {
if (feature.properties.subFeatureIndex != null) {
this.tipMarker.setMap(isHover ? this.map : null);
if (!feature) {
return;
}
const props = feature.properties;
if (isHover) {
//更新提示内容
this.$tipMarkerContent.html(props.name);
//更新位置
this.tipMarker.setPosition(position || props.center);
}
//更新相关多边形的样式
const polys = this.districtExplorer.findFeaturePolygonsByAdcode(
props.adcode
);
polys.forEach((elemnt) => {
elemnt.setOptions({
fillColor: '#0dbc79',
fillOpacity: isHover ? 0.5 : 0
});
});
}
},
//绘制某个区域的边界
renderAreaPolygons(areaNode) {
//更新地图视野
this.map.setBounds(areaNode.getBounds(), null, null, false);
this.getSmallClass();
this.mapPolygon();
//清除已有的绘制内容
this.districtExplorer.clearFeaturePolygons();
//绘制子区域
this.districtExplorer.renderSubFeatures(areaNode, () => {
return {
cursor: 'default',
bubble: true,
strokeColor: 'yellow', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
fillOpacity: 0 //填充透明度
};
});
//绘制父区域
this.districtExplorer.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: '#00eeff', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
fillOpacity: 0 //填充透明度
});
},
//切换区域后刷新显示内容
refreshAreaNode(areaNode) {
this.districtExplorer.setHoverFeature(null);
this.renderAreaPolygons(areaNode);
},
//切换区域
switch2AreaNode(adcode, mapLevel, selectStreet, page, callback) {
// if (
// this.currentAreaNode &&'' + this.currentAreaNode.getAdcode() === '' + adcode
// ) {
// return;
// }
this.loadAreaNode(adcode, (error, areaNode) => {
if (error) {
if (callback) {
callback(error);
}
return;
}
this.currentAreaNode = areaNode;
if (
mapLevel == 'city' ||
mapLevel == undefined ||
mapLevel == 'province'
) {
this.setMarker();
}
this.getrjx(adcode, selectStreet);
//设置当前使用的定位用节点
this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
this.refreshAreaNode(areaNode);
if (callback) {
callback(null, areaNode);
}
});
},
// 加载区域
loadAreaNode(adcode, callback) {
this.districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
if (error) {
if (callback) {
callback(error);
}
window.console.error(error);
return;
}
if (callback) {
callback(null, areaNode);
}
});
},
getSmallClass() {
let params = {
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
// townId: this.$store.state.addr.selectStreet.areaId
};
smallClassMap(params).then((res) => {
if (res.code == 200) {
this.smallClassMapArr = res.rows;
if (this.leftPage === 'forest') {
this.addForestPolygon(this.smallClassMapArr);
} else if (this.leftPage === 'treeSpecies') {
this.addTreeSpeciesPolygon();
} else if (this.leftPage === 'economics') {
this.getEconomics(this.smallClassMapArr);
}
}
});
},
mapPolygon() {
if (this.smallClassMapArr) {
if (this.leftPage === 'forest') {
this.addForestPolygon(this.smallClassMapArr);
if (this.$store.state.addr.mapLevel == 'district') {
this.getForestSample(this.leftPage);
}
} else if (this.leftPage === 'treeSpecies') {
this.addTreeSpeciesPolygon();
if (this.$store.state.addr.mapLevel == 'district') {
this.getRightScrollData(this.leftPage);
}
} else if (this.leftPage === 'economics') {
this.getEconomics(this.smallClassMapArr);
} else if (this.leftPage === 'event') {
this.getEven();
}
}
},
addForestPolygon(smallClassMapArr) {
let that = this;
if (smallClassMapArr) {
smallClassMapArr.forEach((item) => {
let polyData = JSON.parse(item.mapInfo);
for (let elementLs in polyData.features) {
let smallClassPolygon = new AMap.Polygon({
map: that.map,
path: polyData.features[elementLs].geometry.coordinates,
strokeOpacity: 1,
fillOpacity: 0,
strokeColor: 'red',
strokeWeight: 2,
zIndex: 999,
cursor: 'pointer'
});
if (item.longitude && item.latitude) {
var lanLatArr = [];
lanLatArr = [item.longitude, item.latitude];
if (this.$store.state.addr.mapLevel == 'district') {
let smallClassN = new AMap.Text({
map: this.map,
position: lanLatArr,
text: item.smallNumber,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 8),
style: {
'background-color': 'transparent',
border: 'none',
color: '#05dfff',
fontSize: '12px'
}
});
}
smallClassPolygon.on('click', (e) => {
let smallLabel =
"<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>';
that.smallMarker = new AMap.Marker({
position: lanLatArr,
icon: require('@/assets/img/small-marker.png'),
anchor: 'bottom-center',
offset: new AMap.Pixel(-5, -6)
});
that.smallMarker.setLabel({
direction: 'right',
offset: new AMap.Pixel(-170, -115), //设置文本标注偏移量
content: smallLabel //设置文本标注内容
});
that.smallMarker.setMap(that.map);
smallClassPolygon.setOptions({
fillOpacity: 0.7,
fillColor: 'yellow'
});
});
smallClassPolygon.on('mouseout', () => {
if (that.smallMarker) {
that.smallMarker.setMap(null);
that.smallMarker = null;
}
smallClassPolygon.setOptions({
fillOpacity: 0,
fillColor: '#ccebc5'
});
});
}
}
// this.map.add(that.smallClassPolygon);
});
}
},
// 获取样地数据
getForestSample(page) {
forestSample({
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
}).then((res) => {
let sampleMarker = require('@/assets/img/sample-marker.png');
let iconMeta = [28, 28];
this.setMarkers(res, sampleMarker, iconMeta, page);
});
},
// 添加地图标注（样地、树种）
setMarkers(res, sampleMarker, iconMeta, page) {
let _this = this;
if (this.forestMarker) {
this.forestMarker.setMap(null);
this.forestMarker = null;
}
this.markerData = res;
let iconMarker = sampleMarker;
let iconMetaSet = iconMeta;
let sampleIcon = new AMap.Icon({
size: new AMap.Size(iconMetaSet[0], iconMetaSet[1]), // 图标尺寸
image: iconMarker,
imageSize: new AMap.Size(iconMetaSet[0], iconMetaSet[1]) // 根据所设置的大小拉伸或压缩图片
});
this.markerData.rows.forEach((item) => {
let lngLat = [item.longitude, item.latitude];
if (item.longitude && item.latitude) {
this.forestMarker = new AMap.Marker({
map: _this.map,
position: lngLat,
icon: sampleIcon,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, -18)
});
if (page === 'forest') {
this.forestMarker.setLabel({
direction: 'right',
offset: new AMap.Pixel(-8, 0), //设置文本标注偏移量
content: `<div style="color:#05dfff">${item.smallNumber}-${item.sampleNumber}</div>` //设置文本标注内容
});
let clickLabel =
"<div class='info-small'>" +
"<h5 class='marker-title'>" +
item.smallNumber +
'-' +
item.sampleNumber +
'</h5>' +
"<div class='marker-content'>" +
'<p>样地号：' +
item.sampleNumber +
'</p>' +
'<p>所属小班：' +
item.smallNumber +
'</p>' +
'<p>样地蓄积：' +
item.landStock +
'</p>' +
'<p>样地株数：' +
item.landNumber +
'</p>' +
'</div>' +
'</div>';
let lastMarker = new AMap.Marker({
position: lngLat,
icon: sampleIcon,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, -18)
});
lastMarker.setLabel({
zIndex: 120,
direction: 'top',
offset: new AMap.Pixel(-4, 0), //设置文本标注偏移量
content: clickLabel //设置文本标注内容
});
this.forestMarker.on('click', function (e) {
_this.map.add(lastMarker);
});
this.forestMarker.on('mouseout', function (e) {
_this.map.remove(lastMarker);
});
} else if (page === 'treeSpecies') {
this.forestMarker.setLabel({
direction: 'top',
offset: new AMap.Pixel(0, 8), //设置文本标注偏移量
content: `<div class="label-treecomp">${item.treeComp}<span class="smallH">${item.smallNumber}</span></div>` //设置文本标注内容
});
}
// this.map.add(this.forestMarker);
}
});
},
addTreeSpeciesPolygon() {
let that = this;
that.smallClassMapArr.forEach((item) => {
let polyData = JSON.parse(item.mapInfo);
for (let elementLs in polyData.features) {
let polygonColor = '';
this.treePlant.forEach((tree) => {
if (tree.plantName == item.superTree && item.superTree == '硬阔') {
polygonColor = '#00da85';
} else if (
tree.plantName == item.superTree &&
item.superTree == '软阔'
) {
polygonColor = '#009bfd';
} else if (
tree.plantName == item.superTree &&
item.superTree == '杉木'
) {
polygonColor = '#eca62d';
} else if (
tree.plantName == item.superTree &&
item.superTree == '马尾松'
) {
polygonColor = '#b82dec';
}
});
let polygon = new AMap.Polygon({
map: that.map,
path: polyData.features[elementLs].geometry.coordinates,
strokeOpacity: 1,
fillOpacity: 0.6,
strokeColor: 'red',
strokeWeight: 2,
zIndex: 999,
cursor: 'pointer',
fillColor: polygonColor
});
if (item.longitude && item.latitude) {
var lanLatArr = [];
polygon.on('click', (e) => {
lanLatArr = [item.longitude, item.latitude];
let treeSmallLabel =
"<div class='info-small'>" +
"<h5 class='marker-title'>小班" +
item.smallNumber +
'</h5>' +
"<div class='marker-content'>" +
'<p>树种组成：' +
item.treeComp +
'</p>' +
'<p>树种结构：' +
item.treeStruct +
'</p>' +
'<p>优势树种：' +
item.superTree +
'</p>' +
'<p>优势树种平均胸径：' +
item.superTreeDbh +
'厘米' +
'</p>' +
'<p>优势树种平均高：' +
item.superTreeHigh +
'米' +
'</p>' +
'<p>位置：' +
item.countyName +
item.townName +
item.villageName +
'</p>' +
'</div>' +
'</div>';
that.smallMarker = new AMap.Marker({
map: that.map,
position: lanLatArr,
icon: require('@/assets/img/small-marker.png'),
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
that.smallMarker.setLabel({
direction: 'top',
offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
content: treeSmallLabel //设置文本标注内容
});
that.treeCompMarkers.push(that.smallMarker);
});
polygon.on('mouseout', () => {
that.map.remove(that.treeCompMarkers);
});
}
}
});
},
// 获取小班列表
getRightScrollData(page) {
rightScrollData({
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
}).then((res) => {
let sampleMarker = require('@/assets/img/sanjiaod.png');
let iconMeta = [16, 10];
this.setMarkers(res, sampleMarker, iconMeta, page);
});
},
// 事件信息
getEven() {
let _this = this;
alarmDataApi().then((res) => {
res.data.forEach((item) => {
let lanLatArr = [item.longitude, item.latitude];
let baseIcon = '';
let fireIcon = require('@/assets/img/fire.png');
let cutTreeIcon = require('@/assets/img/cutTree.png');
let insectpestIcon = require('@/assets/img/insectpest.png');
if (item.eventType == 1) {
item.eventContLabel = '火灾';
baseIcon = fireIcon;
} else if (item.eventType == 2) {
item.eventContLabel = '砍伐';
baseIcon = cutTreeIcon;
} else if (item.eventType == 3) {
item.eventContLabel = '病虫害';
baseIcon = insectpestIcon;
}
_this.smallMarker = new AMap.Marker({
map: _this.map,
position: lanLatArr,
icon: baseIcon,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
zIndex: 999
});
_this.smallMarker.on('click', function (e) {
let treeSmallLabel =
"<div class='info-small'>" +
"<h5 class='marker-title'>最新事件" +
'</h5>' +
"<div class='marker-content'>" +
'<p>事件类型：' +
item.eventContLabel +
'</p>' +
'<p>上报时间：' +
item.createTime +
'</p>' +
'<p>上报人：' +
item.createBy +
'</p>' +
'<p>位置：' +
item.cityName +
item.countyName +
item.townName +
item.villageName +
'</p>' +
'</div>' +
'</div>';
_this.eventMarker = new AMap.Marker({
position: lanLatArr,
icon: baseIcon,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0),
zIndex: 999
});
_this.eventMarker.setLabel({
direction: 'top',
offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
content: treeSmallLabel //设置文本标注内容
});
_this.map.add(_this.eventMarker);
});
_this.smallMarker.on('mouseout', function (e) {
if (!_this.eventMarker) {
return;
} else {
_this.map.remove(_this.eventMarker);
}
});
});
});
},
// 林业经济
getEconomics() {
this.smallClassMapArr.forEach((item) => {
let polyData = JSON.parse(item.mapInfo);
for (let elementLs in polyData.features) {
let polygon = new AMap.Polygon({
map: this.map,
path: polyData.features[elementLs].geometry.coordinates,
strokeOpacity: 1,
fillOpacity: 0,
strokeColor: 'red',
strokeWeight: 2,
zIndex: 999,
cursor: 'pointer'
});
polygon.on('mouseover', (e) => {
polygon.setOptions({
fillOpacity: 0.7,
fillColor: 'yellow'
});
});
polygon.on('mouseout', () => {
polygon.setOptions({
fillOpacity: 0,
fillColor: '#ccebc5'
});
});
}
});
financeBasePlant({
cityId: this.$store.state.addr.selectCity.areaId,
countyId: this.$store.state.addr.selectDistrict.areaId,
townId: this.$store.state.addr.selectStreet.areaId
}).then((res) => {
let economicsList = [];
let baseList = [];
res.rows.forEach((element) => {
economicsList.push({
longitude: element.cateLongitude,
latitude: element.cateLatitude,
icon: element.image
});
baseList.push({
baseId: element.baseId,
baseName: element.baseName,
longitude: element.baseLongitude,
latitude: element.baseLatitude
});
});
economicsList.forEach((item) => {
let lanLatArr = [item.longitude, item.latitude];
let beeIcon = item.icon;
let iconMeta = [82, 26];
let sampleIcon = new AMap.Icon({
size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
image: beeIcon,
imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
});
this.smallMarker = new AMap.Marker({
position: lanLatArr,
icon: sampleIcon,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
this.smallMarker.setMap(this.map);
});
baseList.forEach((element) => {
let lanLatArr = [element.longitude, element.latitude];
let baseIcon = require('@/assets/img/postion.png');
let iconMeta = [20, 29];
let sampleIcon = new AMap.Icon({
size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
image: baseIcon,
imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
});
let baseMarker = new AMap.Marker({
map: this.map,
position: lanLatArr,
icon: sampleIcon,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
baseMarker.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: `<div>${element.baseName}</div>` //设置文本标注内容
});
baseMarker.on('click', function (e) {
financeBaseDetail({ baseId: element.baseId }).then((res) => {
if (res.code == 200) {
let treeSmallLabel =
"<div class='info-small'>" +
"<h5 class='marker-title'>" +
res.data.baseName +
'</h5>' +
"<div class='marker-content'>" +
'<p>基地名称：' +
res.data.baseName +
'</p>' +
'<p>种植/养殖/加工作物：' +
res.data.cropName +
'</p>' +
'<p>占地面积：' +
res.data.baseArea +
'亩' +
'</p>' +
'<p>位置：' +
res.data.cityName +
res.data.countyName +
res.data.townName +
'</p>' +
'</div>' +
'</div>';
baseMarker.setLabel({
direction: 'top',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: treeSmallLabel //设置文本标注内容
});
}
});
});
baseMarker.on('mouseout', function (e) {
baseMarker.setLabel({
direction: 'right',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: `<div>${element.baseName}</div>` //设置文本标注内容
});
});
this.map.add(baseMarker);
});
});
},
setMarker() {
farmInfo().then((res) => {
this.forestFarmData = res.rows;
let parentMarker = require('@/assets/img/pre-marker.png');
this.forestFarmData.forEach((item) => {
let selectCity = this.$store.state.addr.selectCity.label;
switch (this.$store.state.addr.selectCity.label) {
case '黔西南州':
selectCity = '黔西南布依族苗族自治州';
break;
case '黔东南州':
selectCity = '黔东南苗族侗族自治州';
break;
case '黔南州':
selectCity = '黔南布依族苗族自治州';
break;
}
if (this.$store.state.addr.selectCity.label) {
if (selectCity == item.cityName) {
let lngLat = [item.longitude, item.latitude];
var marker = new AMap.Marker({
position: lngLat,
icon: parentMarker,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker.setLabel({
direction: 'bottom',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: `<div>${item.forestName}</div>` //设置文本标注内容
});
marker.setMap(this.map);
}
} else {
let lngLat = [item.longitude, item.latitude];
var marker = new AMap.Marker({
position: lngLat,
icon: parentMarker,
anchor: 'bottom-center',
offset: new AMap.Pixel(0, 0)
});
marker.setLabel({
direction: 'bottom',
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: `<div>${item.forestName}</div>` //设置文本标注内容
});
marker.setMap(this.map);
}
});
});
},
getrjx(adcode, selectStreet) {
if (adcode == '522632') {
axios.get('/static/rongjangintown.json').then((res) => {
this.putPolygonData = res.data.features;
this.putPolygon();
});
} else if (adcode == '520181') {
axios.get('/static/qingzhenzhen.json').then((res) => {
this.putPolygonData = res.data.features;
this.putPolygon();
});
}
},
putPolygon(selectStreet) {
let that = this;
this.putPolygonData.forEach((element) => {
this.boundaryPolygon = new AMap.Polygon({
map: that.map,
path: element.geometry.coordinates,
strokeOpacity: 1,
fillOpacity: 0,
strokeColor: 'yellow',
strokeWeight: 1,
zIndex: 999,
cursor: 'pointer'
});
that.townPolygons.push(this.boundaryPolygon);
// that.map.add(that.townPolygons);
this.boundaryPolygon.on('click', (e) => {
this.smallClassMapArr = [];
let centerLanLatArr = [e.lnglat.lng, e.lnglat.lat];
that.map.remove(that.townPolygons);
that.map.remove(that.polygon);
// that.map.remove(that.cityMarkerArr);
that.districtExplorer.clearFeaturePolygons();
let valCode = element.properties.XIANG;
let areaId = '';
let label = element.properties.XIANG_NAME;
this.vuexStreetList.forEach((item) => {
if (valCode == item.areaCode) {
areaId = item.areaId;
}
});
this.changeSelectStreet({
value: valCode,
label: label,
areaId: areaId
});
this.changeSelectAddr('street');
// this.$store.dispatch('searchArea', {
// parentId: valCode,
// name: label,
// mapLevel: 'street'
// });
var outer = [
new AMap.LngLat(-360, 90, true),
new AMap.LngLat(-360, -90, true),
new AMap.LngLat(360, -90, true),
new AMap.LngLat(360, 90, true)
];
var holes = element.geometry.coordinates;
var pathArray = [outer];
pathArray.push.apply(pathArray, holes);
let townPolygon = new AMap.Polygon({
map: that.map,
pathL: pathArray,
strokeColor: 'yellow',
strokeWeight: 4,
fillColor: '#0c1b05', // 遮罩背景色
fillOpacity: 0
});
townPolygon.setPath(holes);
// that.map.add(townPolygon);
that.map.setZoomAndCenter(13, centerLanLatArr, false, 12);
// this.$store.dispatch('getSmallClassMap', {
// cityId: this.$store.state.addr.selectCity.areaId,
// countyId: this.$store.state.addr.selectDistrict.areaId,
// townId: this.$store.state.addr.selectStreet.areaId
// });
// that.map.setBounds(townPolygon.getBounds(), null, null, true);
townPolygon.on('click', (e) => {
});
if (this.leftPage === 'forest') {
this.addForestPolygon(this.smallClassMapArr);
this.getForestSample(this.leftPage);
} else if (this.leftPage === 'treeSpecies') {
this.addTreeSpeciesPolygon(this.smallClassMapArr);
this.getRightScrollData(this.leftPage);
} else if (this.leftPage === 'economics') {
this.getEconomics(this.smallClassMapArr);
} else if (this.leftPage === 'event') {
this.getEven();
}
});
});
},
getTreePlant() {
treePlant().then((res) => {
this.treePlant = res.rows;
});
}
}
};
</script>
<style lang='scss' scoped>
#container {
width: 100%;
height: 100vh;
/deep/ .tdt-pane {
z-index: auto;
}
}
/deep/ .amap-marker-content {
.tipMarker {
color: #555;
background-color: rgba(255, 254, 239, 0.8);
border: 1px solid #7e7e7e;
padding: 2px 6px;
font-size: 12px;
white-space: nowrap;
display: inline-block;
&:before,
&:after {
content: '';
display: block;
position: absolute;
margin: auto;
width: 0;
height: 0;
border: solid transparent;
border-width: 5px 5px;
}
&.top {
transform: translate(-50%, -110%);
&:before,
&:after {
bottom: -9px;
left: 0;
right: 0;
border-top-color: rgba(255, 254, 239, 0.8);
}
&:before {
bottom: -10px;
border-top-color: #7e7e7e;
}
}
}
}
/deep/ .amap-logo,
.amap-copyright {
display: block !important;
visibility: inherit !important;
}
/deep/ .amap-icon img {
max-width: 3rem !important;
max-height: 3rem !important;
}
/deep/ .info-small {
background-image: url('../assets/img/small-label.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 18rem;
// height: 10rem;
color: #fff;
.marker-title {
margin: 0 auto;
line-height: 30px;
}
.marker-content {
padding: 0 20px 10px 20px;
p {
text-align: left;
font-size: 12px;
margin: 0;
line-height: 28px;
}
}
}
/deep/ .amap-marker-label {
border: 0;
background-color: transparent;
}
#mask {
width: 100%;
height: 100vh;
box-shadow: inset 0px 0px 10vw 8vw rgba(0, 10, 34, 0.54);
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
pointer-events: none;
}
@keyframes imageAnimation_32630606 {
0% {
// opacity: 0;
transform: none;
}
34% {
// opacity: 1;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
translate3d(34vw, 0px, 0px);
}
67% {
// opacity: 1;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
translate3d(67vw, 0px, 0px);
}
100% {
// opacity: 0;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1)
translate3d(160vw, 0px, 0px);
}
}
.yun-wrap {
position: fixed;
left: 0;
top: 350px;
width: 100vw;
pointer-events: none;
}
.yun {
position: fixed;
left: -500px;
animation-name: imageAnimation_32630606;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 110s;
animation-delay: 0s;
-webkit-user-drag: none;
filter: none;
pointer-events: none;
}
.yun2 {
bottom: 20px;
animation-duration: 90s;
animation-delay: 10s;
}
.yun3 {
top: 100px;
animation-duration: 120s;
animation-delay: 15s;
}
/deep/ .label-treecomp {
position: relative;
background-color: #05dfff;
color: #fff;
padding: 6px 10px;
border-radius: 8px;
font-size: 14px;
text-align: center;
&::before {
position: absolute;
top: 26px;
left: 42%;
content: '';
width: 0px;
height: 0px;
border: 6px solid transparent;
border-top-color: #05dfff;
}
.smallH {
position: absolute;
top: 34px;
z-index: 99;
display: block;
color: #05dfff;
text-align: center;
font-size: 14px;
// left: 38%;
left: 0;
width: 100%;
}
}
</style>