首页 / 浏览问题 / 云GIS / 问题详情
openlayers在地图标注点击事件有偏移
1EXP 2019年06月13日

var features = [];

for (var i = 0; i < list.length; i++) {

if (list[i].longitude != null && list[i].latitude != null) {

var coord = [list[i].longitude, list[i].latitude];

//创建图标特性

var iconFeature = new mapconfig.ol.Feature({

geometry: new mapconfig.ol.geom.Point(coord, "XY"),

name: list[i].companyName,

guid: list[i].guid

});

//创建图标样式

var iconStyle = new mapconfig.ol.style.Style({

image: new mapconfig.ol.style.Icon({

// opacity: 0.75,

src: blueImg,

// anchor: [0.5, 46],

anchorXUnits: "fraction",

anchorYUnits: "pixels",

opacity: 1

})

});

iconFeature.setStyle(iconStyle);

features.push(iconFeature);

}

}

var vectorSource = new mapconfig.ol.source.Vector({

features: features

});

//创建矢量层

this_.gisGlobal.superLayer = new mapconfig.ol.layer.Vector({

source: vectorSource

});

//添加进map层

this_.gisGlobal.map.addLayer(this_.gisGlobal.superLayer);

this_.gisGlobal.map.on("click", function(e) {

var feature = this_.gisGlobal.map.forEachFeatureAtPixel(

e.pixel,

function(feature) {

return feature;

}

);

if (feature) {

this_.companyTitle = feature.N.name;

this_.qyGuid = feature.N.guid;

this_.noPoint = false;

this_.gisVisible = true;

}

});

/**

* 为map添加鼠标移动事件监听,当指向标注时改变鼠标光标状态

*/

this_.gisGlobal.map.on("pointermove", function(e) {

if (e.dragging) return;

var pixel = this_.gisGlobal.map.getEventPixel(e.originalEvent);

var hit = this_.gisGlobal.map.hasFeatureAtPixel(pixel);

this_.gisGlobal.map.getTargetElement().style.cursor = hit

? "pointer"

: ""; 上边代码执行后是图片效果,正常点击事件应该在图标上,现在是在图标的右侧,底图是iserver发布的地图

});

问题关闭原因: 页面加载左中右,中间页面加载把地图挤偏了,虽然事先限制了左边和中间位置的宽度

2 个回答

这个应该是图片的锚点的位置导致的偏移,可以参考Openlayers·原生api中https://openlayers.org/en/latest/apidoc/module-ol_style_Icon.html,修改他的anchor相关的属性,我们官网范例中http://iclient.supermap.io/examples/openlayers/editor.html#04_bufferAnalystService_geometry的158行也有设置,可以参考尝试一下

5,668EXP 2019年06月14日

您好,我设置了偏移,但只是图标在地图上的位置发生了偏移,感觉就像图片没有加载到事件触发的范围内一样,事件的触发范围还是跟着图标发生偏移。

可以直接利用ol.interaction.Select 交互控件来绑定你的矢量图层,然后为交互控件注册一个select事件,它的回调函数参数evgs 可以得到你点击位置的xy坐标,然后可以利用overlay对象来设置当你点击是所弹出的弹窗
3,352EXP 2019年07月01日
找到偏移原因了,是因为vue加载页面先后的问题
你好,请问您是怎么解决的呢
...