关于实现openLayer中自定义弹窗 |
您所在的位置：网站首页 › 鼠标移动事件改变元素颜色 › 关于实现openLayer中自定义弹窗 |
|
实现流程
-创建监控图层 + 将创建的监控图层添加到地图中
const viewSource = new ol.source.Vector({});
const viewLayer = new ol.layer.Vector({
source:viewSource
});
map.addLayer(viewLayer);
-创建popup的DOM元素
{{ monitoringContentViews }}
位置：
{{
monitoringContentAddress
}}
-抓取DOM元素
var container = document.getElementById("popup");
var content = document.getElementById("popup-content");
var closer = document.getElementById("popup-closer");
-创建overLay
overLay 概念：让HTML元素显示在地图上的某个位置；他和控件很像，都能在地图上添加可见元素，不同的是，其不是根据屏幕位置固定的，而是地理坐标相互关联； 换句话说，当我们在进行平移、缩放等地图操作时间，Overlay也将会跟着移动。 const popup = new ol.Overlay({ element:container //要添加到的覆盖物元素 autoPan:true //当前窗口可见 positioning:"bottom-center" //在地图所在的坐标系下，Overlay放置的位置 stopEvent:true //是否应该停止事件传播到地图窗口 autoPanAnimation:{ //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度 duration: 250, } }) map.addOverlay(popup)-当鼠标移动到对应要素上时，修改鼠标状态（cv） $map.on("pointermove", function (e) { // 当鼠标在地图上移动时触发的事件 var pixel = $map.getEventPixel(e.originalEvent); // 获取鼠标事件发生时的像素坐标 var hit = $map.hasFeatureAtPixel(pixel); // 检测是否有图像特征在指定像素位置上 $map.getTargetElement().style.cursor = hit ? "pointer" : ""; // 根据是否有特征在指定位置上设置鼠标样式 });-添加关闭按钮单击事件（隐藏popup cv） //添加关闭按钮的单击事件（隐藏popup） closer.onclick = function () { //未定义popup位置 popup.setPosition(undefined); //失去焦点 closer.blur(); return false; }; // map.on("click",(evt) => { const feature = $map.forEachFeatureAtPixel( // evt.pixel, function (feature, viewLayer){ return feature; } ); if (feature) { if (popup.getPosition() == undefined){ var position = feature.getGeometry().flatCoordinates; monitoringContentAddress.value = feature.values_.values_.位置; monitoringContentViews.value = feature.values_.values_.编号; popup.setPosition(position); } } }) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |