|
|
|
@ -3,8 +3,15 @@ |
|
|
|
<div class="div_map" |
|
|
|
id="map" |
|
|
|
ref="map"> |
|
|
|
<!-- <div id="map" |
|
|
|
class="map"></div> --> |
|
|
|
</div> |
|
|
|
<div id="popup" |
|
|
|
style="display: none;" |
|
|
|
class="ol-popup"> |
|
|
|
<a href="#" |
|
|
|
id="popup-closer" |
|
|
|
class="ol-popup-closer"></a> |
|
|
|
<div id="popup-content" |
|
|
|
class="popup-content"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -28,6 +35,7 @@ import { getDistance } from 'ol/sphere'; |
|
|
|
|
|
|
|
import { mapGetters } from "vuex"; |
|
|
|
import { Loading } from 'element-ui'; //引入Loading服务 |
|
|
|
|
|
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
|
|
|
|
|
|
|
|
@ -81,7 +89,8 @@ const vueGis = { |
|
|
|
centerPoint: [],//中心点位置 |
|
|
|
zoom: 14,//缩放范围：区14 |
|
|
|
minZoom: 1,//最小缩放 |
|
|
|
|
|
|
|
overlay: null, |
|
|
|
showPopup: false, |
|
|
|
mapInfo: { |
|
|
|
|
|
|
|
}, |
|
|
|
@ -172,6 +181,13 @@ const vueGis = { |
|
|
|
this.loadIcon() |
|
|
|
} |
|
|
|
|
|
|
|
if (this.isAddOpenlay) { |
|
|
|
//初始化icon图层 |
|
|
|
this.addOverlay() |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.addMapClick() |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
@ -365,8 +381,6 @@ const vueGis = { |
|
|
|
return (distance < max || distance === max) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// debugger |
|
|
|
// return |
|
|
|
// var wgs84Sphere = new ol.Sphere(6378137); |
|
|
|
@ -405,21 +419,8 @@ const vueGis = { |
|
|
|
//目标加载到map中 |
|
|
|
}) |
|
|
|
|
|
|
|
let that = this |
|
|
|
map.on('singleclick', function (e) { |
|
|
|
const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) { |
|
|
|
return feature; |
|
|
|
}); |
|
|
|
if (feature) { |
|
|
|
console.log(feature) |
|
|
|
that.$emit('clickFeature', feature) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
//去除双击放大效果 |
|
|
|
const dblClickInteraction = map |
|
|
|
.getInteractions() |
|
|
|
@ -454,7 +455,6 @@ const vueGis = { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//初始化多边形标注图层 |
|
|
|
initPolygonLayer () { |
|
|
|
polygonSource = new VectorSource({ |
|
|
|
@ -542,6 +542,83 @@ const vueGis = { |
|
|
|
// }); |
|
|
|
}, |
|
|
|
|
|
|
|
//添加覆盖层 |
|
|
|
addOverlay () { |
|
|
|
// 使用变量存储弹窗所需的 DOM 对象 |
|
|
|
var container = document.getElementById("popup"); |
|
|
|
var closer = document.getElementById("popup-closer"); |
|
|
|
var content = document.getElementById("popup-content"); |
|
|
|
|
|
|
|
// 创建一个弹窗 Overlay 对象 |
|
|
|
this.overlay = new Overlay({ |
|
|
|
element: container, //绑定 Overlay 对象和 DOM 对象的 |
|
|
|
autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果 |
|
|
|
autoPanAnimation: { |
|
|
|
duration: 250 //自动平移效果的动画时间 9毫秒 |
|
|
|
}, |
|
|
|
zIndex: 100 |
|
|
|
}); |
|
|
|
// 将弹窗添加到 map 地图中 |
|
|
|
map.addOverlay(this.overlay); |
|
|
|
let _that = this; |
|
|
|
|
|
|
|
/** |
|
|
|
* 为弹窗添加一个响应关闭的函数 |
|
|
|
*/ |
|
|
|
closer.onclick = function () { |
|
|
|
_that.overlay.setPosition(undefined); |
|
|
|
closer.blur(); |
|
|
|
return false; |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
//注册地图点击事件 |
|
|
|
addMapClick () { |
|
|
|
let _that = this |
|
|
|
|
|
|
|
|
|
|
|
map.on("click", function (evt) { |
|
|
|
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { |
|
|
|
return feature; |
|
|
|
}); |
|
|
|
if (feature) { |
|
|
|
console.log(feature) |
|
|
|
if (_that.clickType === 'back') { |
|
|
|
|
|
|
|
_that.$emit('clickFeature', feature) |
|
|
|
|
|
|
|
|
|
|
|
} else if (_that.clickType === 'popup') { |
|
|
|
_that.$emit('clickFeature', feature) |
|
|
|
// _that.overlay.getElement().parentNode.style.display = 'block' |
|
|
|
// _that.overlay.getElement().parentNode.parentNode.style.display = 'block' |
|
|
|
|
|
|
|
// content.innerHTML = ` |
|
|
|
// <p>你点击了这里：</p> |
|
|
|
// <p>经纬度：<p><code> </code> <p> |
|
|
|
// <p>坐标：</p>X： Y: `; |
|
|
|
// _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标 |
|
|
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
console.log('此处没有标注') |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
handleShowPopup (showData, coordinate) { |
|
|
|
console.log(this.overlay.getElement()) |
|
|
|
this.overlay.getElement().style.display = 'block' |
|
|
|
this.overlay.getElement().parentNode.style.display = 'block' |
|
|
|
this.overlay.getElement().parentNode.parentNode.style.display = 'block' |
|
|
|
var content = document.getElementById("popup-content"); |
|
|
|
|
|
|
|
content.innerHTML = showData; |
|
|
|
this.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标 |
|
|
|
}, |
|
|
|
|
|
|
|
//取随机数 |
|
|
|
getRndBetween (lowerLimit, upperLimit) { |
|
|
|
@ -582,6 +659,17 @@ const vueGis = { |
|
|
|
showIconLayer: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
//是否添加弹出框图层 |
|
|
|
isAddOpenlay: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
|
|
|
|
//点击地图事件类型,back:返回，popup:弹出层 |
|
|
|
clickType: { |
|
|
|
type: String, |
|
|
|
default: 'back' |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
@ -623,4 +711,51 @@ export default vueGis; |
|
|
|
.ol-overlaycontainer-stopevent { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.ol-popup { |
|
|
|
position: absolute; |
|
|
|
background-color: #1257c9; |
|
|
|
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); |
|
|
|
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); |
|
|
|
padding: 15px; |
|
|
|
border-radius: 10px; |
|
|
|
border: 1px solid #1257c9; |
|
|
|
bottom: 12px; |
|
|
|
left: -50px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.ol-popup:after, |
|
|
|
.ol-popup:before { |
|
|
|
top: 100%; |
|
|
|
border: solid transparent; |
|
|
|
content: " "; |
|
|
|
height: 0; |
|
|
|
width: 0; |
|
|
|
position: absolute; |
|
|
|
pointer-events: none; |
|
|
|
} |
|
|
|
.ol-popup:after { |
|
|
|
border-top-color: 1257c9; |
|
|
|
border-width: 10px; |
|
|
|
left: 48px; |
|
|
|
margin-left: -10px; |
|
|
|
} |
|
|
|
.ol-popup:before { |
|
|
|
border-top-color: #1257c9; |
|
|
|
border-width: 11px; |
|
|
|
left: 48px; |
|
|
|
margin-left: -11px; |
|
|
|
} |
|
|
|
.ol-popup-closer { |
|
|
|
text-decoration: none; |
|
|
|
position: absolute; |
|
|
|
top: 2px; |
|
|
|
right: 8px; |
|
|
|
} |
|
|
|
.popup-content { |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|
.ol-popup-closer:after { |
|
|
|
content: "✖"; |
|
|
|
color: rgba(1, 17, 104, 1); |
|
|
|
} |
|
|
|
</style> |
dai
4 years ago