gis模块
This commit is contained in:
xc
@@ -2,69 +2,123 @@
|
||||
<div class="ele-body">
|
||||
<a-card class="ele-card" :bordered="false">
|
||||
<a-space>
|
||||
<a-select @change="whereChange" v-model:value="where.monitorYear">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">{{
|
||||
item.label
|
||||
}}</a-select-option>
|
||||
|
||||
<a-auto-complete :filterOption="true" :backfill="false" @select="autoInput" :dataSource="dataSource"
|
||||
placeholder="请输入需要搜索的点位">
|
||||
</a-auto-complete>
|
||||
|
||||
<a-select @change="whereChange" name="year" v-model:value="where.monitorYear">
|
||||
<a-select-option v-for="item in yearOptions" :key="item.value">
|
||||
{{
|
||||
item.label
|
||||
}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.regionLevel">
|
||||
<a-radio-button value="市级"> 市级 </a-radio-button>
|
||||
<a-radio-button value="县级"> 县级 </a-radio-button>
|
||||
<a-radio-group @change="whereChange" name="area" v-model:value="where.regionLevel">
|
||||
<a-radio-button value="市级"> 市级</a-radio-button>
|
||||
<a-radio-button value="县级"> 县级</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-radio-group @change="whereChange" v-model:value="where.timeSlot">
|
||||
<a-radio-group @change="whereChange" name="day" v-model:value="where.timeSlot">
|
||||
<a-radio-button value="昼">昼</a-radio-button>
|
||||
<a-radio-button value="夜">夜</a-radio-button>
|
||||
</a-radio-group>
|
||||
<!-- <a-button @click="exportMap">导出</a-button> -->
|
||||
</a-space>
|
||||
</a-card>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="map" ref="map" style="overflow: hidden"></div>
|
||||
<tip-tool :flag="tipFlag" :x="currentX" :y="currentY" :data="tipData"></tip-tool>
|
||||
<mapNominal :param="nominalList"></mapNominal>
|
||||
<!-- <map-table-center :rowData="pointData"></map-table-center>-->
|
||||
<map-table :rowData="pointData"></map-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import axios from "axios";
|
||||
import { Scene, PointLayer, Popup } from "@antv/l7";
|
||||
// import { DrawControl } from '@antv/l7-draw';
|
||||
import { GaodeMap } from "@antv/l7-maps";
|
||||
import {
|
||||
getGisBase,
|
||||
getColumnOptions,
|
||||
getColumnOptions
|
||||
} from "@/api/ecology/noise/road-sound";
|
||||
import tipTool from "@/views/components/tipTool";
|
||||
import mapNominal from "@/views/components/mapNominal";
|
||||
import mapTable from "@/views/components/mapTable";
|
||||
// import mapTableCenter from "@/views/components/mapTableCenter";
|
||||
|
||||
let scene = null;
|
||||
let pointLayer = null;
|
||||
let cityLayer = null;
|
||||
var that
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tipTool,
|
||||
mapNominal,
|
||||
mapTable,
|
||||
// mapTableCenter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
yearOptions: [],
|
||||
yearOptions: [2020, 2021],
|
||||
arriveCoor: [108.33, 22.84],//坐标点
|
||||
where: {
|
||||
timeSlot: "昼",
|
||||
regionLevel: "市级",
|
||||
monitorYear: "选择年份",
|
||||
monitorYear: "2021",
|
||||
},
|
||||
map: {},
|
||||
pointData: [],
|
||||
currentY: 0,
|
||||
currentX: 30000,
|
||||
tipFlag: false,
|
||||
tipData: [],
|
||||
zoom: 13,
|
||||
nominalList: [
|
||||
{"text": "一级", "color": "#09952b", "data": "≤ 68.0", "min": "0", "max": "68.8", "common": "好"},
|
||||
{"text": "二级", "color": "#669c08", "data": "68.1~70.0", "min": "68.1", "max": "70.0", "common": "较好"},
|
||||
{"text": "三级", "color": "#9c9a07", "data": "70.0~72.0", "min": "70.0", "max": "72.0", "common": "一般"},
|
||||
{"text": "四级", "color": "#935507", "data": "72.1~74.0", "min": "72.1", "max": "74.0", "common": "较差"},
|
||||
{"text": "五级", "color": "#900000", "data": ">74", "min": "74.1", "max": "1000", "common": "差"}
|
||||
],
|
||||
points: [],//数据准备
|
||||
dataSource: [],
|
||||
value: '',
|
||||
result: [],
|
||||
searchKey: "",
|
||||
searchId: -1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
scene = new Scene({
|
||||
id: "map",
|
||||
map: new GaodeMap({
|
||||
style: "light",
|
||||
center: [108.33, 22.84],
|
||||
// pitch: 48.62562,
|
||||
// rotation: -0.76,
|
||||
zoom: 12,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on("loaded", () => {
|
||||
this.initData();
|
||||
});
|
||||
|
||||
// const control = new DrawControl(scene, {
|
||||
// });
|
||||
that = this
|
||||
this.newInitMap();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
autoInput(e) {
|
||||
that.dataSource.forEach((item, index) => {
|
||||
if (item == e) {
|
||||
if (that.searchId > 0) {
|
||||
document.getElementById("id" + that.searchId).className = ""
|
||||
}
|
||||
that.searchId = index
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.pointData[that.searchId]['lng'], that.pointData[that.searchId]['lat']), that.zoom); // 初始化地图,设置中心点坐标和地图级别
|
||||
document.getElementById("id" + that.searchId).className += "animation_check"
|
||||
}
|
||||
})
|
||||
},
|
||||
newInitMap() {
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map = new BMap.Map(this.$refs.map); // 创建Map实例
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(that.arriveCoor[0], that.arriveCoor[1]), that.zoom); // 初始化地图,设置中心点坐标和地图级别
|
||||
that.map.addControl(
|
||||
// eslint-disable-next-line no-undef
|
||||
new BMap.MapTypeControl({
|
||||
// eslint-disable-next-line no-undef
|
||||
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
|
||||
})
|
||||
)
|
||||
that.map.enableDragging();
|
||||
that.map.enableScrollWheelZoom();
|
||||
that.map.enableDoubleClickZoom();
|
||||
that.map.enableKeyboard();
|
||||
|
||||
getColumnOptions("monitor_year").then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
@@ -76,75 +130,151 @@ export default {
|
||||
this.where.monitorYear = res.data.data[res.data.data.length - 1];
|
||||
this.whereChange();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
setPlaceData() {},
|
||||
whereChange() {
|
||||
addMarker: function () { // 创建图标对象
|
||||
//1、定义构造函数并继承Overlay
|
||||
//定义自定义覆盖物的构造函数
|
||||
function ComplexCustomOverlay(point, index, color) {
|
||||
this._point = point
|
||||
this._index = index
|
||||
this._color = color
|
||||
}
|
||||
|
||||
if(scene && pointLayer){
|
||||
scene.removeLayer(pointLayer)
|
||||
}
|
||||
getGisBase(this.where).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
if(cityLayer){
|
||||
cityLayer.destroy()
|
||||
scene.removeLayer(cityLayer)
|
||||
}
|
||||
pointLayer = new PointLayer({})
|
||||
.source(res.data.data, {
|
||||
parser: {
|
||||
type: "json",
|
||||
x: "lng",
|
||||
y: "lat",
|
||||
},
|
||||
})
|
||||
.shape('hexagon').size(10)
|
||||
// .size("leq", acid (level) {
|
||||
// return [4, 4, level];
|
||||
// })
|
||||
.active(true)
|
||||
.color("leq", (leq) => {
|
||||
const { timeSlot } = this.where;
|
||||
const color =
|
||||
timeSlot == "昼"
|
||||
? leq > 70
|
||||
? "#f5222d"
|
||||
: "#13c2c2"
|
||||
: leq > 65
|
||||
? "#f5222d"
|
||||
: "#13c2c2";
|
||||
return color;
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
pointLayer.on("mousemove", (e) => {
|
||||
const popup = new Popup({
|
||||
offsets: [0, 0],
|
||||
closeButton: false,
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(
|
||||
`<p>点位名称: ${e.feature.place}</p><p>点位等级: ${e.feature.regionLevel}</p><p>所属城区: ${e.feature.area}</p><p>所属路段: ${e.feature.road}</p><p>噪声: ${e.feature.leq}dB(A)</p>`
|
||||
);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.setData(res.data.data);
|
||||
scene.addLayer(pointLayer);
|
||||
scene.setZoomAndCenter(12, [108.33, 22.84]);
|
||||
// scene.setPitch(48);
|
||||
scene.render()
|
||||
// eslint-disable-next-line no-undef
|
||||
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
||||
|
||||
ComplexCustomOverlay.prototype.initialize = function (map) {
|
||||
this._map = map;
|
||||
var div = this._div = document.createElement("div");
|
||||
div.style.position = "absolute";
|
||||
div.style.float = "left"
|
||||
div.style.cursor = "pointer"
|
||||
// eslint-disable-next-line no-undef
|
||||
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
|
||||
div.style.height = "20px";
|
||||
div.style.width = "10px";
|
||||
|
||||
var arrow = this._arrow = document.createElement("div");
|
||||
arrow.style.width = "0px";
|
||||
arrow.style.height = "0px";
|
||||
arrow.style.borderLeftWidth = "10px"
|
||||
arrow.style.borderLeftColor = "transparent"
|
||||
arrow.style.borderStyle = "solid"
|
||||
arrow.style.borderRightWidth = "10px"
|
||||
arrow.style.borderRightColor = "transparent"
|
||||
arrow.style.borderBottomWidth = "20px"
|
||||
arrow.style.borderTopWidth = "0"
|
||||
arrow.style.position = "absolute"
|
||||
arrow.style.borderBottomColor = `${this._color}`
|
||||
arrow.setAttribute("id", "id" + this._index)
|
||||
arrow.style.top = "22px";
|
||||
arrow.style.left = "10px";
|
||||
div.appendChild(arrow);
|
||||
that.map.getPanes().labelPane.appendChild(div);
|
||||
return div;
|
||||
}
|
||||
ComplexCustomOverlay.prototype.draw = function () {
|
||||
var map = this._map;
|
||||
var pixel = map.pointToOverlayPixel(this._point);
|
||||
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
|
||||
this._div.style.top = pixel.y - 30 + "px";
|
||||
}
|
||||
ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
|
||||
this._arrow['on' + event] = fun;
|
||||
}
|
||||
that.pointData.forEach(async (item, index) => {
|
||||
let color = ""
|
||||
that.nominalList.forEach((it, ins) => {
|
||||
if (item.leq >= it.min && item.leq <= it.max) {
|
||||
color = that.nominalList[ins]['color']
|
||||
return false
|
||||
}
|
||||
});
|
||||
})
|
||||
// eslint-disable-next-line no-undef
|
||||
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.lng, item.lat), index, color);
|
||||
that.map.addOverlay(myCompOverlay);//将标注添加到地图中
|
||||
myCompOverlay.addEventListener('mouseover', function (e) {
|
||||
let currentId = e.target.getAttribute("id")
|
||||
|
||||
setTimeout(() => {
|
||||
}, 300)
|
||||
let bodyInfo = document.getElementsByTagName("body")[0]
|
||||
let screenWidth = bodyInfo.offsetWidth
|
||||
// let screenHeight = bodyInfo.offsetHeight
|
||||
|
||||
let mapInfo = document.getElementById("map")
|
||||
let mapWidth = mapInfo.offsetWidth; // 返回元素的总宽度
|
||||
// let mapHeight = mapInfo.offsetHeight; // 返回元素的总高度
|
||||
|
||||
let calcWidth = screenWidth - mapWidth
|
||||
// let calcHeight = screenHeight - mapHeight
|
||||
that.tipFlag = true
|
||||
that.tipData = that.pointData[currentId.substring(2, currentId.length)]
|
||||
that.currentX = e.pageX - calcWidth
|
||||
that.currentY = e.pageY - 80
|
||||
})
|
||||
|
||||
myCompOverlay.addEventListener('mouseout', function () {
|
||||
setTimeout(() => {
|
||||
}, 300)
|
||||
that.currentX = 30000
|
||||
that.currentY = 0
|
||||
that.tipFlag = false
|
||||
})
|
||||
})
|
||||
},
|
||||
getAreaData() {},
|
||||
exportMap(){
|
||||
console.log("exportMap");
|
||||
scene.exportMap("png");
|
||||
whereChange(e) {
|
||||
if (typeof (e) == "object") {
|
||||
if (e.target.name == "area") {
|
||||
that.where.regionLevel = e.target.value
|
||||
if (that.where.regionLevel == "县级") {
|
||||
that.zoom = 8
|
||||
} else {
|
||||
that.zoom = 13
|
||||
}
|
||||
}
|
||||
if (e.target.name == "day") {
|
||||
that.where.timeSlot = e.target.value
|
||||
}
|
||||
} else {
|
||||
if (e > 0) {
|
||||
that.where.monitorYear = e
|
||||
}
|
||||
}
|
||||
|
||||
that.map.clearOverlays();
|
||||
// eslint-disable-next-line no-undef
|
||||
that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
|
||||
// GIS
|
||||
// that.getGisCountList()
|
||||
if (scene && pointLayer) {
|
||||
scene.removeLayer(pointLayer)
|
||||
}
|
||||
getGisBase(this.where).then((res) => {
|
||||
that.pointData = []
|
||||
that.dataSource = []
|
||||
if (res.data.code == 0 && res.data.data.length > 0) {
|
||||
that.pointData = res.data.data
|
||||
|
||||
that.pointData.forEach(item => {
|
||||
that.dataSource.push(`${item.place}`)
|
||||
})
|
||||
|
||||
that.addMarker()
|
||||
}
|
||||
})
|
||||
},
|
||||
getColor: function (laq) {
|
||||
that.nominalList.forEach((item, index) => {
|
||||
if (laq >= item.min && laq < item.max) {
|
||||
console.log(that.nominalList[index]['color'])
|
||||
return that.nominalList[index]['color']
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::-webkit-scrollbar {
|
||||
@@ -155,21 +285,126 @@ html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ele-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 16px 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ele-card {
|
||||
z-index: 10;
|
||||
margin: 0 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
.anchorBL {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep .amap-logo {
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::v-deep .amap-copyright {
|
||||
right: 70px !important;
|
||||
left: auto !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .amap-info-content {
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .bottom-center .amap-info-sharp {
|
||||
border-top-color: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
::v-deep .amap-info-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep #map-mark {
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 20px solid rgba(0, 0, 255, 0.6);
|
||||
}
|
||||
|
||||
.radar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.radar .ripple {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid red;
|
||||
animation: ripple 2s linear infinite;
|
||||
}
|
||||
|
||||
.radar :nth-child(1) {
|
||||
animation-delay: 0.666s;
|
||||
}
|
||||
|
||||
.radar :nth-child(2) {
|
||||
animation-delay: 1.322s;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
to {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.radar-box {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.animation_check {
|
||||
animation: myfirst 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes myfirst {
|
||||
0% {
|
||||
top: 0px
|
||||
}
|
||||
25% {
|
||||
top: 5px;
|
||||
}
|
||||
50% {
|
||||
top: 0px;
|
||||
}
|
||||
75% {
|
||||
top: -5px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user