Question

我正在使用北，南，西，est坐标系，我想在地图上以正确的位置绘制特定大小的图像。我先尝试只画一个点，然后它出现在正确的位置上（因此坐标似乎有效），但是如果我尝试绘制图像，它就不会出现在地图上。我知道我不能直接给出图标的高度和宽度，因此我首先创建了一个画布以供使用。这是我的代码：

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

如果您无法预加载sourceImage（例如，直到需要URL之前您都不知道该URL），则需要使用类似于xhr的onload函数对其进行处理

       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';

Answer 2

我以这种方式解决了：

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;
                }
            };

OpenLayer在特定位置和特定尺寸的地图上添加图标

2 个答案: