OpenLayer добавляет значок на карту в определенном месте и определенном измерении

Question

Я использую систему координат север, юг, запад, восток, и я хочу нарисовать на карте изображение в нужном месте и с определенным размером.Сначала я попытался нарисовать только одну точку, и она появилась в правильном положении (поэтому, кажется, что координаты работают), но если я пытаюсь нарисовать изображение, оно не появляется на карте. Я знаю, что не могу датьдо значка высота и ширина, поэтому я сначала создал холст для использования после.Это мой код:

if ( this.nord && this.sud && this.est && this.ovest && this.opacityPercentage) {

             var extent = ol.proj.transformExtent([this.nord, this.ovest, this.sud, this.est], 'EPSG:4326', 'EPSG:3857');
             var height = ol.extent.getHeight(extent);
             var width = ol.extent.getWidth(extent);
             var center = ol.extent.getCenter(extent);

             var sourceImage = new Image();
             var canvas = document.createElement('canvas');
             
             sourceImage.src = 'https://www.mikenunn.net/data/oak-tree-icon-png-17.png';
             canvas.width = width;
             canvas.height = height;
             canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);

             var resizedImageURL = canvas.toDataURL();

             var treePoint = new ol.geom.Point(center);
             var featureTree = new ol.Feature(treePoint);

             featureTree.setStyle(new ol.style.Style({
               image: new ol.style.Icon({
                  src: resizedImageURL,
                  opacity: this.opacityPercentage,
                })
              }));

              this.features.push(featureTree);
              this.mapView.fit(treePoint, {minResolution: 0.05});

} else {
this.controller.fireEvent('mapstaterequest');
}

В случае, если есть другой способ, которым я мог бы использовать для достижения своей цели?

Answer 1

Я решил таким образом:

if ( this.nord && this.sud && this.est && this.ovest && this.image && this.opacity) {

                 var extent = ol.proj.transformExtent([this.ovest, this.sud, this.est, this.nord], 'EPSG:4326', 'EPSG:3857');
                 var center = ol.extent.getCenter(extent);
                 var size = ol.extent.getSize(extent)
                 var view = map.getView();
                 var resolutionAtEquator = view.getResolution();
                 var width = ol.extent.getWidth(extent);
                 var height = ol.extent.getHeight(extent);
                 var radius = width/2;
                 var rotation = 0;
                 var circle = circle || new ol.geom.Circle(center, radius);
                 var circleFeature = new ol.Feature(circle);
                 circleFeature.set('rotation', rotation);
                 var geom = ol.geom.Polygon.fromExtent(extent);
                 circleFeature.setGeometry(geom);
                 this.features.push(circleFeature);
                 this.mapView.fit(geom, {minResolution: 0.05});
            } else {
                this.controller.fireEvent('mapstaterequest');
            }

и я отредактировал функцию стиля следующим образом:

styleFunction = function(feature, resolution) {

               var rayDrawValue = img.width/2;
               var resAdjust = rayDrawValue * resolution;
               var rotation = feature.get('rotation');

               if (rotation !== undefined) {

                    var extent = feature.getGeometry().getExtent();
                    var coordinates = feature.getGeometry().getCoordinates()[0];
                    
                    var getBottomLeft = ol.extent.getBottomLeft(extent);
                    var getBottomRight = ol.extent.getBottomRight(extent);
                    var getTopLeft = ol.extent.getTopLeft(extent);
                    var getTopRight = ol.extent.getTopRight(extent);
                    var center = ol.extent.getCenter(extent);

                    var dx = center[0] - getBottomLeft[0];
                    var dy = 0;
                    var scaleX = Math.sqrt(dx * dx + dy * dy)/resAdjust;

                    var dx = 0;
                    var dy = getTopRight[1] - center[1];
                    var scaleY = Math.sqrt(dx * dx + dy * dy)/resAdjust;

                    var treeStyle2 = getStyle(img, scaleX, scaleY);
                    treeStyle2.setGeometry(new ol.geom.Point(center));
                    treeStyle2.getImage().setRotation(rotation);
                    return debug ? styles.concat([treeStyle2]) : treeStyle2;

                } else if (feature.getGeometry().getCenter) {
                    treeStyle.setGeometry(new ol.geom.Point(feature.getGeometry().getCenter()));
                    treeStyle.getImage().setRotation(feature.getGeometry().get('rotation'));
                    treeStyle.getImage().setScale(feature.getGeometry().getRadius()/resAdjust);
                    return treeStyle;

                } else {
                   return styles;
                }
            };

Answer 2

Если вы не можете предварительно загрузить sourceImage (например, вы не знаете URL, пока он вам не нужен), вам нужно обработать его в функции загрузки, аналогичной xhr

       var sourceImage = new Image();
       sourceImage.onload = function() {

         var canvas = document.createElement('canvas');
         canvas.width = width;
         canvas.height = height;
         canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);

         var resizedImageURL = canvas.toDataURL();

         var treePoint = new ol.geom.Point(center);
         var featureTree = new ol.Feature(treePoint);

         featureTree.setStyle(new ol.style.Style({
           image: new ol.style.Icon({
              src: resizedImageURL,
              opacity: this.opacityPercentage,
            })
          }));

          this.features.push(featureTree);
          this.mapView.fit(treePoint, {minResolution: 0.05});

       }
       sourceImage.src = 'https://www.mikenunn.net/data/oak-tree-icon-png-17.png';