|
|
@@ -0,0 +1,1873 @@
|
|
|
+<!--
|
|
|
+ * @Description:
|
|
|
+ * @Author: wangcc
|
|
|
+ * @Date: 2022-10-19 09:32:46
|
|
|
+ * @LastEditors: wangcc
|
|
|
+ * @LastEditTime: 2022-10-19 09:32:47
|
|
|
+ * @FilePath: \castgroup_bigscreen\src\components\amapTow.vue
|
|
|
+ * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved.
|
|
|
+-->
|
|
|
+<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>
|
|
|
+ <el-dialog title="查看图片" :modal="false" :visible.sync="imgDialogVisible" width="40%">
|
|
|
+ <img width="100%" style="height:580px" :src="dialogImageUrl" alt />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
+import { mapMutations, mapState, mapGetters } from 'vuex';
|
|
|
+import {
|
|
|
+ smallClassMap,
|
|
|
+ smallClassMapFile,
|
|
|
+ rightScrollData,
|
|
|
+ forestSample,
|
|
|
+ alarmDataApi,
|
|
|
+ financeBasePlant,
|
|
|
+ financeBaseDetail,
|
|
|
+ farmInfo,
|
|
|
+ smallClassDetail,
|
|
|
+ treePlant
|
|
|
+} from '@/service/index.js';
|
|
|
+import axios from 'axios';
|
|
|
+export default {
|
|
|
+ name: 'Mapview',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imgDialogVisible: false,
|
|
|
+ dialogImageUrl: null,
|
|
|
+ AMap: null,
|
|
|
+ map: null,
|
|
|
+ lngLat: [106.628201, 26.646694],
|
|
|
+ adName: '贵州省',
|
|
|
+ mapLevel: 'province',
|
|
|
+ adcode: '贵州省',
|
|
|
+ parentId: '520000',
|
|
|
+ province: '',
|
|
|
+ zoom: 8,
|
|
|
+ districtExplorer: null,
|
|
|
+ tipMarker: null,
|
|
|
+ $tipMarkerContent: null,
|
|
|
+ currentAreaNode: null,
|
|
|
+ cityMarkerArr: [],
|
|
|
+ eventMarker: null,
|
|
|
+ baseMarker: null,
|
|
|
+ streetMarkerArr: [],
|
|
|
+ leftPage: 'forest',
|
|
|
+ putPolygonData: [],
|
|
|
+ //乡镇边界
|
|
|
+ townPolygons: [],
|
|
|
+ // 基地详情
|
|
|
+ baseMarkers: [],
|
|
|
+ // 小班详情
|
|
|
+ smallMarkers: [],
|
|
|
+ // 时间详情
|
|
|
+ eventMarkers: [],
|
|
|
+ // 林场
|
|
|
+ treesMarkerArr: [],
|
|
|
+ // 小班边界
|
|
|
+ smallClassMapArr: [],
|
|
|
+ // 作物
|
|
|
+ economicsArr: [],
|
|
|
+ // 基地定位
|
|
|
+ baseMarkerArr: [],
|
|
|
+ // 时间信息
|
|
|
+ eventMarkersArr: [],
|
|
|
+ // 样地、小班
|
|
|
+ forestMarkerArr: [],
|
|
|
+ // 样地号
|
|
|
+ smallClassNArr: [],
|
|
|
+ // 森林资源小班边界
|
|
|
+ smallClassPolygonArr: [],
|
|
|
+ // 林木结构小班边界
|
|
|
+ treesPolygonArr: [],
|
|
|
+ treeCompMarkers: [],
|
|
|
+ townPolygonArr: [],
|
|
|
+ economicsArr: [],
|
|
|
+ selectData: {},
|
|
|
+ districtData: {},
|
|
|
+ streetData: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$store.state.addr.parentId': {
|
|
|
+ handler(val) {
|
|
|
+ // 加载小班边界
|
|
|
+ this.getSmallClass();
|
|
|
+ this.parentId = val;
|
|
|
+ if (this.$store.state.addr.mapLevel == 'street') {
|
|
|
+ this.parentId = val.substring(0, 6);
|
|
|
+ if (this.map) {
|
|
|
+ this.switch2AreaNode(
|
|
|
+ this.parentId,
|
|
|
+ this.$store.state.addr.mapLevel,
|
|
|
+ this.$store.state.addr.selectCity,
|
|
|
+ this.leftPage
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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.switch2AreaNode(
|
|
|
+ this.parentId,
|
|
|
+ this.$store.state.addr.mapLevel,
|
|
|
+ this.$store.state.addr.selectCity,
|
|
|
+ this.leftPage
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ this.polygon ||
|
|
|
+ this.streetMarkerArr ||
|
|
|
+ this.townPolygons ||
|
|
|
+ this.forestMarkerArr ||
|
|
|
+ this.smallClassNArr ||
|
|
|
+ this.forestMarkerArr ||
|
|
|
+ this.townPolygonArr
|
|
|
+ ) {
|
|
|
+ this.map.remove(this.polygon);
|
|
|
+ this.map.remove(this.streetMarkerArr);
|
|
|
+ this.map.remove(this.townPolygons);
|
|
|
+ this.map.remove(this.forestMarkerArr);
|
|
|
+ this.map.remove(this.smallClassNArr);
|
|
|
+ this.map.remove(this.forestMarkerArr);
|
|
|
+ this.map.remove(this.townPolygonArr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ '$store.state.addr.selectStreet'(val) {
|
|
|
+ if (val.label && val.value && val.areaId) {
|
|
|
+ this.map.remove(this.polygon);
|
|
|
+ let labelTown = val.label;
|
|
|
+ this.map.setCity(labelTown);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ '$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(val);
|
|
|
+ this.mapPolygon();
|
|
|
+ }
|
|
|
+ if (val != 'forest') {
|
|
|
+ this.map.remove(this.forestMarkerArr);
|
|
|
+ this.map.remove(this.smallClassNArr);
|
|
|
+ this.map.remove(this.smallClassPolygonArr);
|
|
|
+ }
|
|
|
+ if (val != 'treeSpecies') {
|
|
|
+ this.map.remove(this.forestMarkerArr);
|
|
|
+ this.map.remove(this.treesPolygonArr);
|
|
|
+ }
|
|
|
+ if (val != 'economics') {
|
|
|
+ this.map.remove(this.economicsArr);
|
|
|
+ this.map.remove(this.baseMarkerArr);
|
|
|
+ }
|
|
|
+ if (val != 'event') {
|
|
|
+ this.map.remove(this.eventMarkersArr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ '$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 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>' +
|
|
|
+ '</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,
|
|
|
+ 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(-230, -160), //设置文本标注偏移量
|
|
|
+ content: smallLabel //设置文本标注内容
|
|
|
+ });
|
|
|
+ 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');
|
|
|
+ let stealIcon = require('@/assets/img/steal.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 = '偷盗林木';
|
|
|
+ baseIcon = stealIcon;
|
|
|
+ }
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initAMap();
|
|
|
+ // 加载小班边界
|
|
|
+ // this.getSmallClass();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations([
|
|
|
+ 'changeSelectCity',
|
|
|
+ 'changeSelectDistrict',
|
|
|
+ 'changeSelectStreet',
|
|
|
+ 'changeSelectAddr'
|
|
|
+ ]),
|
|
|
+ initAMap() {
|
|
|
+ window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: 'e6666dfe93e7d3c6f3a5dc35cad6befb' // 密钥
|
|
|
+ };
|
|
|
+ let _this = this;
|
|
|
+ AMapLoader.load({
|
|
|
+ key: 'f79d862df9288710e3dce6591af9dff1', //设置您的key
|
|
|
+ version: '2.0',
|
|
|
+ plugins: [
|
|
|
+ 'AMap.ToolBar',
|
|
|
+ 'AMap.Driving',
|
|
|
+ 'AMap.DistrictSearch',
|
|
|
+ 'AMap.MapboxVectorTileLayer'
|
|
|
+ ],
|
|
|
+ Loca: {
|
|
|
+ version: '2.0'
|
|
|
+ },
|
|
|
+ AMapUI: {
|
|
|
+ version: '1.1',
|
|
|
+ plugins: ['overlay/SimpleMarker']
|
|
|
+ },
|
|
|
+ features: ['road', 'bg', 'building']
|
|
|
+ }).then((AMap) => {
|
|
|
+ _this.AMap = AMap;
|
|
|
+ _this.map = new AMap.Map('container', {
|
|
|
+ viewMode: '3D',
|
|
|
+ zoom: _this.zoom,
|
|
|
+ center: _this.lngLat,
|
|
|
+ pitch: 45,
|
|
|
+ terrain: true,
|
|
|
+ features: ['road', 'bg', 'building'],
|
|
|
+ layers: [new AMap.TileLayer.Satellite()]
|
|
|
+ });
|
|
|
+ AMapUI.load(
|
|
|
+ ['ui/geo/DistrictExplorer', 'ui/geo/DistrictCluster', 'lib/$'],
|
|
|
+ function (DistrictExplorer, DistrictCluster, $) {
|
|
|
+ window.DistrictCluster = DistrictCluster;
|
|
|
+ _this.loadMapData(DistrictExplorer, $);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ _this.map.on('rightclick', function (e) {
|
|
|
+ if (_this.smallMarkers.length > 0) {
|
|
|
+ _this.map.remove(_this.smallMarkers);
|
|
|
+ }
|
|
|
+ // if (_this.treeCompMarkers.length > 0) {
|
|
|
+ // _this.map.remove(_this.treeCompMarkers);
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ let 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: 'w',
|
|
|
+ STYLE: 'default',
|
|
|
+ tk: '064688075f565aa463866b915c378e00'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ wms.setMap(_this.map);
|
|
|
+
|
|
|
+ this.map.on('mousewheel', (e) => {
|
|
|
+ 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'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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>');
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ let adName = that.adName; //贵州省
|
|
|
+ let mapLevel = that.mapLevel;
|
|
|
+ let adcode = '520000';
|
|
|
+ //feature被点击
|
|
|
+ this.districtExplorer.on('featureClick', (e, feature) => {
|
|
|
+ const props = feature.properties;
|
|
|
+ if (props.subFeatureIndex != null) {
|
|
|
+ adName = props.name;
|
|
|
+ adcode = props.adcode;
|
|
|
+ mapLevel = props.level;
|
|
|
+ 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.remove(this.treesMarkerArr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ 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.getSmallClass();
|
|
|
+ let _this = this;
|
|
|
+ //更新地图视野
|
|
|
+ if (this.$store.state.addr.mapLevel != 'street') {
|
|
|
+ this.map.setBounds(areaNode.getBounds(), null, null, false);
|
|
|
+ }
|
|
|
+ // 加载相关标识
|
|
|
+ this.mapPolygon();
|
|
|
+ //清除已有的绘制内容
|
|
|
+ this.districtExplorer.clearFeaturePolygons();
|
|
|
+ // 清除已绘制的省市县名称
|
|
|
+ this.map.remove(this.cityMarkerArr);
|
|
|
+
|
|
|
+ //绘制子区域
|
|
|
+ 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 //填充透明度
|
|
|
+ });
|
|
|
+
|
|
|
+ // 绘制父级蒙版
|
|
|
+ let areaPolygon = areaNode.getParentFeature();
|
|
|
+ let 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)
|
|
|
+ ];
|
|
|
+ let areaPolygonArr = [];
|
|
|
+ areaPolygon.geometry.coordinates.forEach((element) => {
|
|
|
+ areaPolygonArr.push(element[0]);
|
|
|
+ });
|
|
|
+ let holes = areaPolygonArr;
|
|
|
+ let pathArray = [outer];
|
|
|
+ pathArray.push.apply(pathArray, holes);
|
|
|
+ this.polygon = new AMap.Polygon({
|
|
|
+ pathL: pathArray,
|
|
|
+ map: this.map,
|
|
|
+ strokeColor: '#00eeff',
|
|
|
+ strokeWeight: 1,
|
|
|
+ fillColor: '#0c1b05', // 遮罩背景色
|
|
|
+ fillOpacity: 0.8,
|
|
|
+ height: 10000
|
|
|
+ });
|
|
|
+ this.polygon.setPath(pathArray);
|
|
|
+
|
|
|
+ if (areaPolygon.properties.level != 'district') {
|
|
|
+ this.setMarker();
|
|
|
+ } else {
|
|
|
+ this.map.remove(this.treesMarkerArr);
|
|
|
+ }
|
|
|
+ //查询乡镇 标识
|
|
|
+ if (areaPolygon.properties.level == 'district') {
|
|
|
+ if (this.$store.state.addr.mapLevel != 'street') {
|
|
|
+ this.getrjx(areaPolygon.properties.name);
|
|
|
+ }
|
|
|
+ AMap.plugin(['AMap.DistrictSearch'], function () {
|
|
|
+ let district = new AMap.DistrictSearch({
|
|
|
+ // 返回行政区边界坐标等具体信息
|
|
|
+ extensions: 'all',
|
|
|
+ // 设置查询行政区级别为 区 （district）
|
|
|
+ level: areaPolygon.properties.level,
|
|
|
+ // 显示下级行政区级数，1表示返回下一级行政区
|
|
|
+ subdistrict: 1
|
|
|
+ });
|
|
|
+ let areaCode = areaPolygon.properties.name;
|
|
|
+ district.search(areaCode, function (status, result) {
|
|
|
+ let streetArr = result.districtList[0].districtList;
|
|
|
+ for (let elementLs in streetArr) {
|
|
|
+ _this.streetMarker = new AMap.Text({
|
|
|
+ //c城市指示标
|
|
|
+ text: streetArr[elementLs].name,
|
|
|
+ zIndex: 1,
|
|
|
+ map: _this.map,
|
|
|
+ anchor: 'center', // 设置文本标记锚点
|
|
|
+ style: {
|
|
|
+ padding: '0px 6px',
|
|
|
+ color: '#fff',
|
|
|
+ border: 'none',
|
|
|
+ fontSize: '12px',
|
|
|
+ 'background-color': '#E6810C'
|
|
|
+ },
|
|
|
+ position: [
|
|
|
+ streetArr[elementLs].center.lng,
|
|
|
+ streetArr[elementLs].center.lat
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ _this.streetMarkerArr.push(_this.streetMarker);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加城市标识
|
|
|
+ let cityArr = areaNode.getSubFeatures();
|
|
|
+ if (cityArr) {
|
|
|
+ for (let i = 0; i < cityArr.length; i++) {
|
|
|
+ this.cityMarker = new AMap.Text({
|
|
|
+ //c城市指示标
|
|
|
+ text: cityArr[i].properties.name,
|
|
|
+ zIndex: 1,
|
|
|
+ map: this.map,
|
|
|
+ anchor: 'center', // 设置文本标记锚点
|
|
|
+ style: {
|
|
|
+ padding: '0px 6px',
|
|
|
+ color: '#fff',
|
|
|
+ border: 'none',
|
|
|
+ fontSize: '12px',
|
|
|
+ 'background-color': '#E6810C'
|
|
|
+ },
|
|
|
+ position: cityArr[i].properties.centroid
|
|
|
+ });
|
|
|
+ this.cityMarkerArr.push(this.cityMarker);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //切换区域后刷新显示内容
|
|
|
+ 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;
|
|
|
+ //设置当前使用的定位用节点
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 加载林场
|
|
|
+ setMarker() {
|
|
|
+ this.forestFarmData = [];
|
|
|
+ if (this.treesMarkerArr.length > 0) {
|
|
|
+ this.map.remove(this.treesMarkerArr);
|
|
|
+ }
|
|
|
+ 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];
|
|
|
+ this.treesMarker = new AMap.Marker({
|
|
|
+ map: this.map,
|
|
|
+ position: lngLat,
|
|
|
+ icon: parentMarker,
|
|
|
+ anchor: 'bottom-center',
|
|
|
+ offset: new AMap.Pixel(0, 0)
|
|
|
+ });
|
|
|
+ this.treesMarker.setLabel({
|
|
|
+ direction: 'bottom',
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|
|
+ content: `<div>${item.forestName}</div>` //设置文本标注内容
|
|
|
+ });
|
|
|
+ this.treesMarkerArr.push(this.treesMarker);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let lngLat = [item.longitude, item.latitude];
|
|
|
+ this.treesMarker = new AMap.Marker({
|
|
|
+ map: this.map,
|
|
|
+ position: lngLat,
|
|
|
+ icon: parentMarker,
|
|
|
+ anchor: 'bottom-center',
|
|
|
+ offset: new AMap.Pixel(0, 0)
|
|
|
+ });
|
|
|
+ this.treesMarker.setLabel({
|
|
|
+ direction: 'bottom',
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|
|
+ content: `<div>${item.forestName}</div>` //设置文本标注内容
|
|
|
+ });
|
|
|
+ this.treesMarkerArr.push(this.treesMarker);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 加载乡镇边界
|
|
|
+ getrjx(cityName) {
|
|
|
+ if (cityName == '榕江县') {
|
|
|
+ axios.get('/static/rongjangintown.json').then((res) => {
|
|
|
+ this.putPolygonData = res.data.features;
|
|
|
+ this.putPolygon();
|
|
|
+ });
|
|
|
+ } else if (cityName == '清镇市') {
|
|
|
+ axios.get('/static/qingzhenzhen.json').then((res) => {
|
|
|
+ this.putPolygonData = res.data.features;
|
|
|
+ this.putPolygon();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ putPolygon() {
|
|
|
+ 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);
|
|
|
+
|
|
|
+ this.boundaryPolygon.on('click', (e) => {
|
|
|
+ let centerLanLatArr = [e.lnglat.lng, e.lnglat.lat];
|
|
|
+ that.map.remove(that.townPolygons);
|
|
|
+ // 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'
|
|
|
+ });
|
|
|
+ let townPolygon = new AMap.Polygon({
|
|
|
+ map: that.map,
|
|
|
+ path: element.geometry.coordinates,
|
|
|
+ strokeColor: 'yellow',
|
|
|
+ strokeWeight: 3,
|
|
|
+ fillOpacity: 0
|
|
|
+ });
|
|
|
+ this.townPolygonArr.push(townPolygon);
|
|
|
+ that.map.setZoomAndCenter(14, centerLanLatArr, false, 13);
|
|
|
+ });
|
|
|
+ that.boundaryPolygon.on('rightclick', function (e) {
|
|
|
+ if (that.smallMarkers || that.baseMarkers || that.eventMarkers) {
|
|
|
+ that.map.remove(that.smallMarkers);
|
|
|
+ that.map.remove(that.baseMarkers);
|
|
|
+ that.map.remove(that.eventMarkers);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getSmallClass() {
|
|
|
+ let that = this;
|
|
|
+ that.smallClassMapArr = [];
|
|
|
+ let params = {
|
|
|
+ cityId: that.$store.state.addr.selectCity.areaId,
|
|
|
+ countyId: that.$store.state.addr.selectDistrict.areaId
|
|
|
+ // townId: this.$store.state.addr.selectStreet.areaId
|
|
|
+ };
|
|
|
+ if (that.smallClassPolygonArr.length > 0) {
|
|
|
+ that.map.remove(that.smallClassPolygonArr);
|
|
|
+ }
|
|
|
+ if (that.treesPolygonArr.length > 0) {
|
|
|
+ that.map.remove(that.treesPolygonArr);
|
|
|
+ }
|
|
|
+ let pageData = {
|
|
|
+ pageNum: 0,
|
|
|
+ pageSize: 25
|
|
|
+ };
|
|
|
+ console.log(that.leftPage);
|
|
|
+ let mapLevel = that.$store.state.addr.mapLevel;
|
|
|
+ let res = await smallClassMap({ ...params, ...pageData });
|
|
|
+ console.log(res.rows);
|
|
|
+ if (res.code == 200 && res.total > 25) {
|
|
|
+ const total = res.total;
|
|
|
+ const totalPage = Math.ceil(total / pageData.pageSize);
|
|
|
+ const render = (page, mapLevel) => {
|
|
|
+ if (page >= totalPage) return;
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ render(page + 1, mapLevel);
|
|
|
+ pageData.pageNum = page;
|
|
|
+ smallClassMap({ ...params, ...pageData }).then((response) => {
|
|
|
+ if (response.code == 200) {
|
|
|
+ response.rows.forEach((item) => {
|
|
|
+ // if (item.smallId != null) {
|
|
|
+ // }
|
|
|
+ // this.smallClassMapArr.push(item);
|
|
|
+ if (that.leftPage === 'forest') {
|
|
|
+ this.addForestPolygon(item);
|
|
|
+ } else if (this.leftPage === 'treeSpecies') {
|
|
|
+ this.addTreeSpeciesPolygon(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ };
|
|
|
+ render(pageData.pageNum, mapLevel);
|
|
|
+ } else {
|
|
|
+ res.rows.forEach((item) => {
|
|
|
+ if (that.leftPage === 'forest') {
|
|
|
+ this.addForestPolygon(item);
|
|
|
+ } else if (this.leftPage === 'treeSpecies') {
|
|
|
+ this.addTreeSpeciesPolygon(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mapPolygon() {
|
|
|
+ if (this.smallClassMapArr) {
|
|
|
+ if (this.leftPage === 'forest') {
|
|
|
+ // this.addForestPolygon(this.smallClassMapArr);
|
|
|
+ if (
|
|
|
+ this.$store.state.addr.mapLevel == 'district' ||
|
|
|
+ this.$store.state.addr.mapLevel == 'street'
|
|
|
+ ) {
|
|
|
+ this.getForestSample(this.leftPage);
|
|
|
+ }
|
|
|
+ } else if (this.leftPage === 'treeSpecies') {
|
|
|
+ // this.addTreeSpeciesPolygon();
|
|
|
+ if (
|
|
|
+ this.$store.state.addr.mapLevel == 'district' ||
|
|
|
+ this.$store.state.addr.mapLevel == 'street'
|
|
|
+ ) {
|
|
|
+ this.getRightScrollData(this.leftPage);
|
|
|
+ }
|
|
|
+ } else if (this.leftPage === 'economics') {
|
|
|
+ this.getEconomics();
|
|
|
+ } else if (this.leftPage === 'event') {
|
|
|
+ this.getEven();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addForestPolygon(item) {
|
|
|
+ let that = this;
|
|
|
+ if (item) {
|
|
|
+ // console.log(item);
|
|
|
+ // 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',
|
|
|
+ fillColor: ''
|
|
|
+ });
|
|
|
+ this.smallClassPolygonArr.push(smallClassPolygon);
|
|
|
+ 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-details'>" +
|
|
|
+ "<h5 class='marker-title'>" +
|
|
|
+ item.countyName +
|
|
|
+ '-' +
|
|
|
+ item.smallNumber +
|
|
|
+ '</h5>' +
|
|
|
+ "<div class='marker-content'>" +
|
|
|
+ '<div>' +
|
|
|
+ '<p>小班号：' +
|
|
|
+ item.smallNumber +
|
|
|
+ '</p>' +
|
|
|
+ '<p>样地数：' +
|
|
|
+ item.sampleCount +
|
|
|
+ '</p>' +
|
|
|
+ '<p>小班蓄积量：' +
|
|
|
+ item.smallClassStock +
|
|
|
+ '(立方米)' +
|
|
|
+ '</p>' +
|
|
|
+ '<p>小班占地面积：' +
|
|
|
+ item.landArea +
|
|
|
+ '(亩)' +
|
|
|
+ '</p>' +
|
|
|
+ '<p>小班树种组成：' +
|
|
|
+ item.treeComp +
|
|
|
+ '</p>' +
|
|
|
+ '<p>地类：' +
|
|
|
+ item.landType +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林地权属：' +
|
|
|
+ item.landOwner +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林木权属：' +
|
|
|
+ item.forestOwner +
|
|
|
+ '</p>' +
|
|
|
+ '<p>林种：' +
|
|
|
+ item.forestClass +
|
|
|
+ '</p>' +
|
|
|
+ '<p>树种结构：' +
|
|
|
+ item.treeStruct +
|
|
|
+ '</p>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div>' +
|
|
|
+ '<p>起源：' +
|
|
|
+ item.origin +
|
|
|
+ '</p>' +
|
|
|
+ '<p>优势树种：' +
|
|
|
+ item.superTree +
|
|
|
+ '</p>' +
|
|
|
+ '<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>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="imgList">' +
|
|
|
+ "<span class='marker-span'>图片：</span>" +
|
|
|
+ '<div class="marker-imgs">' +
|
|
|
+ imgList +
|
|
|
+ '</div>' +
|
|
|
+ '</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(-5, -6)
|
|
|
+ });
|
|
|
+ that.smallMarker.setLabel({
|
|
|
+ direction: 'right',
|
|
|
+ offset: new AMap.Pixel(-230, -160), //设置文本标注偏移量
|
|
|
+ content: smallLabel //设置文本标注内容
|
|
|
+ });
|
|
|
+ // that.smallMarker.setMap(that.map);
|
|
|
+ that.smallMarkers.push(that.smallMarker);
|
|
|
+ smallClassPolygon.setOptions({
|
|
|
+ fillOpacity: 0.7,
|
|
|
+ fillColor: 'yellow'
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ smallClassPolygon.on('mouseout', () => {
|
|
|
+ smallClassPolygon.setOptions({
|
|
|
+ fillOpacity: 0,
|
|
|
+ fillColor: '#ccebc5'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ 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'
|
|
|
+ ) {
|
|
|
+ this.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'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.smallClassNArr.push(this.smallClassN);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // this.map.add(that.smallClassPolygon);
|
|
|
+
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imgClick() {
|
|
|
+ document.getElementsByTagName('div')[0].addEventListener('click', (e) => {
|
|
|
+ if (e.target.id === 'markerLabel') {
|
|
|
+ this.imgDialogVisible = true;
|
|
|
+ this.dialogImageUrl = e.target.currentSrc;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取样地数据
|
|
|
+ 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);
|
|
|
+ // forestMarker
|
|
|
+ this.forestMarkerArr.push(this.forestMarker);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addTreeSpeciesPolygon(item) {
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ this.treesPolygonArr.push(polygon);
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ that.map.on('rightclick', function (e) {
|
|
|
+ if (that.treeCompMarkers.length > 0) {
|
|
|
+ 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');
|
|
|
+ let stealIcon = require('@/assets/img/steal.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;
|
|
|
+ } else if (item.eventType == 4) {
|
|
|
+ item.eventContLabel = '偷盗林木';
|
|
|
+ baseIcon = stealIcon;
|
|
|
+ }
|
|
|
+ _this.smallMarker = new AMap.Marker({
|
|
|
+ map: _this.map,
|
|
|
+ position: lanLatArr,
|
|
|
+ icon: baseIcon,
|
|
|
+ anchor: 'bottom-center',
|
|
|
+ offset: new AMap.Pixel(0, 0),
|
|
|
+ zIndex: 999
|
|
|
+ });
|
|
|
+ _this.eventMarkersArr.push(_this.smallMarker);
|
|
|
+ _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() {
|
|
|
+ let _this = this;
|
|
|
+ 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({
|
|
|
+ map: _this.map,
|
|
|
+ position: lanLatArr,
|
|
|
+ icon: sampleIcon,
|
|
|
+ anchor: 'bottom-center',
|
|
|
+ offset: new AMap.Pixel(0, 0)
|
|
|
+ });
|
|
|
+ this.economicsArr.push(this.smallMarker);
|
|
|
+ // 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]) // 根据所设置的大小拉伸或压缩图片
|
|
|
+ });
|
|
|
+ this.baseMarker = new AMap.Marker({
|
|
|
+ map: this.map,
|
|
|
+ position: lanLatArr,
|
|
|
+ icon: sampleIcon,
|
|
|
+ anchor: 'bottom-center',
|
|
|
+ offset: new AMap.Pixel(0, 0)
|
|
|
+ });
|
|
|
+ this.baseMarker.setLabel({
|
|
|
+ direction: 'right',
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|
|
+ content: `<div>${element.baseName}</div>` //设置文本标注内容
|
|
|
+ });
|
|
|
+ this.baseMarkerArr.push(this.baseMarker);
|
|
|
+ this.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>';
|
|
|
+ _this.baseMarker.setLabel({
|
|
|
+ direction: 'top',
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|
|
+ content: treeSmallLabel //设置文本标注内容
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.baseMarker.on('mouseout', function (e) {
|
|
|
+ _this.baseMarker.setLabel({
|
|
|
+ direction: 'right',
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|
|
+ content: `<div>${element.baseName}</div>` //设置文本标注内容
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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/ .info-details {
|
|
|
+ background-image: url('../assets/img/small-label.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 26rem;
|
|
|
+ padding-bottom: 13px;
|
|
|
+ // height: 10rem;
|
|
|
+ color: #fff;
|
|
|
+ .marker-title {
|
|
|
+ margin: 0 auto;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ .marker-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ 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;
|
|
|
+ width: 376px;
|
|
|
+ overflow: auto;
|
|
|
+ img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin: 0 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .marker-imgs::-webkit-scrollbar {
|
|
|
+ background: transparent;
|
|
|
+ opacity: 0.6px;
|
|
|
+ width: 10px;
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
+ .marker-imgs::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba($color: #07a2eb8e, $alpha: 0.6);
|
|
|
+ border-radius: 20px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ .marker-imgs::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/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>
|
