超图 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)
    }
});
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值