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