|
|
@@ -62,93 +62,26 @@ export default {
|
|
|
// this.initMAp();
|
|
|
this.initAMap();
|
|
|
},
|
|
|
- watch: {
|
|
|
- '$store.state.addr.parentId': {
|
|
|
- handler(val) {
|
|
|
- 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
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- '$store.state.addr.page': {
|
|
|
- handler(val) {
|
|
|
- this.leftPage = val;
|
|
|
- if (!this.smallClassMapArr) {
|
|
|
- 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
|
|
|
- });
|
|
|
- }
|
|
|
- if (this.parentId) {
|
|
|
- this.switch2AreaNode(
|
|
|
- this.parentId,
|
|
|
- this.$store.state.addr.mapLevel,
|
|
|
- this.$store.state.addr.selectCity,
|
|
|
- this.leftPage
|
|
|
- );
|
|
|
- // this.getDistrict(
|
|
|
- // this.$store.state.addr.parentName,
|
|
|
- // this.$store.state.addr.mapLevel
|
|
|
- // );
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- '$store.state.addr.smallClassMapArr': {
|
|
|
- handler(val) {
|
|
|
- if (val.code == 200) {
|
|
|
- this.smallClassMapArr = val.rows;
|
|
|
- // smallClassPolygon
|
|
|
- // this.map.setLayers(this.smallClassPolygon);
|
|
|
- if (this.$store.state.addr.mapLevel === 'district') {
|
|
|
- if (this.leftPage === 'forest') {
|
|
|
- this.addForestPolygon();
|
|
|
- } else if (this.leftPage === 'treeSpecies') {
|
|
|
- this.addTreeSpeciesPolygon();
|
|
|
- } else if (this.leftPage === 'event') {
|
|
|
- this.getEven();
|
|
|
- } else if (this.leftPage === 'economics') {
|
|
|
- this.getEconomics();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ watch: {},
|
|
|
computed: {
|
|
|
...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {
|
|
|
- ...mapMutations([
|
|
|
- 'changeSelectCity',
|
|
|
- 'changeSelectDistrict',
|
|
|
- 'changeSelectStreet'
|
|
|
- ]),
|
|
|
initAMap() {
|
|
|
let _this = this;
|
|
|
window._AMapSecurityConfig = {
|
|
|
- securityJsCode: '4a6a8d8ea053d9aa8f4677ee1179fe57' // 密钥
|
|
|
+ securityJsCode: 'e6666dfe93e7d3c6f3a5dc35cad6befb' // 密钥
|
|
|
};
|
|
|
AMapLoader.load({
|
|
|
- key: '58f9d9f14f2700689ddbc618495693b7', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
- version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ key: 'f79d862df9288710e3dce6591af9dff1', // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ plugin:['AMap.MapboxVectorTileLayer'],
|
|
|
AMapUI: {
|
|
|
// 是否加载 AMapUI，缺省不加载
|
|
|
version: '1.1', // AMapUI 缺省 1.1
|
|
|
plugins: ['overlay/SimpleMarker'] // 需要加载的 AMapUI ui插件
|
|
|
}
|
|
|
- // plugins:['AMap.ToolBar','AMap.DistrictSearch','AMap.Object3DLayer','AMap.Object3D'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
}).then((AMap) => {
|
|
|
_this.AMap = AMap;
|
|
|
_this.map = new AMap.Map('container', {
|
|
|
@@ -157,19 +90,21 @@ export default {
|
|
|
terrain: true,
|
|
|
zoom: _this.zoom, //初始化地图级别
|
|
|
center: _this.lngLat, //初始化地图中心点位置
|
|
|
- pitch: 30,
|
|
|
- // layers: [
|
|
|
- // new AMap.TileLayer.Satellite(),
|
|
|
- // new AMap.TileLayer.RoadNet()
|
|
|
- // ],
|
|
|
- features: ['road', 'bg'] //地图要素
|
|
|
+ pitch: 45,
|
|
|
+ features: ['road', 'bg', 'building'], //地图要素
|
|
|
+ mapStyle: 'amap://styles/whitesmoke',
|
|
|
+ showBuildingBlock: false,
|
|
|
+ showIndoorMap: false,
|
|
|
+ showLabel: true
|
|
|
});
|
|
|
+
|
|
|
AMapUI.load(
|
|
|
['ui/geo/DistrictExplorer', 'lib/$'],
|
|
|
- function (DistrictExplorer, $) {
|
|
|
+ function (DistrictExplorer) {
|
|
|
_this.loadMapData(DistrictExplorer, $);
|
|
|
}
|
|
|
);
|
|
|
+
|
|
|
var wms = new AMap.TileLayer.WMTS({
|
|
|
url: 'http://t4.tianditu.gov.cn/img_w/wmts',
|
|
|
blend: false,
|
|
|
@@ -185,90 +120,56 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
wms.setMap(_this.map);
|
|
|
- // this.$nextTick(() => {
|
|
|
- // this.getDistrict(_this.adcode,_this.mapLevel)
|
|
|
- // });
|
|
|
+ this.getWP()
|
|
|
});
|
|
|
},
|
|
|
- getDistrict(adName, mapLevel) {
|
|
|
- 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,
|
|
|
- strokeColor: '#00eeff',
|
|
|
- strokeWeight: 1,
|
|
|
- fillColor: '#0c1b05', // 遮罩背景色
|
|
|
- fillOpacity: 0.8
|
|
|
- });
|
|
|
- that.polygon.setPath(pathArray);
|
|
|
- that.map.add(that.polygon);
|
|
|
- // that.map.setFitView(that.polygons);
|
|
|
- var cityArr = result.districtList[0].districtList;
|
|
|
- for (let i = 0; i < cityArr.length; i++) {
|
|
|
- that.cityMarker = new AMap.Text({
|
|
|
- //c城市指示标
|
|
|
- text: cityArr[i].name,
|
|
|
- zIndex: 1,
|
|
|
- anchor: 'center', // 设置文本标记锚点
|
|
|
- cursor: 'pointer',
|
|
|
- style: {
|
|
|
- padding: '0px 6px',
|
|
|
- color: '#fff',
|
|
|
- border: 'none',
|
|
|
- fontSize: '12px',
|
|
|
- 'background-color': '#E6810C'
|
|
|
- },
|
|
|
- position: [cityArr[i].center.lng, cityArr[i].center.lat]
|
|
|
- });
|
|
|
- // that.cityMarkerArr.push(that.cityMarker)
|
|
|
- that.map.add(that.cityMarker);
|
|
|
+ getWP() {
|
|
|
+ console.log('123');
|
|
|
+ // AMap.plugin(['AMap.MapboxVectorTileLayer'], function () {
|
|
|
+ if (this.map) {
|
|
|
+ var mvtLayer = new AMap.MapboxVectorTileLayer({
|
|
|
+ zIndex: 9,
|
|
|
+ opacity: 1,
|
|
|
+ url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=58f9d9f14f2700689ddbc618495693b7&id=b86e9fc4-db2a-4c24-8577-d42a51e6a984',
|
|
|
+ dataZooms: [1, 18],
|
|
|
+ tileSize: 256,
|
|
|
+ styles: {
|
|
|
+ polygon: {
|
|
|
+ sourceLayer: 'default',
|
|
|
+ color: 'rgba(62,110,255,0.3)',
|
|
|
+ borderColor: '#3E6EFF',
|
|
|
+ borderWidth: 2,
|
|
|
+ visible: 1
|
|
|
+ },
|
|
|
+ line: {
|
|
|
+ sourceLayer: 'default',
|
|
|
+ color: '#3E6EFF',
|
|
|
+ lineWidth: 2,
|
|
|
+ visible: 1
|
|
|
+ },
|
|
|
+ point: {
|
|
|
+ sourceLayer: 'default',
|
|
|
+ radius: 6,
|
|
|
+ color: '#3E6EFF',
|
|
|
+ borderColor: '#FFFFFF',
|
|
|
+ borderWidth: 2,
|
|
|
+ visible: 1
|
|
|
+ }
|
|
|
}
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
+ });
|
|
|
+ this.map.add(mvtLayer);
|
|
|
+ }
|
|
|
+ // });
|
|
|
},
|
|
|
loadMapData(DistrictExplorer, $) {
|
|
|
let that = this;
|
|
|
//创建一个实例
|
|
|
that.districtExplorer = window.districtExplorer = new DistrictExplorer({
|
|
|
eventSupport: true, //打开事件支持
|
|
|
+ bubble: true,
|
|
|
map: that.map
|
|
|
});
|
|
|
//当前聚焦的区域
|
|
|
- that.currentAreaNode = null;
|
|
|
this.$tipMarkerContent = $('<div class="tipMarker top"></div>');
|
|
|
this.tipMarker = new AMap.Marker({
|
|
|
content: this.$tipMarkerContent.get(0),
|
|
|
@@ -294,82 +195,11 @@ export default {
|
|
|
var adName = that.adcode; //贵州省
|
|
|
var mapLevel = that.mapLevel;
|
|
|
var adcode = '520000';
|
|
|
- this.map.on('mousewheel', (e) => {
|
|
|
- console.log(e.lnglat.lng, e.lnglat.lat);
|
|
|
- var zoom = this.map.getZoom(); //获取当前地图级别
|
|
|
- // console.log(this.map.getCity());
|
|
|
- console.log(zoom);
|
|
|
- if (zoom > '8' && zoom < '8.1') {
|
|
|
- console.log('开始检测');
|
|
|
- AMap.plugin('AMap.Geocoder', function () {
|
|
|
- let geocoder = new AMap.Geocoder({
|
|
|
- radius: 1000,
|
|
|
- extensions: 'base'
|
|
|
- });
|
|
|
- geocoder.getAddress(
|
|
|
- [e.lnglat.lng, e.lnglat.lat],
|
|
|
- function (status, result) {
|
|
|
- if (status === 'complete' && result.info === 'OK') {
|
|
|
- if (result && result.regeocode) {
|
|
|
- console.log(result);
|
|
|
-
|
|
|
- // that.switch2AreaNode(result.regeocode.addressComponent.adcode);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
//feature被点击
|
|
|
this.districtExplorer.on('featureClick', (e, feature) => {
|
|
|
- // that.map.clearMap();
|
|
|
- console.log(feature);
|
|
|
const props = feature.properties;
|
|
|
- mapLevel = props.level;
|
|
|
- adName = props.name;
|
|
|
- // that.getDistrict(adName, mapLevel);
|
|
|
- // this.switch2AreaNode(props.adcode);
|
|
|
-
|
|
|
- // 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.$store.dispatch('getSmallClassMap', {
|
|
|
- // cityId: this.$store.state.addr.selectCity.areaId,
|
|
|
- // countyId: this.$store.state.addr.selectDistrict.areaId,
|
|
|
- // townId: this.$store.state.addr.selectStreet.areaId
|
|
|
- // });
|
|
|
+ this.switch2AreaNode(props.adcode);
|
|
|
});
|
|
|
- that.getDistrict(adName, mapLevel);
|
|
|
this.switch2AreaNode(adcode);
|
|
|
},
|
|
|
//根据Hover状态设置相关样式
|
|
|
@@ -405,7 +235,7 @@ export default {
|
|
|
//清除已有的绘制内容
|
|
|
this.districtExplorer.clearFeaturePolygons();
|
|
|
//绘制子区域
|
|
|
- this.districtExplorer.renderSubFeatures(areaNode, (e) => {
|
|
|
+ this.districtExplorer.renderSubFeatures(areaNode, () => {
|
|
|
return {
|
|
|
cursor: 'default',
|
|
|
bubble: true,
|
|
|
@@ -415,6 +245,16 @@ export default {
|
|
|
fillOpacity: 0 //填充透明度
|
|
|
};
|
|
|
});
|
|
|
+
|
|
|
+ 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 pathArray = [outer];
|
|
|
+ // var holes = result.districtList[0].boundaries;
|
|
|
+ // pathArray.push.apply(pathArray, holes);
|
|
|
//绘制父区域
|
|
|
this.districtExplorer.renderParentFeature(areaNode, {
|
|
|
cursor: 'default',
|
|
|
@@ -422,18 +262,19 @@ export default {
|
|
|
strokeColor: '#00eeff', //线颜色
|
|
|
strokeOpacity: 1, //线透明度
|
|
|
strokeWeight: 2, //线宽
|
|
|
- fillOpacity: 0, //填充透明度
|
|
|
- fillColor: '#0c1b05' // 遮罩背景色
|
|
|
+ fillOpacity: 0 //填充透明度
|
|
|
+ // fillColor: '#0c1b05'
|
|
|
});
|
|
|
+ // console.log(plone.b.Mb.De.path);
|
|
|
},
|
|
|
+
|
|
|
//切换区域后刷新显示内容
|
|
|
refreshAreaNode(areaNode) {
|
|
|
this.districtExplorer.setHoverFeature(null);
|
|
|
this.renderAreaPolygons(areaNode);
|
|
|
},
|
|
|
//切换区域
|
|
|
- switch2AreaNode(adcode, mapLevel, selectCity, page, callback) {
|
|
|
- console.log(adcode);
|
|
|
+ switch2AreaNode(adcode, mapLevel, selectStreet, page, callback) {
|
|
|
if (
|
|
|
this.currentAreaNode &&
|
|
|
'' + this.currentAreaNode.getAdcode() === '' + adcode
|
|
|
@@ -447,27 +288,7 @@ export default {
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
- this.currentAreaNode = window.currentAreaNode = areaNode;
|
|
|
- if (
|
|
|
- mapLevel == 'city' ||
|
|
|
- mapLevel == undefined ||
|
|
|
- mapLevel == 'province'
|
|
|
- ) {
|
|
|
- this.setMarker();
|
|
|
- }
|
|
|
- if (mapLevel === 'district') {
|
|
|
- if (page === 'forest') {
|
|
|
- this.addForestPolygon();
|
|
|
- this.getForestSample(page);
|
|
|
- } else if (page === 'treeSpecies') {
|
|
|
- this.addTreeSpeciesPolygon();
|
|
|
- this.getRightScrollData(page);
|
|
|
- } else if (page === 'event') {
|
|
|
- this.getEven();
|
|
|
- } else if (page === 'economics') {
|
|
|
- this.getEconomics();
|
|
|
- }
|
|
|
- }
|
|
|
+ this.currentAreaNode = areaNode;
|
|
|
//设置当前使用的定位用节点
|
|
|
this.districtExplorer.setAreaNodesForLocating([this.currentAreaNode]);
|
|
|
|
|
|
@@ -484,528 +305,13 @@ export default {
|
|
|
if (callback) {
|
|
|
callback(error);
|
|
|
}
|
|
|
- console.error(error);
|
|
|
+ window.console.error(error);
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
if (callback) {
|
|
|
callback(null, areaNode);
|
|
|
}
|
|
|
});
|
|
|
- },
|
|
|
- // getSmallClass() {
|
|
|
- // let that = this;
|
|
|
- // this.smallClassMapArr = this.$store.state.addr.smallClassMapArr;
|
|
|
- // },
|
|
|
- addForestPolygon() {
|
|
|
- let that = this;
|
|
|
- this.smallClassMapArr.forEach((item) => {
|
|
|
- let polyData = JSON.parse(item.mapInfo);
|
|
|
- that.smallClassPolygon = new AMap.Polygon({
|
|
|
- map: this.map,
|
|
|
- path: polyData.features[0].geometry.coordinates,
|
|
|
- strokeOpacity: 1,
|
|
|
- fillOpacity: 0,
|
|
|
- strokeColor: 'red',
|
|
|
- strokeWeight: 2,
|
|
|
- zIndex: 999,
|
|
|
- cursor: 'pointer'
|
|
|
- });
|
|
|
- var lanLatArr = [];
|
|
|
- that.smallClassPolygon.on('mouseover', (e) => {
|
|
|
- lanLatArr = [e.lnglat.lng, e.lnglat.lat];
|
|
|
- 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>村（林班）：' +
|
|
|
- polyData.features[0].properties.CUN +
|
|
|
- '</p>' +
|
|
|
- '<p>乡镇（林场）：' +
|
|
|
- item.townName +
|
|
|
- '</p>' +
|
|
|
- '</div>' +
|
|
|
- '</div>';
|
|
|
- this.smallMarker = new AMap.Marker({
|
|
|
- position: lanLatArr,
|
|
|
- icon: require('@/assets/img/small-marker.png'),
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- this.smallMarker.setLabel({
|
|
|
- direction: 'right',
|
|
|
- offset: new AMap.Pixel(-150, -90), //设置文本标注偏移量
|
|
|
- content: smallLabel //设置文本标注内容
|
|
|
- });
|
|
|
- this.smallMarker.setMap(this.map);
|
|
|
- that.smallClassPolygon.setOptions({
|
|
|
- fillOpacity: 0.7,
|
|
|
- fillColor: 'yellow'
|
|
|
- });
|
|
|
- });
|
|
|
- that.smallClassPolygon.on('mouseout', () => {
|
|
|
- if (this.smallMarker) {
|
|
|
- this.smallMarker.setMap(null);
|
|
|
- this.smallMarker = null;
|
|
|
- }
|
|
|
- that.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({
|
|
|
- position: lngLat,
|
|
|
- icon: sampleIcon,
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- 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, 0)
|
|
|
- });
|
|
|
- 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(-2, 6), //设置文本标注偏移量
|
|
|
- content: `<div class="label-treecomp">${item.treeComp}<span class="smallH">${item.smallNumber}</span></div>` //设置文本标注内容
|
|
|
- });
|
|
|
- }
|
|
|
- this.map.add(this.forestMarker);
|
|
|
- }
|
|
|
- });
|
|
|
- // console.log(page);
|
|
|
- // if (page === 'forest') {
|
|
|
- // this.map.on('click', function (e) {
|
|
|
- // _this.map.remove(_this.forestMarker);
|
|
|
- // });
|
|
|
- // }
|
|
|
- },
|
|
|
- // markerClick(e, item) {
|
|
|
- // console.log(e);
|
|
|
- // console.log(item);
|
|
|
- // },
|
|
|
- addTreeSpeciesPolygon() {
|
|
|
- this.smallClassMapArr.forEach((item) => {
|
|
|
- let polyData = JSON.parse(item.mapInfo);
|
|
|
- let polygon = new AMap.Polygon({
|
|
|
- map: this.map,
|
|
|
- path: polyData.features[0].geometry.coordinates,
|
|
|
- strokeOpacity: 1,
|
|
|
- fillOpacity: 0,
|
|
|
- strokeColor: 'red',
|
|
|
- strokeWeight: 2,
|
|
|
- zIndex: 999,
|
|
|
- cursor: 'pointer'
|
|
|
- });
|
|
|
- var lanLatArr = [];
|
|
|
- polygon.on('mouseover', (e) => {
|
|
|
- lanLatArr = [e.lnglat.lng, e.lnglat.lat];
|
|
|
- rightScrollData({ smallNumber: item.smallNumber }).then((res) => {
|
|
|
- this.treeCompData = res.rows[0];
|
|
|
- });
|
|
|
- if (!this.treeCompData) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- let treeCompData = this.treeCompData;
|
|
|
- let treeSmallLabel =
|
|
|
- "<div class='info-small'>" +
|
|
|
- "<h5 class='marker-title'>小班" +
|
|
|
- treeCompData.smallNumber +
|
|
|
- '</h5>' +
|
|
|
- "<div class='marker-content'>" +
|
|
|
- '<p>树种组成：' +
|
|
|
- treeCompData.treeComp +
|
|
|
- '</p>' +
|
|
|
- '<p>树种结构：' +
|
|
|
- treeCompData.treeStruct +
|
|
|
- '</p>' +
|
|
|
- '<p>优势树种：' +
|
|
|
- treeCompData.superTree +
|
|
|
- '</p>' +
|
|
|
- '<p>优势树种平均胸径：' +
|
|
|
- treeCompData.superTreeDbh +
|
|
|
- '厘米' +
|
|
|
- '</p>' +
|
|
|
- '<p>优势树种平均高：' +
|
|
|
- treeCompData.superTreeHigh +
|
|
|
- '米' +
|
|
|
- '</p>' +
|
|
|
- '<p>位置：' +
|
|
|
- treeCompData.countyName +
|
|
|
- treeCompData.townName +
|
|
|
- treeCompData.villageName +
|
|
|
- '</p>' +
|
|
|
- '</div>' +
|
|
|
- '</div>';
|
|
|
- this.smallMarker = new AMap.Marker({
|
|
|
- position: lanLatArr,
|
|
|
- icon: require('@/assets/img/small-marker.png'),
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- this.smallMarker.setLabel({
|
|
|
- direction: 'top',
|
|
|
- offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
|
|
|
- content: treeSmallLabel //设置文本标注内容
|
|
|
- });
|
|
|
-
|
|
|
- this.smallMarker.setMap(this.map);
|
|
|
- polygon.setOptions({
|
|
|
- fillOpacity: 0.7,
|
|
|
- fillColor: 'yellow'
|
|
|
- });
|
|
|
- });
|
|
|
- polygon.on('mouseout', () => {
|
|
|
- if (this.smallMarker) {
|
|
|
- this.smallMarker.setMap(null);
|
|
|
- this.smallMarker = null;
|
|
|
- }
|
|
|
- polygon.setOptions({
|
|
|
- fillOpacity: 0,
|
|
|
- fillColor: '#ccebc5'
|
|
|
- });
|
|
|
- });
|
|
|
- this.map.add(polygon);
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取小班列表
|
|
|
- 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() {
|
|
|
- alarmDataApi().then((res) => {
|
|
|
- res.data.forEach((item) => {
|
|
|
- let lanLatArr = [item.longitude, item.latitude];
|
|
|
- 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 = '火灾';
|
|
|
- } else if (item.eventType == 2) {
|
|
|
- item.eventContLabel = '砍伐';
|
|
|
- } else if (item.eventType == 3) {
|
|
|
- item.eventContLabel = '病虫害';
|
|
|
- }
|
|
|
- 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>';
|
|
|
-
|
|
|
- switch (item.eventType) {
|
|
|
- case 1:
|
|
|
- this.smallMarker = new AMap.Marker({
|
|
|
- position: lanLatArr,
|
|
|
- icon: fireIcon,
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- this.smallMarker.setLabel({
|
|
|
- direction: 'top',
|
|
|
- offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
|
|
|
- content: treeSmallLabel //设置文本标注内容
|
|
|
- });
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- this.smallMarker = new AMap.Marker({
|
|
|
- position: lanLatArr,
|
|
|
- icon: cutTreeIcon,
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- this.smallMarker.setLabel({
|
|
|
- direction: 'top',
|
|
|
- offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
|
|
|
- content: treeSmallLabel //设置文本标注内容
|
|
|
- });
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- this.smallMarker = new AMap.Marker({
|
|
|
- position: lanLatArr,
|
|
|
- icon: insectpestIcon,
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- this.smallMarker.setLabel({
|
|
|
- direction: 'top',
|
|
|
- offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
|
|
|
- content: treeSmallLabel //设置文本标注内容
|
|
|
- });
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- this.smallMarker.setMap(this.map);
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- // 林业经济
|
|
|
- getEconomics() {
|
|
|
- this.smallClassMapArr.forEach((item) => {
|
|
|
- let polyData = JSON.parse(item.mapInfo);
|
|
|
- let polygon = new AMap.Polygon({
|
|
|
- map: this.map,
|
|
|
- path: polyData.features[0].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'
|
|
|
- });
|
|
|
- });
|
|
|
- this.map.add(polygon);
|
|
|
- });
|
|
|
- let economicsList = [
|
|
|
- {
|
|
|
- longitude: '108.568423',
|
|
|
- latitude: '26.2042',
|
|
|
- eventType: 1,
|
|
|
- titleName: '投入点1',
|
|
|
- eventContLabel: '蜜蜂',
|
|
|
- measure: '15',
|
|
|
- num: '109',
|
|
|
- cityName: '1号养蜂基地'
|
|
|
- }
|
|
|
- ];
|
|
|
- economicsList.forEach((item) => {
|
|
|
- let lanLatArr = [item.longitude, item.latitude];
|
|
|
- let beeIcon = require('@/assets/img/bee.png');
|
|
|
- let cutTreeIcon = require('@/assets/img/cutTree.png');
|
|
|
- let insectpestIcon = require('@/assets/img/insectpest.png');
|
|
|
- let iconMeta = [82, 46];
|
|
|
- let sampleIcon = new AMap.Icon({
|
|
|
- size: new AMap.Size(iconMeta[0], iconMeta[1]), // 图标尺寸
|
|
|
- image: beeIcon,
|
|
|
- imageSize: new AMap.Size(iconMeta[0], iconMeta[1]) // 根据所设置的大小拉伸或压缩图片
|
|
|
- });
|
|
|
- let treeSmallLabel =
|
|
|
- "<div class='info-small'>" +
|
|
|
- "<h5 class='marker-title'>" +
|
|
|
- item.titleName +
|
|
|
- '</h5>' +
|
|
|
- "<div class='marker-content'>" +
|
|
|
- '<p>种植/养殖/加工作物：' +
|
|
|
- item.eventContLabel +
|
|
|
- '</p>' +
|
|
|
- '<p>占地面积：' +
|
|
|
- item.measure +
|
|
|
- '亩' +
|
|
|
- '</p>' +
|
|
|
- '<p>当前数量：' +
|
|
|
- item.num +
|
|
|
- '箱' +
|
|
|
- '</p>' +
|
|
|
- '<p>位置：' +
|
|
|
- item.cityName +
|
|
|
- '</p>' +
|
|
|
- '</div>' +
|
|
|
- '</div>';
|
|
|
-
|
|
|
- switch (item.eventType) {
|
|
|
- case 1:
|
|
|
- this.smallMarker = new AMap.Marker({
|
|
|
- position: lanLatArr,
|
|
|
- icon: sampleIcon,
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- this.smallMarker.setLabel({
|
|
|
- direction: 'top',
|
|
|
- offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
|
|
|
- content: treeSmallLabel //设置文本标注内容
|
|
|
- });
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- this.smallMarker = new AMap.Marker({
|
|
|
- position: lanLatArr,
|
|
|
- icon: cutTreeIcon,
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- this.smallMarker.setLabel({
|
|
|
- direction: 'top',
|
|
|
- offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
|
|
|
- content: treeSmallLabel //设置文本标注内容
|
|
|
- });
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- this.smallMarker = new AMap.Marker({
|
|
|
- position: lanLatArr,
|
|
|
- icon: insectpestIcon,
|
|
|
- anchor: 'bottom-center',
|
|
|
- offset: new AMap.Pixel(0, 0)
|
|
|
- });
|
|
|
- this.smallMarker.setLabel({
|
|
|
- direction: 'top',
|
|
|
- offset: new AMap.Pixel(-10, 0), //设置文本标注偏移量
|
|
|
- content: treeSmallLabel //设置文本标注内容
|
|
|
- });
|
|
|
-
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- this.smallMarker.setMap(this.map);
|
|
|
- });
|
|
|
- },
|
|
|
- setMarker() {
|
|
|
- let forestFarm = [
|
|
|
- {
|
|
|
- label: '清镇林场',
|
|
|
- lng: '106.361446',
|
|
|
- lat: '26.636267'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '榕江林场',
|
|
|
- lng: '108.298933',
|
|
|
- lat: '26.043956'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '三都林场',
|
|
|
- lng: '107.992916',
|
|
|
- lat: '26.008507'
|
|
|
- }
|
|
|
- ];
|
|
|
- let parentMarker = require('@/assets/img/pre-marker.png');
|
|
|
- forestFarm.forEach((item) => {
|
|
|
- let lngLat = [item.lng, item.lat];
|
|
|
- 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.label}</div>` //设置文本标注内容
|
|
|
- });
|
|
|
- marker.setMap(this.map);
|
|
|
- });
|
|
|
}
|
|
|
}
|
|
|
};
|
