ImageElement

// add a new imageElement and use extent and rotation
// to place the element on the map.
const imageElement = new ImageElement({
  image: "https://arcgis.github.io/geoscene-samples-javascript/sample-data/media-layer/neworleans1891.png",
  georeference: new ExtentAndRotationGeoreference({
    extent: new Extent({
      spatialReference: {
        wkid: 102100
      },
      xmin: -10047456.27662979,
      ymin: 3486722.2723874687,
      xmax: -10006982.870152846,
      ymax: 3514468.91365495
    })
  })
});

属性概述

属性详细信息

content HTMLImageElement|HTMLCanvasElement|ImageDatareadonly

图像元素实例中引用的图像内容。内容与图像参数中引用的图像相匹配。

declaredClass Stringreadonly inherited

类的名称。声明的类名称格式化为 geoscene.folder.className。

georeference ExtentAndRotationGeoreference|CornersGeoreference|ControlPointsGeoreference

要放置在地图上的图像或视频元素的地理位置。可以通过指定元素的范围和旋转、边界框的角点或定义控制点来设置位置。

已知限制

• 目前，ControlPointsGeoreference 在 3D SceneViews 中不受支持。

示例

// create a new ExtentAndRotationGeoreference
const geoReference = new ExtentAndRotationGeoreference({
  extent: new Extent({
    spatialReference: {
      wkid: 102100
    },
    xmin: -10047456.27662979,
    ymin: 3486722.2723874687,
    xmax: -10006982.870152846,
    ymax: 3514468.91365495
  })
});
const imageElement = new ImageElement({
  image: "https://arcgis.github.io/geoscene-samples-javascript/sample-data/media-layer/new-orleans/neworleans1891.png",
  georeference: geoReference
});

// create a canvas image element by setting its corner points of the bounding box
const canvasElement = new ImageElement({
  image: canvas,
  georeference: new CornersGeoreference({
    bottomRight: new Point({
      x: -121.369,
      y: 45.061
    }),
    bottomLeft: new Point({
      x: -122.363,
      y: 45.061
    }),
    topRight: new Point({
      x: -121.369,
      y: 45.678
    }),
    topLeft: new Point({
      x: -122.363,
      y: 45.678
    })
  })
});

// georeference an ImageElement, using ControlPointsGeoreference in the
// North American Datum 1927 spatial reference
const spatialReference = new SpatialReference({ wkid: 4267 });
const swCorner = {
    sourcePoint: { x: 80, y: 1732 },
    mapPoint: new Point({ x: -107.875, y: 37.875, spatialReference })
};

const nwCorner = {
    sourcePoint: { x: 75, y: 102 },
    mapPoint: new Point({ x: -107.875, y: 38, spatialReference })
};

const neCorner = {
   sourcePoint: { x: 1353, y: 99 },
   mapPoint: new Point({ x: -107.75, y: 38, spatialReference })
};

const seCorner = {
   sourcePoint: { x: 1361, y: 1721 },
   mapPoint: new Point({ x: -107.75, y: 37.875, spatialReference })
};

const controlPoints = [swCorner, nwCorner, neCorner, seCorner];

const georeference = new ControlPointsGeoreference({ controlPoints, width: 1991, height: 2500 });

const imageElement = new ImageElement({
    image: "https://jsapi.maps.arcgis.com/sharing/rest/content/items/1a3df04e7d734535a3a6a09dfec5a6b2/data",
    georeference
});

image String|HTMLImageElement|HTMLCanvasElement|ImageData

要添加到媒体图层源的图像元素。例如，图像元素可以是指向图像的 URL 字符串。

示例

// create an image element pointing url of the image file
const stHelen = new ImageElement({
  image: "https://ubatsukh.github.io/geoscene-js-api-demos/data/nasa/mount_st_helens.jpeg",
  georeference: new CornersGeoreference({
    extent: new Extent({
      spatialReference: {
        wkid: 102100
      },
      xmax: -13544247.66023844,
      xmin: -13659744.009977184,
      ymax: 5858405.227033072,
      ymin: 5767445.163373847
    })
  })
});

// create an image element pointing to image data
const arr = new Uint8ClampedArray(40000);

// Iterate through every pixel
for (let i = 0; i < arr.length; i += 4) {
  arr[i + 0] = 0;    // R value
  arr[i + 1] = 190;  // G value
  arr[i + 2] = 0;    // B value
  arr[i + 3] = 255;  // A value
}

// Initialize a new ImageData object
let imageData = new ImageData(arr, 200);

// create a new image element pointing to the
// image data and set location of the image on the map
const imageDataElement = new ImageElement({
  image: imageData,
  georeference: extent
});

// create a canvas
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 200);

// add the canvas as an image element
const canvasElement = new ImageElement({
  image: canvas,
  georeference: extent
});

opacity Number

元素的不透明度。此值的范围在 1 到 0 之间，其中 0 是 100% 透明，而 1 为完全不透明。

默认值：1

type Stringreadonly

元素类型。

对于 ImageElement，类型总是 "image"。

方法概述

方法详细说明

addHandles(handleOrHandles, groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时，将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

// Handle gets removed when the object is destroyed.
this.addHandles(handle);

参数

handleOrHandles WatchHandle|WatchHandle[] 对象销毁后，标记为要移除的句柄。

groupKey * optional 标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键，则句柄将被添加到默认组。

hasHandles(groupKey){Boolean}inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组，则返回 true。

参数

groupKey * optional 组键。

返回

类型	描述
Boolean	如果存在指定的句柄组，则返回 true。

示例

// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

removeHandles(groupKey)inherited

起始版本：GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数

groupKey * optional 要移除的组键或组键的数组或集合。

示例

obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");