带有测量工具提示的 OpenLayers OL-Ext 绘制路径

Question

我正在使用 OL-Ext 并使用 GPS 在 OpenLayers 3 地图上绘制多边形和线。

我正在尝试在 "follow" 处于活动状态时添加测量工具提示。

我在地图上绘图时实现了这个，但未能将其转化为 OL-Ext 工具。

这是我在地图上绘图时的做法...

webMapValues.drawObj.on('drawstart',
      function (evt) {
             if (webMapValues.activeDrawControl == "Ruler") {
                            // set sketch
                            webMapValues.sketch = evt.feature;

                            /** @type {ol.Coordinate|undefined} */
                            var tooltipCoord = evt.coordinate;

                            listener = webMapValues.sketch.getGeometry().on('change', function (evt) {
                                var geom = evt.target;
                                var output;
                                if (geom instanceof ol.geom.Polygon) {
                                    webMapValues.rulerLength = formatArea(geom);
                                    tooltipCoord = geom.getInteriorPoint().getCoordinates();
                                } else if (geom instanceof ol.geom.LineString) {
                                    webMapValues.rulerLength = rcisMapService.formatLength(geom);
                                    tooltipCoord = geom.getLastCoordinate();
                                }
                                webMapValues.measureTooltipElement.innerHTML = webMapValues.rulerLength;
                                webMapValues.measureTooltip.setPosition(tooltipCoord);
                         });
                     }

}, this);

我想用 OL-Ext 做同样的事情，这就是我目前的情况。

webMapValues.geoTrackActive.on("tracking", function (e) {
                $("#accuraty").width((e.geolocation.getAccuracy()));
                webMapValues.geoGauge.val(e.geolocation.getAccuracy());
                $("#heading").val(e.geolocation.getHeading());
                $("#z").val(e.geolocation.getAltitude());


                    // set sketch
                    webMapValues.sketch = e.feature;

                    /** @type {ol.Coordinate|undefined} */
                    var tooltipCoord = e.feature.getGeometry.getCoordinates();

                    listener = webMapValues.sketch.getGeometry().on('change', function (e) {
                        var geom = e.geolocation.target;
                        var output;
                        if (geom instanceof ol.geom.Polygon) {
                            webMapValues.rulerLength = formatArea(geom);
                            tooltipCoord = geom.getInteriorPoint().getCoordinates();
                        } else if (geom instanceof ol.geom.LineString) {
                            webMapValues.rulerLength = rcisMapService.formatLength(geom);
                            tooltipCoord = geom.getLastCoordinate();
                        }
                        webMapValues.measureTooltipElement.innerHTML = webMapValues.rulerLength;
                        webMapValues.measureTooltip.setPosition(tooltipCoord);
                    });
 },this);

我目前无法从 "e" 获取坐标我已经尝试了

的几次迭代

 var tooltipCoord = e.feature.getGeometry.getCoordinates();

但似乎无法访问坐标。

感谢任何帮助！

更新

这使用了ol.interaction.GeolocationDraw

Answer 1

这是有效的 Ol-ext GPS 多边形绘制工具提示代码的样子...

   webMapValues.geoTrackActive.on("tracking", function (e) {
                $("#accuraty").width((e.geolocation.getAccuracy()));
                webMapValues.geoGauge.val(e.geolocation.getAccuracy());
                $("#heading").val(e.geolocation.getHeading());
                $("#z").val(e.geolocation.getAltitude());


                    // set sketch
                    webMapValues.sketch = e.target.sketch_;

                    /** @type {ol.Coordinate|undefined} */
                var tooltipCoord = e.geolocation.getPosition();

                var feature = e.feature;
                var geom = e.feature.getGeometry();
                        var output;
                if (geom instanceof ol.geom.Polygon) {
                            webMapValues.polyAcres = MapService.formatArea(geom);
                            tooltipCoord = geom.getInteriorPoint().getCoordinates();
                            webMapValues.measureTooltipElement.innerHTML = webMapValues.polyAcres;
                            webMapValues.measureTooltip.setPosition(tooltipCoord);                                
                        } else if (geom instanceof ol.geom.LineString) {
                            webMapValues.rulerLength = MapService.formatLength(geom);
                            tooltipCoord = geom.getLastCoordinate();
                            //**************** Moved inside 'else' for LineString **********
                            webMapValues.measureTooltipElement.innerHTML = webMapValues.rulerLength;
                            webMapValues.measureTooltip.setPosition(tooltipCoord);
                        } 
            },this);

带有测量工具提示的 OpenLayers OL-Ext 绘制路径

OpenLayers OL-Ext draw path with measure tool-tip

openlayers

openlayers-3