Promise场景实例之图片加载

  • 所有图片加载完再添加到页面

在这里插入图片描述

{
  // 所有图片加载完再添加到页面
  function loadImg(src) {
    return new Promise(function (resolve, reject) {
      let img = document.createElement('img')
      img.src = src
      img.onload = function () {
        resolve(img)
      }
      img.onerror = function (err) {
        reject(err)
      }
    })
  }

  function showImgs(imgs) {
    imgs.forEach(img => {
      document.body.appendChild(img)
    });
  }
  Promise.all([ // 所有图片加载完后执行
    loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png'),
    loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png'),
    loadImg('http://pic37.nipic.com/20140113/8800276_184927469000_2.png')
  ]).then(showImgs)
}

  • 有一个图片加载完成就添加到页面

多个图片服务器, 加载最快的一个

在这里插入图片描述

{
  // 多个图片服务器, 加载最快的一个
  // 有一个图片加载完成就添加到页面
  function loadImg(src) {
    return new Promise((resolve, reject) => {
      let img = document.createElement('img')
      img.src = src
      img.onload = function () {
        resolve(img)
      }
      img.onerror = function () {
        reject(err)
      }
    })
  }
  function showImg(img){
    document.body.appendChild(img)
  }

  Promise.race([ // 谁先请求到 就显示谁
    loadImg('http://img2.imgtn.bdimg.com/it/u=234634259,4236876085&fm=26&gp=0.jpg'),
    loadImg('http://img4.imgtn.bdimg.com/it/u=2153937626,1074119156&fm=26&gp=0.jpg'),
    loadImg('http://img1.imgtn.bdimg.com/it/u=1483033257,4287748004&fm=26&gp=0.jpg')
  ]).then(showImg)
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要加载省界,可以使用GeoJSON格式的文件将省界数据添加到Cesium中。以下是一个简单的例子: ```javascript // 创建Cesium Viewer var viewer = new Cesium.Viewer('cesiumContainer'); // 加载省界数据 var promise = Cesium.GeoJsonDataSource.load('path/to/province.json'); promise.then(function(dataSource) { // 添加省界数据到场景中 viewer.dataSources.add(dataSource); // 设置相机视角以适应整个省界 viewer.zoomTo(dataSource); }).otherwise(function(error) { // 如果加载失败,输出错误信息 console.log(error); }); ``` 其中,`path/to/province.json`应该替换成你自己的省界数据文件路径。此外,你也可以根据需要对省界数据进行样式和标注等自定义设置。 ### 回答2: Cesium是一个开源的3D地球显示引擎,它允许开发者在网页上构建交互式的虚拟地球场景。在Cesium中加载省界需要以下几个步骤。 首先,我们需要获得省界的地理数据。省界通常以矢量数据的形式存储,比如GeoJSON或者Shapefile格式。可以从各种数据提供商或者地理信息系统中获取这些数据。 接下来,我们使用JavaScript编写代码来加载和显示省界数据。在Cesium中,我们可以使用Entity或者Primitive对象来表示和渲染地理实体。 为了加载省界数据,我们需要先创建一个Cesium Viewer对象,它代表了地球场景的显示窗口。然后,我们可以使用Cesium的load方法来异步加载省界数据文件。 一旦数据加载完成,我们可以使用解析的省界数据来创建一个Entity对象。Entity对象可以设置一些属性,比如位置、颜色和样式,用来表示省界的外观特征。 最后,我们将Entity对象添加到Viewer对象中,以便在地球场景中显示省界。可以设置一些相机参数,如视角和缩放级别,以便在加载省界时定位和呈现其外观。 通过这些步骤,我们可以在Cesium中成功加载省界数据,并在虚拟地球场景中显示出来。这样用户就可以通过鼠标交互来浏览和探索加载的省界,以及与其它地理数据进行交互。 ### 回答3: Cesium是一款基于WebGL的三维地球可视化引擎,它可以加载各种地理数据并进行可视化展示。如果想要加载省界数据,首先需要获取省界的地理数据。 一种获取省界数据的方法是通过开放平台或政府机构提供的接口或数据集,获取到省界的地理坐标点集合。接下来,可以使用Cesium提供的GeoJsonDataSource类来加载这些地理数据。GeoJsonDataSource可以将GeoJSON格式的数据转换为Cesium可识别的格式。 加载省界数据的过程如下:首先创建一个GeoJsonDataSource实例,然后使用load方法加载省界的地理数据文件。Cesium支持的地理数据文件格式有GeoJSON、KML、TopoJSON等。加载成功后,可以通过cesiumViewer对象的dataSources属性获得加载的数据集并添加到地球场景中。 在加载省界数据后,可以对数据进行可视化的操作。比如,可以根据省界的不同属性值设置不同的样式,如颜色、边框线宽等,从而区分不同的省界。此外,还可以根据数据集的经纬度坐标计算省界的面积、中心点等信息,并在地球场景中进行显示。 需要注意的是,加载省界数据可能会涉及到大量的数据处理和渲染操作,因此在使用Cesium加载省界数据时需考虑性能和效率的问题,例如采用分块加载数据或使用时空索引等技术来提高加载和渲染速度。 总之,通过Cesium加载省界数据可以利用其强大的三维可视化功能,实现对省级行政区划的显示和分析。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值