mapbox：3.添加资源

        当mapbox的底图设置好了，我们便可以在此基础之上建立各个资源了。 这次我先分享三个资源的添加，也是我们最经常使用的三个方法。

---

添加png格式的图片

function addPNG() {
    map.addSource('radar', {
      'type': 'image',
      'url': "http://localhost:82/model/p1.png",
      'coordinates': [
        [108.942413 - 0.01, 34.260424 + 0.01],
        [108.942413 + 0.01, 34.260424 + 0.01],
        [108.942413 + 0.01, 34.260424 - 0.01],
        [108.942413 - 0.01, 34.260424 - 0.01]
      ]
    });
    map.addLayer({
      'id': 'radar-layer',
      'type': 'raster',
      'source': 'radar',
      'paint': {
        'raster-fade-duration': 0
      }
    });
	map.getSource('source-id').setData(data);
} 

        我还是把它们放到了函数中，便于调取。       

        url是我的图片的地址；

        coordinates  是我的图片的四个顶点的经纬度，这样设置会让图片不随着我们地图的缩放而跟着变化；  

        map.addSource主要是跟图片有关的，选择图片的格式，位置，路径等，而map.addLayer和地图有关，可以选择图片的id等等，而这部分一般是不会变化的。

---

创建3D模型

function create3DModel() {
    // 模型的原点经纬度坐标
    const modelOrigin = [108.942413, 34.260424];
    // 模型的海拔高度
    const modelAltitude = 0;
    // 模型的旋转角度（绕X、Y、Z轴的旋转）
    const modelRotate = [Math.PI / 2, 0, 0];

    // 将模型的原点经纬