8 changed files with 1371 additions and 343 deletions
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,987 @@ |
|||||
|
<template> |
||||
|
<div class="screen-center"> |
||||
|
<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> |
||||
|
<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;"> |
||||
|
<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> |
||||
|
|
||||
|
</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'); |
||||
|
console.log(this.shibeiJson); |
||||
|
for (let i in this.shibeiJson.features) { |
||||
|
this.shibeiJson.features[i].properties.resiNum = '88', |
||||
|
this.shibeiJson.features[i].properties.houseNum = '66' |
||||
|
this.shibeiJson.features[i].properties.partNum = '第一党支部' |
||||
|
} |
||||
|
console.log(this.shibeiJson.features); |
||||
|
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) { |
||||
|
console.log(e); |
||||
|
const features = _this.map.queryRenderedFeatures(e.point); |
||||
|
console.log(features); |
||||
|
if (_this.layersIndex === 3) { |
||||
|
_this.showFirst = true |
||||
|
} |
||||
|
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") |
||||
|
} |
||||
|
if (_this.map.getLayer("text_JSON_layer-num")) { |
||||
|
_this.map.removeLayer("text_JSON_layer-num") |
||||
|
} |
||||
|
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': "#00466e", |
||||
|
'fill-extrusion-height': 300, |
||||
|
'fill-extrusion-base': 310, |
||||
|
'fill-extrusion-opacity': 0.3 // 调整透明度值 |
||||
|
} |
||||
|
}); |
||||
|
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': 25 |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
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': '#00e4fa', |
||||
|
'fill-extrusion-height': 310, // 挤出高度 |
||||
|
'fill-extrusion-base': 300,// 底部的高度。必须小于或等于挤出高度 |
||||
|
'fill-extrusion-opacity': 0.3 |
||||
|
} |
||||
|
}); |
||||
|
// this.map.addLayer({ |
||||
|
// id: 'shibeiPolylineShadow-', |
||||
|
// type: 'fill-extrusion', |
||||
|
// source: 'lineBufferSource-' + i, |
||||
|
// paint: { |
||||
|
// 'fill-extrusion-color': [ |
||||
|
// 'interpolate', |
||||
|
// ['linear'], |
||||
|
// ['get', 'height'], |
||||
|
// 0, '#05c3e3', // 内阴影底部颜色 |
||||
|
// // 300, '#0089aa' // 内阴影顶部颜色 |
||||
|
// ], |
||||
|
// 'fill-extrusion-height': 310, // 内阴影的底部高度 |
||||
|
// 'fill-extrusion-base': 300, // 内阴影的顶部高度 |
||||
|
// 'fill-extrusion-opacity': 0.3, // 内阴影的透明度 |
||||
|
// }, |
||||
|
// light: null, // 设置光照效果为 null |
||||
|
// },) |
||||
|
} |
||||
|
}, |
||||
|
initialization() { |
||||
|
if (this.map.getLayer("text_JSON_layer-num")) { |
||||
|
// 如果存在，移除图层 |
||||
|
this.map.removeLayer("text_JSON_layer-num"); |
||||
|
} |
||||
|
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]); |
||||
|
this.close(); |
||||
|
}, |
||||
|
selectType(value, label) { |
||||
|
// if (value === this.buttonIndex) { |
||||
|
// this.buttonIndex = 0 |
||||
|
// this.makeMarkers(this.markerJson) |
||||
|
// return |
||||
|
// } |
||||
|
this.buttonIndex = value |
||||
|
if (this.map.getLayer('text_JSON_layer-num')) { |
||||
|
this.map.removeLayer('text_JSON_layer-num'); |
||||
|
} |
||||
|
let json = { |
||||
|
"type": "FeatureCollection", |
||||
|
"features": JSON.parse(JSON.stringify(this.markerJson.features)).filter(f => { |
||||
|
return f.properties.name == label |
||||
|
}) |
||||
|
} |
||||
|
if (value == 1) { |
||||
|
this.map.addLayer({ |
||||
|
id: "text_JSON_layer-num", |
||||
|
type: "symbol", |
||||
|
source: "shibeiPolygonSource", |
||||
|
// minzoom: 5, |
||||
|
// maxzoom: 22, |
||||
|
interactive: true, |
||||
|
paint: { |
||||
|
'text-color': '#fff', |
||||
|
}, |
||||
|
"layout": { |
||||
|
"text-field": "{resiNum}", |
||||
|
'text-size': 25, |
||||
|
'text-offset': [0, -1.5] |
||||
|
} |
||||
|
}); |
||||
|
} else if (value == 2) { |
||||
|
this.map.addLayer({ |
||||
|
id: "text_JSON_layer-num", |
||||
|
type: "symbol", |
||||
|
source: "shibeiPolygonSource", |
||||
|
// minzoom: 5, |
||||
|
// maxzoom: 22, |
||||
|
interactive: true, |
||||
|
paint: { |
||||
|
'text-color': '#fff', |
||||
|
}, |
||||
|
"layout": { |
||||
|
"text-field": "{houseNum}", |
||||
|
'text-size': 25, |
||||
|
'text-offset': [0, -1.5] |
||||
|
} |
||||
|
}); |
||||
|
} else if (value == 3) { |
||||
|
this.map.addLayer({ |
||||
|
id: "text_JSON_layer-num", |
||||
|
type: "symbol", |
||||
|
source: "shibeiPolygonSource", |
||||
|
// minzoom: 5, |
||||
|
// maxzoom: 22, |
||||
|
interactive: true, |
||||
|
paint: { |
||||
|
'text-color': '#fff', |
||||
|
}, |
||||
|
"layout": { |
||||
|
"text-field": "{partNum}", |
||||
|
'text-size': 25, |
||||
|
'text-offset': [0, -1.5] |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
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 |
||||
|
} |
||||
|
console.log(e.data); |
||||
|
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": 1, |
||||
|
}, |
||||
|
// paint: { |
||||
|
// "circle-radius": 4, |
||||
|
// "circle-color": "#B42222" |
||||
|
// } |
||||
|
}); |
||||
|
// |
||||
|
_this.map.addLayer({ |
||||
|
id: "pointDimension-text", |
||||
|
type: "symbol", |
||||
|
source: "pointDimension", |
||||
|
layout: { |
||||
|
"text-field": "{resiNum}", // 替换为包含文字信息的属性 |
||||
|
"text-size": 15, |
||||
|
"text-offset": [0, -5], // 调整文字位置，根据需要调整 |
||||
|
// "text-background-color": "#000", // 设置文字背景色 |
||||
|
// "text-background-opacity": 0.7, // 设置文字背景透明度 |
||||
|
}, |
||||
|
paint: { |
||||
|
"text-color": "#fff", // 设置文字颜色 |
||||
|
"text-halo-width": 10, // 设置文字描边宽度，模拟背景宽度 |
||||
|
"text-halo-color": "#000", // 设置文字描边颜色，模拟背景颜色 |
||||
|
}, |
||||
|
}); |
||||
|
}) |
||||
|
_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) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.screen-center { |
||||
|
flex: 1; |
||||
|
min-width: 1000px; |
||||
|
background: url('../../assets/images/mapBg.png') no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
::v-deep .mapboxgl-ctrl { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active { |
||||
|
background-color: #0aabca; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue