超图 webgl 地图初始化及绘制点线面

最新推荐文章于 2024-07-31 09:52:29 发布

JustStand

最新推荐文章于 2024-07-31 09:52:29 发布

阅读量2k

点赞数 2

分类专栏： JavaScript webgl

本文链接：https://blog.csdn.net/qq_42031498/article/details/100697101

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

webgl

1 篇文章 0 订阅

订阅专栏

开始之前还是先把超图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)
    }
});