私は ol.geom.Polygon オブジェクトを使用してポリゴンを描画しています。これにツールチップを追加して、このように描画されたエーカーを表示しました。
if (geom instanceof ol.geom.Polygon) {
MapValues.polyAcres = MapService.formatArea(geom);
tooltipCoord = geom.getInteriorPoint().getCoordinates();
MapValues.measureTooltipElement.innerHTML = MapValues.polyAcres;
MapValues.measureTooltip.setPosition(tooltipCoord);
アップデート
これがツールチップの作成方法です...
mapSVC.createMeasureTooltip = function(){
if (MapValues.measureTooltipElement) {
MapValues.measureTooltipElement.parentNode.removeChild(MapValues.measureTooltipElement);
}
MapValues.measureTooltipElement = document.createElement('div');
MapValues.measureTooltipElement.className = 'tooltip tooltip-measure';
MapValues.measureTooltipElement.style = 'pointer-events: none';
MapValues.measureTooltip = new ol.Overlay({
element: MapValues.measureTooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
MapValues.mapObj.addOverlay(MapValues.measureTooltip);
}
問題は、ポイントを描画した形状によっては、ツールチップが重なって、ポイントを設定する能力が効果的にブロックされることです。
スタイル 'pointer-events: none' を ol.Overlay に追加するにはどうすればよいですか?