supermap IServer 3DWEBGL实现绘制polygon（精简）

程序员文章站 2022-03-26 08:54:00

...

在head里面导入一些必要的库
导入的文件路径按实际情况自行查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>绘制</title>
    <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>

然后是分为两部分，一部分加载场景，一部分实现绘制

加载地球场景

<body>
    <input type="button" id="polygon" style="position: absolute;width: 10%;background-color: antiquewhite;height: 5%;left: 10%;top: 10%;z-index: 10;" value="绘制面">
    <div id="cesiumContainer"></div>
    <script type="text/javascript">
    var viewer = new Cesium.Viewer('cesiumContainer',{
            infoBox : false,
            selectionIndicator : false
        });
    viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
            url : 'https://dev.virtualearth.net',
            mapStyle : Cesium.BingMapsStyle.AERIAL,
            key : "ApyMEZr0lUuJphkP4FJ5lyLEOIVd9drhDlkfliMyigZ4flM415lDubHFldJiRiMx"
        }));
        var scene = viewer.scene;
        scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
        scene.skyAtmosphere.brightnessShift=0.4;  //修改大气的亮度
        scene.debugShowFramesPerSecond = true;
        scene.hdrEnabled = false;
        scene.sun.show = false;
        // 01设置环境光的强度-新处理CBD场景
        scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
        // 添加光源
        var position1 = new Cesium.Cartesian3.fromDegrees(116.261209157595,  39.3042238956531, 480);
        //光源方向点

        var targetPosition1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531,430);
        var dirLightOptions = {
            targetPosition: targetPosition1,
            color: new Cesium.Color(1.0, 1.0, 1.0, 1),
            intensity: 0.55
        };
        directionalLight_1 = new Cesium.DirectionalLight(position1, dirLightOptions);
        scene.addLightSource(directionalLight_1);
        try {
            // 打开所发布三维服务下的所有图层
            var promise = scene.open(URL_CONFIG.SCENE_CBD);
            Cesium.when(promise,function(layers){
                // 设置相机位置、视角，便于观察场景
                scene.camera.setView({
                    destination : new Cesium.Cartesian3.fromDegrees(116.4563,39.8969,553),
                    orientation : {
                        heading : 5.901089214916513,
                        pitch : -0.40668579780875524,
                        roll : 6.281842456812987
                    }
                });
                for(var i = 0; i<layers.length;i++){
                    layers[i].selectEnabled = false;
                }
            
                if(!scene.pickPositionSupported){
                    alert('不支持深度纹理,无法拾取位置！');
                }
            },function(e){
                if (widget._showRenderLoopErrors) {
                    var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                    widget.showErrorPanel(title, undefined, e);
                }
            });
        }
        catch(e){
            if (widget._showRenderLoopErrors) {
                var title = '渲染时发生错误，已停止渲染。';
                widget.showErrorPanel(title, undefined, e);
            }
        }

实现绘制

		var clampMode = 0;
        //绘制polygon
        var handlerPolygon = new Cesium.DrawHandler(viewer,Cesium.DrawMode.Polygon,clampMode);
        handlerPolygon.activeEvt.addEventListener(function(isActive){
            if(isActive == true){
                viewer.enableCursorStyle = false;
                viewer._element.style.cursor = '';
                $('body').removeClass('drawCur').addClass('drawCur');
            }
            else{
                viewer.enableCursorStyle = true;
                $('body').removeClass('drawCur');
            }
        });
        $('#polygon').click(function(){
          	deactiveAll();
            handlerPolygon.activate();
        });
        function deactiveAll(){
            handlerPolygon.deactivate();
        }
        function clearAll(){
            handlerPolygon.clear();
        }
        if(!scene.pickPositionSupported){
            alert('不支持深度拾取,无法进行鼠标交互绘制！');
        }
    </script>
</body>