一、單個加載
1、加載單個WFS服務（可重複調用）；
2、鼠標移入顯示高亮；
3、鼠標點擊展示當前點擊信息彈窗；
4、可通過 vm.pipeLayer[type].setVisible(true/false)決定是否展示改圖層；
<template>
<div id="mapDiv" v-loading="loading">
<div id="popupPipe" class="popup-box">
<div class="pipe-arrow"></div>
<div class="pipe-info">
<p>id:{{popupPipeList.Id}}</p>
<p>名稱:{{popupPipeList.Layer}}</p>
<p>編號:{{popupPipeList.id}}</p>
</div>
</div>
</div>
</template>
<script>
import 'ol/ol.css';
import Map from "ol/Map";
import View from "ol/View";
import {GeoJSON} from 'ol/format';
import {defaults} from 'ol/control.js';
import {Circle, Fill, Stroke, Style} from 'ol/style';
import {Vector} from "ol/layer";
import SourceVector from 'ol/source/Vector';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
export default {
name: 'TdMap',
components: {},
props:{},
data(){
return{
map: null,
highlight:null,//高亮
popupPipe:null,//信息彈窗
popupPipeList:{},//信息
pipeLayer:{},//管網圖層
townColor:{
'line1': {color:"rgba(0,122,34,1)",width:4 }, //線1
'line2': {color:"rgba(255,0,0,1)",width:3 }, //線2
'point': {color:"rgba(0,197,255,1)",width:5 }, //點
},
}
},
created(){
this.$nextTick(() => {
this.iniMap();
})
},
mounted(){},
methods:{
/**
* 初始化地圖
*/
iniMap() {
let vm = this;
vm.popupPipe = vm.addOverlay('popupPipe',[35,-85]);
vm.map = new Map({
layers: [],
overlays: [
vm.popupPipe
],
target: document.getElementById('mapDiv'),
controls: defaults({
zoom:false
}),
view: new View({
center: [106.9556, 37.62666],
zoom: 10,
projection: "EPSG:4326",
maxZoom: 18,
}),
});
vm.addPipe('line1');//加載WFS
vm.addPipe('line2');//加載WFS
vm.addPipe('point');//加載WFS
//高亮風格的圖層：
let featureOverlay = new Vector({
source: new SourceVector(),
style: new Style()
});
vm.map.addLayer(featureOverlay);
vm.map.on('click', function(evt) {
let pixel = vm.map.getEventPixel(evt.originalEvent);
let feature = vm.map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) {
let id = String(feature.getId()).split('.')[0];
if(
id && (
id === 'line1' ||
id === 'line2' ||
id === 'point'
)
){
vm.displayFeatureInfo(feature,evt.coordinate);
}
}else{
vm.removeMapPopup();
}
});
/*鼠標劃過地圖*/
vm.map.on('pointermove',function(e) {
let pixel = vm.map.getEventPixel(e.originalEvent);
let feature = vm.map.forEachFeatureAtPixel(pixel,function (feature) {
return feature;
});
/*管網高亮刪除*/
if(vm.highlight){
let Type = String(vm.highlight.getId()).split('.')[0];
Type &&
Type !== 'undefined' &&
vm.townColor[Type] &&
vm.setPipeStyle(vm.highlight,Type,vm.townColor[Type].color,vm.townColor[Type].width);
}
if (feature) {
vm.map.getTargetElement().style.cursor="pointer";
/*管網高亮展示*/
vm.highlight = feature;
let Type = String(feature.getId()).split('.')[0];
Type &&
Type !== 'undefined' &&
vm.townColor[Type] &&
vm.setPipeStyle(feature,Type,'rgba(178,255,137,1)',vm.townColor[Type].width);
vm.map.getTargetElement().style.cursor="pointer";
} else {//鼠標滑過地圖空白區域
vm.map.getTargetElement().style.cursor="";
}
});
},
/*添加WFS*/
addPipe(type) {
let vm = this;
let vectorSource = new SourceVector({
format: new GeoJSON(),
url: function(extent) {
return 'http://geoserver服務器地址?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=空間名稱前綴:'+type+'&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
},
strategy: bboxStrategy
});
vm.pipeLayer[type] = new Vector({
source: vectorSource,
style: function (feature) {
let id = feature.id_.split('.')[0];
vm.setPipeStyle(feature,id,vm.townColor[id].color,vm.townColor[id].width);
}
});
vm.map.addLayer(vm.pipeLayer[type]);
},
/*管網樣式*/
setPipeStyle(feature,id,color,width){
switch (id) {
case 'yanchi_fajing':
feature.setStyle(
new Style({
image: new Circle({
radius: id ? width : 5,
fill: new Fill({
color: id ? color : '#f00',
}),
stroke: new Stroke({
color: '#fff',
width: 1,
EPSG: "4326"
})
}),
})
);
break;
default:
feature.setStyle(
new Style({
stroke: new Stroke({
color: id ? color : '#f00',
width: id ? width : 1,
EPSG: "4326"
})
})
);
}
},
/****************管網點擊操作********************/
displayFeatureInfo(feature,coordinate) {
let vm = this;
if (feature) {
let keys = feature.getKeys();
let properties = feature.getProperties();
properties['id'] = feature.getId();
console.log(keys);
console.log(properties);
vm.popupPipeList = properties;
vm.popupPipe.setPosition([coordinate[0], coordinate[1]]);
vm.map.addOverlay(vm.popupPipe);
}
},
},
}
</script>
<style lang="scss" scoped>
#mapDiv{
height: 100%;
width: 100%;
.popup-box {
position: relative;
z-index: 999;
.pipe-arrow {
display: inline-block;
position: absolute;
left: -35px;
top: 53px;
&::before {
border-width: 20px 50px 8px 0;
transform: rotateZ(-30deg);
border-style: solid;
display: inline-block;
content: "";
border-color: transparent #467AE7 transparent transparent;
}
}
.pipe-info{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 15px;
line-height: 28px;
width: 368px;
min-height: 100px;
padding: 15px 27px 20px 27px;
background: #467AE7;
.inspection-ul li {
line-height: 24px;
}
}
}
}
</style>
二、多個加載
1、加載多個WFS服務（yi'j）；
2、鼠標移入顯示高亮；
3、鼠標點擊展示當前點擊信息彈窗；
<template>
<div id="mapDiv" v-loading="loading">
<div id="popupPipe" class="popup-box">
<div class="pipe-arrow"></div>
<div class="pipe-info">
<p>id:{{popupPipeList.Id}}</p>
<p>名稱:{{popupPipeList.Layer}}</p>
<p>編號:{{popupPipeList.id}}</p>
</div>
</div>
</div>
</template>
<script>
import $ from "jquery";
import 'ol/ol.css';
import Map from "ol/Map";
import View from "ol/View";
import {GeoJSON} from 'ol/format';
import {defaults} from 'ol/control.js';
import {Circle, Fill, Stroke, Style} from 'ol/style';
import {Vector} from "ol/layer";
import SourceVector from 'ol/source/Vector';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
export default {
name: 'TdMap',
components: {},
props:{},
data(){
return{
map: null,
highlight:null,//高亮
popupPipe:null,//信息彈窗
popupPipeList:{},//信息
townColor:{
'line1': {color:"rgba(0,122,34,1)",width:4 }, //線1
'line2': {color:"rgba(255,0,0,1)",width:3 }, //線2
'point': {color:"rgba(0,197,255,1)",width:5 }, //點
},
pipeLayerWfs:null,//WFS圖層
}
},
created(){
this.$nextTick(() => {
this.iniMap();
})
},
mounted(){},
methods:{
/**
* 初始化地圖
*/
iniMap() {
let vm = this;
vm.popupPipe = vm.addOverlay('popupPipe',[35,-85]);
vm.map = new Map({
layers: [],
overlays: [
vm.popupPipe
],
target: document.getElementById('mapDiv'),
controls: defaults({
zoom:false
}),
view: new View({
center: [106.9556, 37.62666],
zoom: 10,
projection: "EPSG:4326",
maxZoom: 18,
}),
});
vm.addPipe();//加載WFS
//高亮風格的圖層：
let featureOverlay = new Vector({
source: new SourceVector(),
style: new Style()
});
vm.map.addLayer(featureOverlay);
vm.map.on('click', function(evt) {
let pixel = vm.map.getEventPixel(evt.originalEvent);
let feature = vm.map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) {
let id = String(feature.getId()).split('.')[0];
if(
id && (
id === 'line1' ||
id === 'line2' ||
id === 'point'
)
){
vm.displayFeatureInfo(feature,evt.coordinate);
}
}else{
vm.removeMapPopup();
}
});
/*鼠標劃過地圖*/
vm.map.on('pointermove',function(e) {
let pixel = vm.map.getEventPixel(e.originalEvent);
let feature = vm.map.forEachFeatureAtPixel(pixel,function (feature) {
return feature;
});
/*管網高亮刪除*/
if(vm.highlight){
let Type = String(vm.highlight.getId()).split('.')[0];
Type &&
Type !== 'undefined' &&
vm.townColor[Type] &&
vm.setPipeStyle(vm.highlight,Type,vm.townColor[Type].color,vm.townColor[Type].width);
}
if (feature) {
vm.map.getTargetElement().style.cursor="pointer";
/*管網高亮展示*/
vm.highlight = feature;
let Type = String(feature.getId()).split('.')[0];
Type &&
Type !== 'undefined' &&
vm.townColor[Type] &&
vm.setPipeStyle(feature,Type,'rgba(178,255,137,1)',vm.townColor[Type].width);
vm.map.getTargetElement().style.cursor="pointer";
} else {//鼠標滑過地圖空白區域
vm.map.getTargetElement().style.cursor="";
}
});
},
/*添加WFS*/
addPipe() {
let vm = this;
let wfsParams = {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typeName :
'project:line1,' +
'project:line2,' +
'project:point',//加載多個圖層名稱
outputFormat : 'text/javascript', //重點，不要改變
format_options : 'callback:loadFeatures' //回調函數聲明
};
let pipeSource = new SourceVector({
format: new GeoJSON(),
loader: function() { //加載函數
let url = 'http://geoserver服務器地址';
$.ajax({
url: url,
data : $.param(wfsParams), //傳參
type : 'GET',
dataType: 'jsonp', //解決跨域的關鍵
jsonpCallback:'loadFeatures', //回調
});
},
strategy: bboxStrategy,
projection: 'EPSG:4326'
});
//回調函數使用
window.loadFeatures = function(response){
pipeSource.addFeatures((new GeoJSON()).readFeatures(response)); //載入要素
};
vm.pipeLayerWfs= new Vector({
source: pipeSource,
style: function (feature) {
let id = feature.id_.split('.')[0];
vm.setPipeStyle(feature,id,vm.townColor[id].color,vm.townColor[id].width);
}
});
vm.map.addLayer(vm.pipeLayerWfs);
},
/*管網樣式*/
setPipeStyle(feature,id,color,width){
if(id === 'point'){
feature.setStyle(
new Style({
image: new Circle({
radius: id ? width : 5,
fill: new Fill({
color: id ? color : '#f00',
}),
stroke: new Stroke({
color: '#fff',
width: 1,
EPSG: "4326"
})
}),
})
);
}else{
feature.setStyle(
new Style({
stroke: new Stroke({
color: id ? color : '#f00',
width: id ? width : 1,
EPSG: "4326"
})
})
);
}
},
/****************管網點擊操作********************/
displayFeatureInfo(feature,coordinate) {
let vm = this;
if (feature) {
let keys = feature.getKeys();
let properties = feature.getProperties();
properties['id'] = feature.getId();
console.log(keys);
console.log(properties);
vm.popupPipeList = properties;
vm.popupPipe.setPosition([coordinate[0], coordinate[1]]);
vm.map.addOverlay(vm.popupPipe);
}
},
},
}
</script>
<style lang="scss" scoped>
#mapDiv{
height: 100%;
width: 100%;
.popup-box {
position: relative;
z-index: 999;
.pipe-arrow {
display: inline-block;
position: absolute;
left: -35px;
top: 53px;
&::before {
border-width: 20px 50px 8px 0;
transform: rotateZ(-30deg);
border-style: solid;
display: inline-block;
content: "";
border-color: transparent #467AE7 transparent transparent;
}
}
.pipe-info{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 15px;
line-height: 28px;
width: 368px;
min-height: 100px;
padding: 15px 27px 20px 27px;
background: #467AE7;
.inspection-ul li {
line-height: 24px;
}
}
}
}
</style>