超圖 webgl 地圖初始化及繪製點線面

開始之前還是先把超圖web-gl的源碼下載一下http://support.supermap.com.cn/DownloadCenter/ProductPlatform.aspx

這裏用的版本是SuperMap iClient3D 10i Beta
1.初始化地圖

		//初始化viewer部件
        var viewer = new Cesium.Viewer('cesiumContainer');
        var imageryLayers = viewer.imageryLayers;
        //利用服務url創建SuperMapImageryProvider實例
        var provider_wgs = new Cesium.SuperMapImageryProvider({
            url: URL_CONFIG.SUPERMAP_IMG_WGS_SELF //地圖服務地址
        });
        //添加多個地圖服務，用於切換地圖等
        var provider_mec = new Cesium.SuperMapImageryProvider({
            url: URL_CONFIG.SUPERMAP_IMG_MEC//墨卡託投影地圖服務
        });
        var imagery_wgs, imagery_mec;
        //初始化時添加默認的地圖圖層
        imagery_mec = imageryLayers.addImageryProvider(provider_mec);
        imagery_mec.alpha = 0;
        imagery_wgs = imageryLayers.addImageryProvider(provider_wgs);
        imagery_wgs.alpha = 1.0;

2.繪製點線面
2.1繪製點（不使用dot，使用billboard更靈活）

/添加標點
                        viewer.entities.add({
                            //position: new Cesium.Cartesian3.fromDegrees(經度, 緯度,高度);,
                            //position接受Cartesian3對象
                            position: new Cesium.Cartesian3.fromDegrees('120.00000000', '23.000000000',15);,
                            billboard: {
                                image: './images/location4.png',
                                width: 30,
                                height: 40,

                            },
                            name: '隨便什麼',
                            description: '系統自帶的信息彈窗，可以接受html'
                        });

2.2繪製線
不得不吐槽一下，超圖的API文檔是真的。。。牛逼（laji）好吧，去看API還不如去問答社區來的快，你敢信。
廢話不多說，上代碼：

var redLine = viewer.entities.add({
	//實體的name
     name: 'Red line on the surface',
      polyline: {
      //座標（Cartesian3對象，接受座標集合，不過這集合很奇怪就是了，全都用‘,’來分隔）
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(‘經度’, ‘緯度’, 高度,
              ‘經度’, ‘緯度’, 高度),
          width: 15,
          followSurface: false,
          //線型
          material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.ROYALBLUE)

      }
  });

2.3繪製面
這裏來繪製矢量面，和繪線大同小異

//座標實例集合
//pointList=[new Cesium.Cartesian3.fromDegrees(經度,緯度,高度),
//new Cesium.Cartesian3.fromDegrees(經度,緯度,高度),
//new Cesium.Cartesian3.fromDegrees(經度,緯度,高度)]
var polygon = viewer.entities.add({
    polygon: {
        hierarchy: {
            positions: pointList
        },
        //面的樣式(改顏色還是去看看color的API吧)
        material: Cesium.Color.BLUE.withAlpha(0.3)
    }
});