index.html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
</head>
the-map.vue
<!-- 參考：
https://openlayers.org/en/latest/examples/
https://blog.csdn.net/sinat_25295611/article/details/79110368
-->
<style lang="scss" scoped>
.map {
width: 100%;
height: 100%;
border: 1px solid #ddd;
background-color: #fff;
}
</style>
<template>
<div id="map" class="map" ref="map"></div>
</template>
<script>
var ol = window.ol || {}
export default {
data() {
return {
map: null
}
},
mounted() {
this.$nextTick(() => {
this.init()
this.addMapLayer()
var layer1 = this.addAreaLineLayer()
// this.onPointerMove(layer1)
this.onClick(layer1)
})
},
methods: {
// 初始化
init() {
this.map = new ol.Map({
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [116.644827652, 40.1377365557],
zoom: 16
})
})
},
// 添加底圖
addMapLayer() {
var mapLayer = new ol.layer.Tile({
name: '1001',
source: new ol.source.TileWMS({
url: 'http://39.106.200.117:8080/geoserver/shunyi-test/wms',
params: {
'LAYERS': 'shunyi-test:shunyi-test-tiff', 'FORMAT': 'image/png',
'VERSION': '1.1.1', tiled: true
},
serverType: 'geoserver',
transition: 0,
})
})
this.map.addLayer(mapLayer)
return mapLayer
},
// 添加區域線框
addAreaLineLayer() {
var url = 'http://39.106.200.117:8080/geoserver/shunyi-test/wms?service=WMS&version=1.1.0&request=GetMap&layers=shunyi-test%3Ashunyi-test-shp&bbox=116.63998383763435%2C40.13642710324594%2C116.64542819483796%2C40.13874844541815&width=768&height=330&srs=EPSG%3A4326&styles=&format=geojson'
var areaLineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url,
format: new ol.format.GeoJSON()
}),
style: (feature) => {
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0)'
}),
stroke: new ol.style.Stroke({
color: '#f58220',
width: 3
}),
text: new ol.style.Text({
font: '12px 微軟雅黑,sans-serif',
fill: new ol.style.Fill({
color: '#f58220'
}),
placement: 'point',
// backgroundStroke: new ol.style.Stroke({
// color: '#4D98DD',
// width: 1
// }),
// backgroundFill: new ol.style.Fill({
// color: '#4D98DD'
// })
})
})
if (feature.get('屬地')) {
style.getText().setText(feature.get('屬地'));
}
return style
}
})
this.map.addLayer(areaLineLayer)
return areaLineLayer
},
// 高亮樣式
getHighlightStyle() {
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff1824',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0)'
}),
text: new ol.style.Text({
font: '12px 微軟雅黑,sans-serif',
fill: new ol.style.Fill({
color: '#ff1824'
}),
placement: 'point',
// backgroundStroke: new ol.style.Stroke({
// color: '#feff2a',
// width: 1
// }),
// backgroundFill: new ol.style.Fill({
// color: '#feff2a'
// }),
})
})
},
// 鼠標移上去高亮
onPointerMove(...layers) {
var highlightStyle = this.getHighlightStyle()
var pointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
style: (feature) => {
if (feature.get('屬地')) {
highlightStyle.getText().setText(feature.get('屬地'));
}
return [highlightStyle];
},
layers
});
this.map.addInteraction(pointerMove)
},
// 鼠標點擊
onClick(...layers) {
var highlightStyle = this.getHighlightStyle()
var pointerMove = new ol.interaction.Select({
condition: ol.events.condition.click,
style: (feature) => {
var property = {
id: feature.get('Id'),
'具體位置': feature.get('具體位置'),
'屬地': feature.get('屬地'),
'揚塵狀態': feature.get('揚塵狀態'),
'緯度': feature.get('緯度'),
'經度': feature.get('經度'),
'裸地變化': feature.get('裸地變化'),
'裸地類型': feature.get('裸地類型'),
'覆蓋比例': feature.get('覆蓋比例'),
'覆蓋類型': feature.get('覆蓋類型'),
'面積_平米': feature.get('面積_平米'),
}
this.$emit('property', property)
console.log(JSON.stringify(feature))
if (feature.get('屬地')) {
highlightStyle.getText().setText(feature.get('屬地'));
}
return [highlightStyle];
},
layers
});
this.map.addInteraction(pointerMove)
}
}
}
</script>
index.vue
<style lang="scss" scoped></style>
<template>
<div>
<the-map style="height:400px" @property="onProperty"></the-map>
<div>
{{property}}
</div>
</div>
</template>
<script>
import TheMap from "@/components/the-map"
export default {
components: { TheMap },
data() {
return {
property: {}
}
},
methods: {
onProperty(val) {
this.property = val
}
}
}
</script>
效果
![]()
