arcgis js 4.x 地图中加入图片

arcgis js 4.x版本,如何加入图片


问题:如何将自定义图片放入到arcgis的图层当中?

本人在网上查找的方法中,发现大部分方法只适用于3.x版本,只有一种引入自定义BaseDynamicLayer的方法可用,然而按照这种方式,无法满足动态刷新图片的需求。

解决方法
step 1:还是使用BaseDynamicLayer引入图片

var mainMap = new Map({
            basemap:"satellite",
            ground: "world-elevation",
        });
//创建MapView来存放各个图层
var mainView = new MapView({
   map:mainMap,
   container:"viewDiv",
   center:[110.3147025,37.5991070],
   zoom:13,
});

var CustomImageOverlayLayer = BaseDynamicLayer.createSubclass({
   properties: {
       picUrl: null,
       extent: null,
       image: null,
       canvas: null,
   },

   // Override the getImageUrl() method to generate URL
   // to an image for a given extent, width, and height.
   getImageUrl: function (extent, width, height) {
       //新Image对象,可以理解为DOM
       if (!this.image) {
           this.image = new Image();
       }
       this.image.src = this.picUrl;

       // 创建canvas DOM元素,并设置其宽高和图片一样
       if (!this.canvas) {
           this.canvas = canvas = document.createElement("canvas");
       }
       this.canvas.width = 2000;
       this.canvas.height = 2000;

       //左上角坐标转换屏幕坐标,为了获取canvas绘制图片的起点
       var mapPoint = {
           x: this.extent.xmin,
           y: this.extent.ymax,
           spatialReference: {
               wkid: 4326
           }
       };
       var screenPoint = mainView.toScreen(mapPoint);
       //根据extent范围计算canvas绘制图片的宽度以及高度
       //左下角
       var leftbottom = {
           x: this.extent.xmin,
           y: this.extent.ymin,
           spatialReference: {
               wkid: 4326
           }
       };
       var screen_leftbottom = mainView.toScreen(leftbottom);
       //右上角
       var righttop = {
           x: this.extent.xmax,
           y: this.extent.ymax,
           spatialReference: {
               wkid: 4326
           }
       };
       var screen_righttop = mainView.toScreen(righttop);
       this.canvas.getContext("2d").drawImage(this.image, screenPoint.x, screenPoint.y, Math.abs(screen_righttop.x - screen_leftbottom.x), Math.abs(screen_righttop.y - screen_leftbottom.y));
       return this.canvas.toDataURL("image/png");

   }
});
const temp = ["t=0.png", "t=180.png","t=360.png","t=540.png","t=1080.png","t=1260.png","t=1440.png","t=1620.png","t=1800.png","t=1980.png","t=2160.png","t=2340.png","t=2520.png","t=2880.png","t=3060.png","t=3420.png","t=3600.png"]		//待遍历的图片名称

var ImageOverlayLayer = new CustomImageOverlayLayer({
   picUrl: "../images/changePic/"+temp[0],   //图片路径
   extent: {xmin: 110.2237025, ymin: 37.5121070, xmax:110.4497025, ymax: 37.6551070}		//图片位置(最大最小经纬度)
})
mainMap.add(ImageOverlayLayer, 0);	//将图片图层放入mainMap,并设置在最底层

step 2(关键):实现图片动态切换

function showTime()
{
    ImageOverlayLayer.refresh()
}
setInterval(showTime, 1);		//设置图层每秒自动刷新一次(很重要)
for(var i = 1; i < 17; i++) {
    (function (i) {
        setTimeout(function () {	//设置定时器,每三秒刷新后一张图片
            ImageOverlayLayer.picUrl = "../images/changePic/"+temp[i]		//更新图片路径并刷新图层
            ImageOverlayLayer.refresh()
        }, (i + 1) * 3000);
    })(i)
}

至此,就可以实现在arcgis js 4.x,图片的动态切换了
在这里插入图片描述

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ostrich5yw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值