|
|
|
@ -1,17 +1,865 @@ |
|
|
|
<template> |
|
|
|
<div class="screen-center"> |
|
|
|
screen-left |
|
|
|
<div id="map" |
|
|
|
style="height: 100%;width: 100%;position: relative;min-width:1000px"> |
|
|
|
<div style="position: absolute;left:16%;top: 10px;cursor: pointer;z-index: 100;color: #fff;font-size: 40px;"> |
|
|
|
<div style="display: flex;justify-content: space-around;flex-direction: row;width: 30vw;"> |
|
|
|
<div v-for="item in topNum" |
|
|
|
:key="item.value" |
|
|
|
style="background-color: rgba(8, 31, 45, 0.6);padding: 30px;display: flex;flex-direction: column;align-items: center;"> |
|
|
|
<div style="padding-bottom: 20px;"> |
|
|
|
{{item.value&&getThousandth(item.value)}} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<div style="border-top: 5px solid #36acd3;padding-top: 20px;display: flex;align-items: center;white-space: nowrap;"> |
|
|
|
<el-image style="height: 60px;" |
|
|
|
:src="require('../../assets/shuline.png')" |
|
|
|
fit="fill"></el-image> |
|
|
|
{{item.label||"--" }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div @click="initialization" |
|
|
|
style="position: absolute;left: 100px;bottom: 100px;cursor: pointer;z-index: 100;"> |
|
|
|
<el-image style="width: 50px; height: 50px;" |
|
|
|
:src="require('../../assets/back.png')" |
|
|
|
fit="fill"></el-image> |
|
|
|
</div> |
|
|
|
<div style="position: absolute;right:50px;bottom:50px;z-index: 100;border-radius: 16px;padding:20px; border: 1px solid #045775;font-size: 40px;color: #fff;height: 400px;display: flex;flex-direction: column;justify-content: space-around;" |
|
|
|
v-if="layersIndex==3"> |
|
|
|
<div v-for="item in buttonPiece" |
|
|
|
:key="item.value" |
|
|
|
style="display: flex;align-items: center;cursor: pointer;padding: 8px 0;" |
|
|
|
@click="selectType(item.value,item.label)" |
|
|
|
:style="{background: item.value==buttonIndex?'linear-gradient(to top, rgba(16, 98, 130,1), rgba(16, 98, 130,0))':''}"> |
|
|
|
<el-image style="width: 40px; height: 40px;margin-right: 12px;" |
|
|
|
:src="require('../../assets/ling.png')" |
|
|
|
fit="fill"></el-image> |
|
|
|
{{item.label}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="showFirst" |
|
|
|
style="position: absolute;right:1200px;bottom:200px;z-index: 100;padding:20px;font-size: 40px;color: #fff;height: 500px;display: flex;flex-direction: column;justify-content:space-around;border-radius: 16px;padding:20px; border: 1px solid #045775;align-items: center;background-color: rgba(5, 36, 49,0.5);"> |
|
|
|
<div style="margin-bottom: 24px;display: flex;justify-content: space-between;align-items: center;width: 100%;"> |
|
|
|
<div> |
|
|
|
|
|
|
|
<script> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
微网格信息 |
|
|
|
</div> |
|
|
|
<div style="color: #fff;cursor: pointer;" |
|
|
|
@click="close"> |
|
|
|
x |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-for="item in microgridArr" |
|
|
|
:key="item.value" |
|
|
|
style="display: flex;flex-direction: row;align-items: center;cursor: pointer;padding: 4px;" |
|
|
|
@click="microgridDetails(item)" |
|
|
|
:style="{background: item.value==microgridIndex?'linear-gradient(to right, rgba(16, 98, 130,1), rgba(16, 98, 130,0))':''}"> |
|
|
|
<div style="margin-right:80px"> |
|
|
|
<el-image style="width: 40px; height: 40px;margin-right: 12px;vertical-align: text-top;" |
|
|
|
:src="require('../../assets/ling.png')" |
|
|
|
fit="fill"></el-image> |
|
|
|
{{ item.label }} |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-if="showMicrogridDetails" |
|
|
|
style="position: absolute;right:400px;bottom:100px;z-index: 100;padding:20px;font-size: 40px;color: #fff;height: auto;display: flex;flex-direction: column;border-radius: 16px;padding:20px; border: 1px solid #045775;background-color: rgba(7, 100, 133,0.5);"> |
|
|
|
<div style="margin-bottom: 38px;"> |
|
|
|
<div |
|
|
|
style="background: linear-gradient(to right, rgba(6, 227, 218,1), rgba(6, 227, 218,0));display: flex;justify-content: space-between;flex-direction: row;padding: 12px;margin-bottom: 38px;"> |
|
|
|
<div> |
|
|
|
{{ microgridObj.firstTitle||"--" }} |
|
|
|
</div> |
|
|
|
<div style="color: #fff;cursor: pointer;" |
|
|
|
@click="showMicrogridDetails=false"> |
|
|
|
x |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div style="margin-bottom: 38px;"> |
|
|
|
微网格长：{{microgridObj.leader}} |
|
|
|
</div> |
|
|
|
<div style="margin-bottom: 38px;"> |
|
|
|
性别：{{microgridObj.gender}} |
|
|
|
</div> |
|
|
|
<div style="margin-bottom: 38px;"> |
|
|
|
电话：{{microgridObj.phone}} |
|
|
|
</div> |
|
|
|
<div style="margin-bottom: 38px;"> |
|
|
|
住址：{{microgridObj.address}} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div |
|
|
|
style="background: linear-gradient(to right, rgba(6, 227, 218,1), rgba(6, 227, 218,0));display: flex;justify-content: space-between;flex-direction: row;padding: 12px;margin-bottom: 38px;"> |
|
|
|
<div> |
|
|
|
{{ microgridObj.secondTitle||"--" }} |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
总数：{{ microgridObj.total||"--" }}户 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="max-width: 700px;min-width: 700px;overflow-x: clip; text-overflow:ellipsis;white-space: nowrap;"> |
|
|
|
<div v-for="item in microgridObj.list" |
|
|
|
:key="item.value" |
|
|
|
style="margin-bottom: 30px;cursor: pointer;" |
|
|
|
:title="item.label"> |
|
|
|
<span style="margin-right: 12px;"> |
|
|
|
{{ item.value }} |
|
|
|
</span> |
|
|
|
<span> |
|
|
|
{{ item.label }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="display: flex;justify-content: flex-end;"> |
|
|
|
<el-pagination background |
|
|
|
layout="prev, pager, next" |
|
|
|
:total="microgridObj.total" |
|
|
|
@current-change="handleCurrentChange"> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import markIcon from "@/assets/position.png"; |
|
|
|
import markIcons from "@/assets/positions.png"; |
|
|
|
import * as turf from '@turf/turf'; |
|
|
|
import axios from 'axios'; |
|
|
|
import mapboxgl from 'mapbox-gl'; |
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css'; |
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
const md5 = require('blueimp-md5'); |
|
|
|
export default { |
|
|
|
name: "screen-center", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
map: null, |
|
|
|
colorList: ["#F84E2D", "#1372EC", "#44DEA3", "#FFC544", "#6C44FF"], |
|
|
|
attrAndColor: [], |
|
|
|
shibeiJson: null, |
|
|
|
resolutions: [ |
|
|
|
156543.03392800014, 78271.516963999937, 39135.758482000092, 19567.879240999919, |
|
|
|
9783.9396204999593, 4891.9698102499797, 2445.9849051249898, 1222.9924525624949, 611.49622628137968, |
|
|
|
305.74811314055756, 152.87405657041106, 76.437028285073239, 38.21851414253662, 19.10925707126831, |
|
|
|
9.5546285356341549, 4.7773142679493699, 2.3886571339746849, 1.1943285668550503, 0.59716428355981721, |
|
|
|
0.29858214164761665, 0.149291070823808325, 0.0746455354119041625 |
|
|
|
], |
|
|
|
hoveredStateId: null, |
|
|
|
topNum: [ |
|
|
|
{ |
|
|
|
label: "用户总数", |
|
|
|
value: 330195 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "党员总数", |
|
|
|
value: 74830 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "党群总数", |
|
|
|
value: 9501 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "话题总数", |
|
|
|
value: 286508 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "议题总数", |
|
|
|
value: 223829 |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "诉求总数", |
|
|
|
value: 215450 |
|
|
|
} |
|
|
|
], |
|
|
|
buttonPiece: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: "居民" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: "房屋" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 3, |
|
|
|
label: "党支部" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 4, |
|
|
|
label: "用户" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 5, |
|
|
|
label: "党员" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 6, |
|
|
|
label: "事件" |
|
|
|
} |
|
|
|
], |
|
|
|
buttonIndex: 0, |
|
|
|
markerJson: null, |
|
|
|
layersIndex: 1, |
|
|
|
features: {}, |
|
|
|
showFirst: false, |
|
|
|
showMicrogridDetails: false, |
|
|
|
microgridArr: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: "第一微网格" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: "第二微网格" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 3, |
|
|
|
label: "第三微网格" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 4, |
|
|
|
label: "第四微网格" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 5, |
|
|
|
label: "第五微网格" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 6, |
|
|
|
label: "第六微网格" |
|
|
|
}, |
|
|
|
], |
|
|
|
microgridIndex: 0, |
|
|
|
microgridObj: { |
|
|
|
firstTitle: "", |
|
|
|
leader: "张俊凯", |
|
|
|
gender: "男", |
|
|
|
phone: "15623523200", |
|
|
|
address: "市北区", |
|
|
|
secondTitle: "包干房屋", |
|
|
|
total: 37, |
|
|
|
list: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: "市北区敦化路53号4号楼2单元202" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 3, |
|
|
|
label: "市北区山东路168号时代国际广场1402号" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 4, |
|
|
|
label: "市北区山东路120号玫瑰花园6号楼3单元506" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 5, |
|
|
|
label: "市北区南宁路32号2单元501" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 6, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 7, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 8, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 9, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 10, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 11, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 12, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 13, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 14, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 15, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 16, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 17, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 18, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 19, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 20, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
microgridObjCopy: { |
|
|
|
firstTitle: "", |
|
|
|
leader: "张俊凯", |
|
|
|
gender: "男", |
|
|
|
phone: "15623523200", |
|
|
|
address: "市北区", |
|
|
|
secondTitle: "包干房屋", |
|
|
|
total: 37, |
|
|
|
list: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: "市北区敦化路53号4号楼2单元202" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 3, |
|
|
|
label: "市北区山东路168号时代国际广场1402号" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 4, |
|
|
|
label: "市北区山东路120号玫瑰花园6号楼3单元506" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 5, |
|
|
|
label: "市北区南宁路32号2单元501" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 6, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 7, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 8, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 9, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 10, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 11, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 12, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 13, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 14, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 15, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 16, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 17, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 18, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 19, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 20, |
|
|
|
label: "市北区台柳路12号4单元101" |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.shibeiJson = require('./shibei.json'); |
|
|
|
this.markerJson = require('./markerJson.json'); |
|
|
|
this.init() |
|
|
|
this.microgridObj.list = JSON.parse(JSON.stringify(this.microgridObjCopy.list)).slice(0, 5) |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters(['shibeiAId', 'shibeiName', 'shibeiAgencyType']), |
|
|
|
getThousandth() { |
|
|
|
return function (val) { |
|
|
|
if (!val) { |
|
|
|
return "--" |
|
|
|
} |
|
|
|
return val.toLocaleString() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
shibeiAId(value) { |
|
|
|
this.topNum.forEach((f, i, arr) => { |
|
|
|
arr[i]["value"] = f.value - 1000 |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
init() { |
|
|
|
// 初始化map对象，加载天地图底图 |
|
|
|
mapboxgl.accessToken = "pk.eyJ1IjoiZGp4YyIsImEiOiJjanlxdzNlbW0wNHNyM29yMzZibHczOHlpIn0.TOUXgB6IHHhnmA6RsL6pWw"; |
|
|
|
this.map = new mapboxgl.Map({ |
|
|
|
container: 'map', // container id |
|
|
|
center: [120.38140448734, 36.11044959486], // starting position [lng, lat] |
|
|
|
zoom: 12.5, // starting zoom |
|
|
|
// maxZoom: 12.5, // 22 |
|
|
|
// minZoom: 9, |
|
|
|
bearing: 0, |
|
|
|
pitch: 40, |
|
|
|
style: { |
|
|
|
version: 8, |
|
|
|
sources: {}, |
|
|
|
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", |
|
|
|
layers: [] |
|
|
|
} |
|
|
|
}); |
|
|
|
const _this = this; |
|
|
|
this.map.on('load', function () { |
|
|
|
_this.getPolygonJson(_this.shibeiJson) |
|
|
|
_this.map.on('mousemove', 'shibeiPolygonLayer', function (e) { |
|
|
|
_this.map.getCanvas().style.cursor = 'pointer'; // 鼠标样式 |
|
|
|
|
|
|
|
}); |
|
|
|
_this.map.on("click", "shibeiPolygonLayer", function (e) { |
|
|
|
const features = _this.map.queryRenderedFeatures(e.point); |
|
|
|
if (features.length > 0) { |
|
|
|
_this.features = features[0] |
|
|
|
if (features[0]["properties"]["type"] && features[0]["properties"]["type"] == "marker") { |
|
|
|
_this.makeMarker(features[0]) |
|
|
|
return |
|
|
|
} |
|
|
|
if (features[0]["properties"]["name"].indexOf("网格") != -1) { |
|
|
|
return |
|
|
|
} |
|
|
|
_this.getBoundary(features[0]["properties"]["adcode"] || features[0]["properties"]["subId"]) |
|
|
|
|
|
|
|
_this.map.setZoom(13.5) |
|
|
|
_this.map.setCenter(features[0]["geometry"]["coordinates"][0][0]) |
|
|
|
|
|
|
|
if (_this.map.getLayer("shibeiPolygonLayer")) { |
|
|
|
_this.map.removeLayer("shibeiPolygonLayer") |
|
|
|
_this.map.removeLayer("text_JSON_layer") |
|
|
|
_this.map.removeSource("shibeiPolygonSource") |
|
|
|
} |
|
|
|
if (_this.map.getLayer("SinglePolygonLayer")) { |
|
|
|
_this.map.removeLayer("SinglePolygonLayer") |
|
|
|
_this.map.removeLayer("SingleTextLayer") |
|
|
|
_this.map.removeSource("SinglePolygonSource") |
|
|
|
} |
|
|
|
for (let i = 8; i <= 18; i++) { |
|
|
|
if (_this.map.getLayer("lineBufferLayer-" + i)) { |
|
|
|
_this.map.removeLayer("lineBufferLayer-" + i) |
|
|
|
_this.map.removeSource("lineBufferSource-" + i) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// _this.addSinglePolygon(features[0]) |
|
|
|
}); |
|
|
|
// 鼠标移入要素时的高亮效果 |
|
|
|
// _this.map.on('mousemove', 'shibeiPolygonLayer', function (e) { |
|
|
|
// _this.map.getCanvas().style.cursor = 'pointer'; // 鼠标样式 |
|
|
|
// if (_this.map.getLayer("heightPolygonLayer")) { |
|
|
|
// _this.map.removeLayer("heightPolygonLayer") |
|
|
|
// _this.map.removeSource("heightPolygonSource") |
|
|
|
// } |
|
|
|
// let feature = e.features[0]; |
|
|
|
// _this.addHeightPolygon(feature) |
|
|
|
// }); |
|
|
|
// _this.map.on('mouseleave', 'shibeiPolygonLayer', function (e) { |
|
|
|
// if (_this.map.getLayer("heightPolygonLayer")) { |
|
|
|
// _this.map.removeLayer("heightPolygonLayer") |
|
|
|
// _this.map.removeSource("heightPolygonSource") |
|
|
|
// } |
|
|
|
// }); |
|
|
|
}) |
|
|
|
}, |
|
|
|
getPolygonJson(obj) { |
|
|
|
let shibeiPolyline = JSON.parse(JSON.stringify(obj)) |
|
|
|
for (let i = 0; i < shibeiPolyline.features.length; i++) { |
|
|
|
shibeiPolyline.features[i].geometry.type = 'MultiLineString' //面转线 |
|
|
|
shibeiPolyline.features[i].geometry.coordinates = this.convertPolygonToPolyline(shibeiPolyline.features[ |
|
|
|
i].geometry.coordinates) |
|
|
|
} |
|
|
|
|
|
|
|
this.addPolygon(obj) |
|
|
|
this.addPolyline(shibeiPolyline) |
|
|
|
|
|
|
|
}, |
|
|
|
convertPolygonToPolyline(MultiPolygon) { |
|
|
|
let MultiLineString = [] |
|
|
|
MultiPolygon.forEach(Polygon => { |
|
|
|
Polygon.forEach(LinearRing => { |
|
|
|
let LineString = LinearRing |
|
|
|
MultiLineString.push(LineString) |
|
|
|
}) |
|
|
|
}); |
|
|
|
return MultiLineString |
|
|
|
}, |
|
|
|
addPolygon(geojson) { |
|
|
|
this.map.addSource('shibeiPolygonSource', { |
|
|
|
'type': 'geojson', |
|
|
|
'data': geojson |
|
|
|
}); |
|
|
|
|
|
|
|
this.map.addLayer({ |
|
|
|
'id': 'shibeiPolygonLayer', |
|
|
|
'type': 'fill-extrusion', |
|
|
|
'source': 'shibeiPolygonSource', |
|
|
|
'paint': { |
|
|
|
'fill-extrusion-vertical-gradient': true, |
|
|
|
'fill-extrusion-color': "#1d597b", |
|
|
|
'fill-extrusion-height': 300, |
|
|
|
'fill-extrusion-base': 0, |
|
|
|
'fill-extrusion-opacity': 1 |
|
|
|
} |
|
|
|
}); |
|
|
|
this.map.addLayer({ |
|
|
|
id: "text_JSON_layer", |
|
|
|
type: "symbol", |
|
|
|
source: "shibeiPolygonSource", |
|
|
|
// minzoom: 5, |
|
|
|
// maxzoom: 22, |
|
|
|
interactive: true, |
|
|
|
paint: { |
|
|
|
'text-color': '#fff', |
|
|
|
}, |
|
|
|
"layout": { |
|
|
|
"text-field": "{name}", |
|
|
|
'text-size': 40 |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
addSinglePolygon(geojson) { |
|
|
|
this.map.addSource('SinglePolygonSource', { |
|
|
|
'type': 'geojson', |
|
|
|
'data': geojson |
|
|
|
}); |
|
|
|
|
|
|
|
this.map.addLayer({ |
|
|
|
'id': 'SinglePolygonLayer', |
|
|
|
'type': 'fill-extrusion', |
|
|
|
'source': 'SinglePolygonSource', |
|
|
|
'paint': { |
|
|
|
'fill-extrusion-vertical-gradient': true, |
|
|
|
'fill-extrusion-color': "#1d597b", |
|
|
|
'fill-extrusion-height': 300, |
|
|
|
'fill-extrusion-base': 0, |
|
|
|
'fill-extrusion-opacity': 1 |
|
|
|
} |
|
|
|
}); |
|
|
|
this.map.addLayer({ |
|
|
|
id: "SingleTextLayer", |
|
|
|
type: "symbol", |
|
|
|
source: "SinglePolygonSource", |
|
|
|
// minzoom: 5, |
|
|
|
// maxzoom: 22, |
|
|
|
interactive: true, |
|
|
|
paint: { |
|
|
|
'text-color': '#fff', |
|
|
|
}, |
|
|
|
"layout": { |
|
|
|
"text-field": "{name}", |
|
|
|
'text-size': 40 |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
addHeightPolygon(geojson) { |
|
|
|
this.map.addSource('heightPolygonSource', { |
|
|
|
'type': 'geojson', |
|
|
|
'data': geojson |
|
|
|
}); |
|
|
|
this.map.addLayer({ |
|
|
|
'id': 'heightPolygonLayer', |
|
|
|
'type': 'fill-extrusion', |
|
|
|
'source': 'heightPolygonSource', |
|
|
|
'paint': { |
|
|
|
'fill-extrusion-vertical-gradient': true, |
|
|
|
'fill-extrusion-color': "#b3b817", |
|
|
|
'fill-extrusion-height': 300, |
|
|
|
'fill-extrusion-base': 0, |
|
|
|
'fill-extrusion-opacity': 1 |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
addPolyline(geojson) { |
|
|
|
// 8 ~ 18 级 |
|
|
|
for (let i = 8; i <= 18; i++) { |
|
|
|
let radius = 1 * this.resolutions[i + 1] // 2个像素，缓冲后4个像素 |
|
|
|
let lineBuffer = turf.buffer(geojson, radius, { |
|
|
|
units: 'meters' |
|
|
|
}); |
|
|
|
this.map.addSource('lineBufferSource-' + i, { |
|
|
|
'type': 'geojson', |
|
|
|
'data': lineBuffer |
|
|
|
}); |
|
|
|
this.map.addLayer({ |
|
|
|
'id': 'lineBufferLayer-' + i, |
|
|
|
'type': 'fill-extrusion', |
|
|
|
'source': 'lineBufferSource-' + i, |
|
|
|
"minzoom": (i - 1), |
|
|
|
"maxzoom": (i + 1), |
|
|
|
'paint': { |
|
|
|
'fill-extrusion-vertical-gradient': true, |
|
|
|
'fill-extrusion-color': '#4bbdd8', |
|
|
|
'fill-extrusion-height': 310, // 挤出高度 |
|
|
|
'fill-extrusion-base': 300,// 底部的高度。必须小于或等于挤出高度 |
|
|
|
'fill-extrusion-opacity': 0.3 |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
initialization() { |
|
|
|
if (this.map.getLayer("shibeiPolygonLayer")) { |
|
|
|
this.map.removeLayer("shibeiPolygonLayer") |
|
|
|
this.map.removeLayer("text_JSON_layer") |
|
|
|
this.map.removeSource("shibeiPolygonSource") |
|
|
|
} |
|
|
|
if (this.map.getLayer("SinglePolygonLayer")) { |
|
|
|
this.map.removeLayer("SinglePolygonLayer") |
|
|
|
this.map.removeLayer("SingleTextLayer") |
|
|
|
this.map.removeSource("SinglePolygonSource") |
|
|
|
} |
|
|
|
for (let i = 8; i <= 18; i++) { |
|
|
|
if (this.map.getLayer("lineBufferLayer-" + i)) { |
|
|
|
this.map.removeLayer("lineBufferLayer-" + i) |
|
|
|
this.map.removeSource("lineBufferSource-" + i) |
|
|
|
} |
|
|
|
} |
|
|
|
if (this.map.getLayer("pointDimensions")) { |
|
|
|
this.map.removeLayer("pointDimensions") |
|
|
|
this.map.removeSource("pointDimensions") |
|
|
|
this.map.removeImage("markIcons") |
|
|
|
} |
|
|
|
if (this.map.getLayer("pointDimension")) { |
|
|
|
this.map.removeLayer("pointDimension") |
|
|
|
this.map.removeSource("pointDimension") |
|
|
|
this.map.removeImage("markIcon") |
|
|
|
} |
|
|
|
this.layersIndex = 1 |
|
|
|
this.buttonIndex = 0 |
|
|
|
this.getPolygonJson(this.shibeiJson) |
|
|
|
this.map.setZoom(12.5) |
|
|
|
this.map.setCenter([120.38140448734, 36.11044959486]) |
|
|
|
}, |
|
|
|
selectType(value, label) { |
|
|
|
if (value === this.buttonIndex) { |
|
|
|
this.buttonIndex = 0 |
|
|
|
this.makeMarkers(this.markerJson) |
|
|
|
return |
|
|
|
} |
|
|
|
this.buttonIndex = value |
|
|
|
let json = { |
|
|
|
"type": "FeatureCollection", |
|
|
|
"features": JSON.parse(JSON.stringify(this.markerJson.features)).filter(f => { |
|
|
|
return f.properties.name == label |
|
|
|
}) |
|
|
|
} |
|
|
|
this.makeMarkers(json) |
|
|
|
}, |
|
|
|
getBoundary(id) { |
|
|
|
|
|
|
|
const ts = Date.now(); |
|
|
|
let signConfig = { |
|
|
|
key: '612d304095c50369c3ef06e490f05779eeb8f19ff16566c73aeafafc5fa01970', |
|
|
|
dataType: 'real', |
|
|
|
appId: 'acc4ad66c82a7b46e741364b4c62dce2', |
|
|
|
customerId: 'b09527201c4409e19d1dbc5e3c3429a1', |
|
|
|
authType: 'md5', |
|
|
|
} |
|
|
|
const token = md5(`${signConfig.key}:${ts}`); |
|
|
|
axios({ |
|
|
|
method: "post", |
|
|
|
url: "https://epmet-open.elinkservice.cn/api/data/report/screen/agency/compartment", |
|
|
|
data: { |
|
|
|
agencyId: id |
|
|
|
}, |
|
|
|
headers: { |
|
|
|
AccessToken: token, |
|
|
|
AppId: signConfig.appId, |
|
|
|
CustomerId: signConfig.customerId, |
|
|
|
AuthType: signConfig.authType, |
|
|
|
ts |
|
|
|
} |
|
|
|
}).then(e => { |
|
|
|
if (e.data.code == 0 && e.data.data) { |
|
|
|
if (e.data.data.agencyDistribution && e.data.data.agencyDistribution.length == 0) { |
|
|
|
return |
|
|
|
} |
|
|
|
if (this.map.getLayer("shibeiPolygonLayer")) { |
|
|
|
this.map.removeLayer("shibeiPolygonLayer") |
|
|
|
this.map.removeLayer("text_JSON_layer") |
|
|
|
this.map.removeSource("shibeiPolygonSource") |
|
|
|
} |
|
|
|
if (this.map.getLayer("SinglePolygonLayer")) { |
|
|
|
this.map.removeLayer("SinglePolygonLayer") |
|
|
|
this.map.removeLayer("SingleTextLayer") |
|
|
|
this.map.removeSource("SinglePolygonSource") |
|
|
|
} |
|
|
|
for (let i = 8; i <= 18; i++) { |
|
|
|
if (this.map.getLayer("lineBufferLayer-" + i)) { |
|
|
|
this.map.removeLayer("lineBufferLayer-" + i) |
|
|
|
this.map.removeSource("lineBufferSource-" + i) |
|
|
|
} |
|
|
|
} |
|
|
|
let obj = { |
|
|
|
type: "FeatureCollection", |
|
|
|
name: "index", |
|
|
|
features: e.data.data.agencyDistribution |
|
|
|
} |
|
|
|
obj.features.forEach(f => { |
|
|
|
f.type = "Feature" |
|
|
|
f.properties = {} |
|
|
|
f.geometry = {} |
|
|
|
f.properties.subId = f.subId || "" |
|
|
|
f.properties.name = f.subName || "" |
|
|
|
f.geometry.type = "MultiPolygon" |
|
|
|
f.geometry.coordinates = [[JSON.parse(f.subAreaMarks)]] || [] |
|
|
|
delete f.agencyLevel |
|
|
|
delete f.subAreaMarks |
|
|
|
delete f.subCenterMark |
|
|
|
delete f.subId |
|
|
|
delete f.subName |
|
|
|
}) |
|
|
|
this.getPolygonJson(obj) |
|
|
|
|
|
|
|
if (this.features["properties"]["name"].indexOf("社区") != -1) { |
|
|
|
this.selectType(0, "") |
|
|
|
this.layersIndex = 3 |
|
|
|
} |
|
|
|
} |
|
|
|
}).catch(f => { |
|
|
|
console.log(f); |
|
|
|
}) |
|
|
|
}, |
|
|
|
makeMarkers(json) { |
|
|
|
const _this = this; |
|
|
|
if (_this.map.getLayer("pointDimension")) { |
|
|
|
_this.map.removeLayer("pointDimension") |
|
|
|
_this.map.removeSource("pointDimension") |
|
|
|
_this.map.removeImage("markIcon") |
|
|
|
} |
|
|
|
_this.map.loadImage(markIcon, function (error, image) { |
|
|
|
_this.map.addImage("markIcon", image); |
|
|
|
_this.map.addSource("pointDimension", { |
|
|
|
type: "geojson" /* geojson类型资源 */, |
|
|
|
data: json |
|
|
|
}); |
|
|
|
|
|
|
|
_this.map.addLayer({ |
|
|
|
id: "pointDimension", |
|
|
|
type: "symbol" /* symbol类型layer，一般用来绘制点*/, |
|
|
|
source: "pointDimension", |
|
|
|
layout: { |
|
|
|
"icon-image": "markIcon", |
|
|
|
"icon-size": 2, |
|
|
|
}, |
|
|
|
// paint: { |
|
|
|
// "circle-radius": 4, |
|
|
|
// "circle-color": "#B42222" |
|
|
|
// } |
|
|
|
}); |
|
|
|
_this.layersIndex = 3 |
|
|
|
}); |
|
|
|
}, |
|
|
|
makeMarker(json) { |
|
|
|
const _this = this; |
|
|
|
if (_this.map.getLayer("pointDimensions")) { |
|
|
|
_this.map.removeLayer("pointDimensions") |
|
|
|
_this.map.removeSource("pointDimensions") |
|
|
|
_this.map.removeImage("markIcons") |
|
|
|
} |
|
|
|
_this.showFirst = true |
|
|
|
_this.map.loadImage(markIcons, function (error, image) { |
|
|
|
_this.map.addImage("markIcons", image); |
|
|
|
_this.map.addSource("pointDimensions", { |
|
|
|
type: "geojson" /* geojson类型资源 */, |
|
|
|
data: json |
|
|
|
}); |
|
|
|
|
|
|
|
_this.map.addLayer({ |
|
|
|
id: "pointDimensions", |
|
|
|
type: "symbol" /* symbol类型layer，一般用来绘制点*/, |
|
|
|
source: "pointDimensions", |
|
|
|
layout: { |
|
|
|
"icon-image": "markIcons", |
|
|
|
"icon-size": 2, |
|
|
|
}, |
|
|
|
// paint: { |
|
|
|
// "circle-radius": 4, |
|
|
|
// "circle-color": "#B42222" |
|
|
|
// } |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
microgridDetails(item) { |
|
|
|
this.showMicrogridDetails = true |
|
|
|
this.microgridIndex = item.value |
|
|
|
this.microgridObj.firstTitle = item.label |
|
|
|
}, |
|
|
|
close() { |
|
|
|
this.showFirst = false |
|
|
|
this.showMicrogridDetails = false |
|
|
|
}, |
|
|
|
handleCurrentChange(e) { |
|
|
|
let times = 5 |
|
|
|
this.microgridObj.list = JSON.parse(JSON.stringify(this.microgridObjCopy.list)).slice(e * times - times, e * times) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -19,5 +867,13 @@ export default { |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.screen-center { |
|
|
|
flex: 1; |
|
|
|
min-width: 1000px; |
|
|
|
} |
|
|
|
::v-deep .mapboxgl-ctrl { |
|
|
|
display: none !important; |
|
|
|
} |
|
|
|
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active { |
|
|
|
background-color: #0aabca; |
|
|
|
} |
|
|
|
</style> |
