|
|
|
@ -1,23 +1,6 @@ |
|
|
|
<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> |
|
|
|
@ -120,58 +103,65 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import markIcon from "@/assets/position.png"; |
|
|
|
import markIcons from "@/assets/positions.png"; |
|
|
|
// import markIcon from "@/assets/position.png"; |
|
|
|
// import markIcons from "@/assets/positions.png"; |
|
|
|
import { Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup } from "@antv/l7"; |
|
|
|
import { GaodeMap, Map } from "@antv/l7-maps"; |
|
|
|
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"; |
|
|
|
import shibeiJson from './shibei.json'; |
|
|
|
const md5 = require('blueimp-md5'); |
|
|
|
|
|
|
|
let myMap; |
|
|
|
let scene; |
|
|
|
let polygonLayer; |
|
|
|
let lineLayer; |
|
|
|
let textLayer; |
|
|
|
let posLayer; |
|
|
|
let circleLayer; |
|
|
|
let dotLayer; |
|
|
|
let dotBgLayer; |
|
|
|
let dotLayer2; |
|
|
|
let searchMarker; |
|
|
|
let searchBgLayer; |
|
|
|
let numMarker; |
|
|
|
let pointMarker; |
|
|
|
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 |
|
|
|
} |
|
|
|
], |
|
|
|
// topNum: [ |
|
|
|
// { |
|
|
|
// label: "用户总数", |
|
|
|
// value: 330195 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: "党员总数", |
|
|
|
// value: 74830 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: "党群总数", |
|
|
|
// value: 9501 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: "话题总数", |
|
|
|
// value: 286508 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: "议题总数", |
|
|
|
// value: 223829 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// label: "诉求总数", |
|
|
|
// value: 215450 |
|
|
|
// } |
|
|
|
// ], |
|
|
|
buttonPiece: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
@ -185,23 +175,11 @@ export default { |
|
|
|
value: 3, |
|
|
|
label: "党支部" |
|
|
|
}, |
|
|
|
// { |
|
|
|
// value: 4, |
|
|
|
// label: "用户" |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// value: 5, |
|
|
|
// label: "党员" |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// value: 6, |
|
|
|
// label: "事件" |
|
|
|
// } |
|
|
|
|
|
|
|
], |
|
|
|
buttonIndex: 0, |
|
|
|
markerJson: null, |
|
|
|
layersIndex: 1, |
|
|
|
features: {}, |
|
|
|
showFirst: false, |
|
|
|
showMicrogridDetails: false, |
|
|
|
microgridArr: [ |
|
|
|
@ -413,20 +391,67 @@ export default { |
|
|
|
}, |
|
|
|
] |
|
|
|
}, |
|
|
|
lightStyle: { |
|
|
|
style: "amap://styles/whitesmoke", |
|
|
|
polygonColor: [ |
|
|
|
// "rgba(255, 100, 60, 0.3)", |
|
|
|
"rgba(43, 231, 253, 0.3)", |
|
|
|
// "rgba(255, 255, 50, 0.3)", |
|
|
|
], |
|
|
|
lineColor: [ |
|
|
|
// "rgba(220, 150, 120, 0.9)", |
|
|
|
"rgba(33, 201, 223, 0.8)", |
|
|
|
// "rgba(200, 200, 50, 0.9)", |
|
|
|
], |
|
|
|
circleColor: [ |
|
|
|
// "rgba(255, 180, 150, 0.99)", |
|
|
|
"rgba(13, 181, 203, 0.8)", |
|
|
|
// "rgba(255, 255, 50, 0.99)", |
|
|
|
], |
|
|
|
textColor: [ |
|
|
|
// "rgba(200, 50, 10, 0.99)", |
|
|
|
"rgba(0, 130, 153, 0.99)", |
|
|
|
// "rgba(120, 120, 0, 0.99)", |
|
|
|
], |
|
|
|
textStrokeColor: "#666", |
|
|
|
}, |
|
|
|
darkStyle: { |
|
|
|
style: "amap://styles/blue", |
|
|
|
polygonColor: [ |
|
|
|
// "rgba(255, 100, 60, 0.5)", |
|
|
|
// "rgba(43, 231, 253, 0.35)", |
|
|
|
"rgba(0, 127, 241, .3)", |
|
|
|
// "rgba(255, 255, 50, 0.35)", |
|
|
|
], |
|
|
|
lineColor: [ |
|
|
|
// "rgba(255, 180, 150, 0.9)", |
|
|
|
// "rgba(43, 231, 253, 0.7)", |
|
|
|
"rgba(0, 127, 241, .6)", |
|
|
|
// "rgba(255, 255, 50, 0.7)", |
|
|
|
], |
|
|
|
circleColor: [ |
|
|
|
// "rgba(255, 180, 150, 0.99)", |
|
|
|
// "rgba(43, 231, 253, 0.99)", |
|
|
|
"rgba(0, 127, 241, 0.99)", |
|
|
|
// "rgba(255, 255, 50, 0.99)", |
|
|
|
], |
|
|
|
textColor: [ |
|
|
|
// "rgba(255, 100, 60, 0.99)", |
|
|
|
// "rgba(43, 231, 253, 0.99)", |
|
|
|
"rgba(126, 187, 255, 1)", |
|
|
|
// "rgba(255, 255, 50, 0.99)", |
|
|
|
], |
|
|
|
textStrokeColor: "#fff", |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
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) |
|
|
|
window._AMapSecurityConfig = { |
|
|
|
securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2", |
|
|
|
}; |
|
|
|
this.$nextTick(() => { |
|
|
|
this.init() |
|
|
|
}) |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters(['shibeiAId', 'shibeiName', 'shibeiAgencyType']), |
|
|
|
@ -447,285 +472,6 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
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 (_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': 0, |
|
|
|
'fill-extrusion-opacity': 0.2 // 调整透明度值 |
|
|
|
} |
|
|
|
}); |
|
|
|
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 |
|
|
|
@ -796,8 +542,255 @@ export default { |
|
|
|
} |
|
|
|
this.makeMarkers(json) |
|
|
|
}, |
|
|
|
initialization() { |
|
|
|
if (polygonLayer) { |
|
|
|
scene.removeLayer(polygonLayer); |
|
|
|
} |
|
|
|
if (lineLayer) { |
|
|
|
scene.removeLayer(lineLayer); |
|
|
|
} |
|
|
|
if (textLayer) { |
|
|
|
scene.removeLayer(textLayer); |
|
|
|
} |
|
|
|
this.iniMapGrid(shibeiJson) |
|
|
|
}, |
|
|
|
init() { |
|
|
|
const { darkStyle, lightStyle, } = this; |
|
|
|
if (!shibeiJson) return false; |
|
|
|
|
|
|
|
let styleConfig = darkStyle; |
|
|
|
// if (this.mapStyleType == "light") { |
|
|
|
// styleConfig = lightStyle; |
|
|
|
// } |
|
|
|
const iniCenter = [116.39743841556731, 39.9088810666821]; |
|
|
|
myMap = new GaodeMap({ |
|
|
|
pitch: 47.24716321414439, |
|
|
|
mapStyle: "amap://styles/darkblue", |
|
|
|
// style: styleConfig.style, |
|
|
|
showLabel: false, |
|
|
|
center: [120.362190755209, 36.0997500271275], |
|
|
|
token: "fc14b42e0ca18387866d68ebd4f150c1", |
|
|
|
zoom: 20, |
|
|
|
isHotspot: false, |
|
|
|
showIndoorMap: false, |
|
|
|
showBuildingBlock: false, |
|
|
|
// resizeEnable: true, |
|
|
|
doubleClickZoom: false, |
|
|
|
showRoad: false, |
|
|
|
viewMode: "3D", |
|
|
|
styleJson: [ |
|
|
|
{ |
|
|
|
"featureType": "road", |
|
|
|
"elementType": "all", |
|
|
|
"stylers": { |
|
|
|
"color": "#fff" // 或者设置为与地图背景相似的颜色 |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}); |
|
|
|
scene = new Scene({ |
|
|
|
id: "map", |
|
|
|
logoVisible: false, |
|
|
|
map: myMap, |
|
|
|
}); |
|
|
|
scene.on("loaded", async () => { |
|
|
|
// this.iniMapBase(scene); |
|
|
|
this.iniMapGrid(shibeiJson); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 初始化底图 |
|
|
|
iniMapBase(scene) { |
|
|
|
// console.log("-----------------iniMapBase"); |
|
|
|
// 底图服务 |
|
|
|
const baseLayer = new RasterLayer({ |
|
|
|
zIndex: 0, |
|
|
|
}); |
|
|
|
baseLayer |
|
|
|
.source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", { |
|
|
|
parser: { |
|
|
|
type: "rasterTile", |
|
|
|
tileSize: 1, |
|
|
|
minZoom: 6, |
|
|
|
maxZoom: 15, |
|
|
|
zoomOffset: 0, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.style({ |
|
|
|
opacity: 0.7, |
|
|
|
}); |
|
|
|
|
|
|
|
// 注记服务 |
|
|
|
const annotionLayer = new RasterLayer({ |
|
|
|
zIndex: 2, |
|
|
|
}); |
|
|
|
annotionLayer |
|
|
|
.source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", { |
|
|
|
parser: { |
|
|
|
type: "rasterTile", |
|
|
|
tileSize: 1, |
|
|
|
minZoom: 6, |
|
|
|
maxZoom: 15, |
|
|
|
zoomOffset: 0, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.style({ |
|
|
|
opacity: 0.5, |
|
|
|
}); |
|
|
|
|
|
|
|
scene.addLayer(baseLayer); |
|
|
|
scene.addLayer(annotionLayer); |
|
|
|
|
|
|
|
}, |
|
|
|
iniMapGrid(data) { |
|
|
|
const { darkStyle, lightStyle, polygonData, polygonDotData, } = this; |
|
|
|
console.log(data, '初始化网格'); |
|
|
|
let styleConfig = darkStyle; |
|
|
|
if (this.mapStyleType == "light") { |
|
|
|
styleConfig = lightStyle; |
|
|
|
} |
|
|
|
// 画区域面积 |
|
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
autoFit: true, |
|
|
|
}) |
|
|
|
// .size(0) |
|
|
|
.source(data) |
|
|
|
.color("name", styleConfig.polygonColor) |
|
|
|
// .shape("extrude") |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: false, // true - false |
|
|
|
dir: "in", // in - out |
|
|
|
}, |
|
|
|
opacity: 1, |
|
|
|
heightfixed: true, |
|
|
|
pickLight: true, |
|
|
|
raisingHeight: 300, |
|
|
|
sourceColor: "#333", |
|
|
|
targetColor: "rgba(255,255,255, 0.5)", |
|
|
|
}); |
|
|
|
|
|
|
|
scene.addLayer(polygonLayer); |
|
|
|
|
|
|
|
// 画区域边 |
|
|
|
lineLayer = new LineLayer({ |
|
|
|
zIndex: 2, |
|
|
|
name: "line2", |
|
|
|
}) |
|
|
|
.source(data) |
|
|
|
.shape("line") |
|
|
|
.size(1) |
|
|
|
.color("name", styleConfig.lineColor) |
|
|
|
.style({ |
|
|
|
opacity: 1, |
|
|
|
}) |
|
|
|
.animate({ |
|
|
|
interval: 1, // 间隔 |
|
|
|
duration: 2, // 持续时间，延时 |
|
|
|
trailLength: 2, // 流线长度 |
|
|
|
}); |
|
|
|
scene.addLayer(lineLayer); |
|
|
|
|
|
|
|
// posLayer = new PointLayer({ |
|
|
|
// zIndex: 4, |
|
|
|
// name: "gridPoint", |
|
|
|
// visible: false, |
|
|
|
// }) |
|
|
|
// .source(polygonDotData) |
|
|
|
// .shape("name", [ |
|
|
|
// // "pos-red", |
|
|
|
// "pos-green", |
|
|
|
// // "pos-yellow" |
|
|
|
// ]) |
|
|
|
// .size(12) |
|
|
|
// .style({ |
|
|
|
// options: this.level === "grid" ? 1 : 0, |
|
|
|
// offsets: [0, 0], |
|
|
|
// }); |
|
|
|
// // scene.addLayer(posLayer); |
|
|
|
// /* if (this.level === 'grid') { |
|
|
|
// posLayer.show() |
|
|
|
// } else { |
|
|
|
// posLayer.hide() |
|
|
|
// }*/ |
|
|
|
textLayer = new PolygonLayer({ |
|
|
|
zIndex: 20, |
|
|
|
}) |
|
|
|
.source(data) |
|
|
|
.color("name", styleConfig.textColor) |
|
|
|
.shape("name", "text") |
|
|
|
.size(16) |
|
|
|
.style({ |
|
|
|
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left |
|
|
|
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
spacing: 2, // 字符间距 |
|
|
|
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
|
|
|
stroke: styleConfig.textStrokeColor, // 描边颜色 |
|
|
|
strokeWidth: 0.1, // 描边宽度 |
|
|
|
strokeOpacity: 0.8, |
|
|
|
textAllowOverlap: true, |
|
|
|
}) |
|
|
|
.active(true); |
|
|
|
scene.addLayer(textLayer); |
|
|
|
let popup; |
|
|
|
// polygonLayer.on("mousemove", (e) => { |
|
|
|
// if (this.level === "grid") { |
|
|
|
// return; |
|
|
|
// } |
|
|
|
// popup = new Popup({ |
|
|
|
// offsets: [60, 60], |
|
|
|
// closeButton: false, |
|
|
|
// maxWidth: 400, |
|
|
|
// }).setLnglat(e.lngLat).setHTML(` |
|
|
|
// <div class="jw-popup-container"> |
|
|
|
// <div class="jw-popup-bg"></div> |
|
|
|
// <div class="jw-popup-con"> |
|
|
|
// <div class="jw-popup-title"> |
|
|
|
// ${e.feature.properties.name} |
|
|
|
// </div> |
|
|
|
// <div class="jw-popup-des"> |
|
|
|
// ${e.feature.properties.description ? e.feature.properties.description : ""} |
|
|
|
// </div> |
|
|
|
// </div> |
|
|
|
// </div> |
|
|
|
// `); |
|
|
|
// scene.addPopup(popup); |
|
|
|
// }); |
|
|
|
|
|
|
|
// polygonLayer.on("mouseout", (e) => { |
|
|
|
// // 如果popup初始化没成功报错导致地图初始化失败 |
|
|
|
// if (popup) { |
|
|
|
// popup.remove(); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
polygonLayer.on("click", (e) => { |
|
|
|
console.log(e); |
|
|
|
if (e.feature.properties.name.indexOf("网格") != -1) { |
|
|
|
return |
|
|
|
} |
|
|
|
if (polygonLayer) { |
|
|
|
scene.removeLayer(polygonLayer); |
|
|
|
} |
|
|
|
if (lineLayer) { |
|
|
|
scene.removeLayer(lineLayer); |
|
|
|
} |
|
|
|
if (textLayer) { |
|
|
|
scene.removeLayer(textLayer); |
|
|
|
} |
|
|
|
this.getBoundary(e.feature.properties.adcode || e.feature.properties.subId) |
|
|
|
}); |
|
|
|
// posLayer.on("click", (e) => { |
|
|
|
// console.log(e); |
|
|
|
// }); |
|
|
|
}, |
|
|
|
getBoundary(id) { |
|
|
|
const ts = Date.now(); |
|
|
|
const { darkStyle, lightStyle, polygonData, polygonDotData, } = this; |
|
|
|
console.log(shibeiJson, '初始化网格'); |
|
|
|
let styleConfig = darkStyle; |
|
|
|
if (this.mapStyleType == "light") { |
|
|
|
styleConfig = lightStyle; |
|
|
|
} |
|
|
|
let signConfig = { |
|
|
|
key: '612d304095c50369c3ef06e490f05779eeb8f19ff16566c73aeafafc5fa01970', |
|
|
|
dataType: 'real', |
|
|
|
@ -820,147 +813,42 @@ export default { |
|
|
|
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 |
|
|
|
} |
|
|
|
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.iniMapGrid(obj) |
|
|
|
}).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 |
|
|
|
}); |
|
|
|
// 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) |
|
|
|
|
|
|
|
_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> |
|
|
|
|
