wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
							<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8"/>
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <link rel="stylesheet" href="../../dist/index.css"/>
    <script src="../../dist/index.js"></script>
    <script src="../build/cesium/Cesium.js"></script>
    <link href="../build/cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
        }

        .box {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="box">
    <button class="btn" id="point">打点</button>
    <button class="btn" id="polyline">画线</button>
    <button class="btn" id="polygon">画多边形</button>
    <button class="btn" id="rule">测距</button>
    <button class="btn" id="area">测面</button>
    <button class="btn" id="rect">矩形</button>
    <button class="btn" id="clear">清除绘图</button>
    <button class="btn" id="clearBoth">关闭绘图</button>
    <button class="btn" id="plot">其他标绘</button>
    <button class="btn" id="pause">暂定绘图</button>
    <button class="btn" id="begin">开始绘图</button>
    <button class="btn" id="reset">重新创建</button>
</div>

<script>
    let map = new CTMapOl.cesiumComponent.ThrdimeInitMap({
        domId: 'cesiumContainer',
        center: [116,39],
        zoom: 8
    })
    let viewer = map._viewer;
    let mouseTool = new CTMapOl.cesiumComponent.MouseTool(viewer)
    document.getElementById("reset").onclick = function () {
        mouseTool.close(true);
        mouseTool = new CTMapOl.cesiumComponent.MouseTool(viewer)
    };

    // map.on('click', e => {
    //     console.log('mapclick', e)
    // })

    document.getElementById("point").onclick = function () {
        mouseTool.marker({
            infinite: true,
            strokeColor: 'pink',
            strokeOpacity: 1,
            outlineColor: 'pink',
            outlineColorOpacity: 1,
            borderWeight: 1,
            strokeWeight: 10,
        }, e => {
            console.log(e)
        })
    };
    document.getElementById("polyline").onclick = function () {
        mouseTool.polyline({
            infinite: true,
            strokeColor: '#00D3FC',
            strokeOpacity: 0.5,
            outlineColor: '#00B2D5',
            outlineColorOpacity: 0.5,
            borderWeight: 1,
            strokeWeight: 2,
            draw: (e) => {
                console.log('polyline', e)
                if (e?.distance > 100) {
                    console.log('超过了限制')
                    e.cancel();
                }
            }
        }, e => {
            console.log(e)
        })
    };
    document.getElementById("polygon").onclick = function () {
        mouseTool.polygon({
            infinite: true,
            strokeColor: '#00D3FC',
            strokeOpacity: 0.5,
            strokeWeight: 2,
            fillColor: '#00B2D5',
            fillOpacity: 0.5,
            heightReference: 1,
            draw: (e) => {
                console.log('polygon', e)
                if (e?.area > 5000) {
                    console.log('超过了限制')
                    e.cancel();
                }
                console.log(1)
            }
        }, e => {
            console.log(e)
        })
    };
    document.getElementById("clear").onclick = function () {
        mouseTool.close();
    };
    document.getElementById("clearBoth").onclick = function () {
        mouseTool.close(true);
    };
    document.getElementById("rule").onclick = function () {
        // startMarkerOptions: {//可缺省
        //     icon: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
        //     iconSize: [19, 31],
        //     offset: [9, 31]
        // },
        // endMarkerOptions: {//可缺省
        //     icon: "//webapi.amap.com/theme/v1.3/markers/b/end.png",
        //     iconSize: [19, 31],
        //     offset: [9, 31]
        // },
        // midMarkerOptions: {//可缺省
        //     icon: "//webapi.amap.com/theme/v1.3/markers/b/mid.png",
        //     iconSize: [19, 31],
        //     offset: [9, 31]
        // },
        mouseTool.rule({
            lineOptions: {//可缺省
                strokeStyle: "solid",
                strokeColor: "orange",
                strokeOpacity: 1,
                strokeWeight: 5
            },
            pointOption: {
                strokeColor: 'red',
                strokeOpacity: 1,
                outlineColor: 'yellow',
                outlineColorOpacity: 1,
                borderWeight: 1,
                strokeWeight: 3,
            },
            inforWindow: {
                anchor: ['50%', 40],
                content: '<div style="padding: 3px 10px;background: white;"><span class="distance">距离</span><span class="close">x</span><span class="trash">x</span></div>',
                className: 'abc100'
            },
        }, e => {
            console.log(e)
        });
    };
    document.getElementById("area").onclick = function () {
        mouseTool.measureArea({
            strokeColor: 'red',
            strokeOpacity: 0.5,
            strokeWeight: 5,
            fillColor: 'pink',
            fillOpacity: 0.5,
            inforWindow: {
                anchor: ['50%', 40],
                content: '<div style="padding: 3px 10px;background: white;"><span class="area">面积</span><span class="trash">x</span></div>',
                className: 'abc100'
            },
        }, e => {
            console.log('测面', e)
        });
    };
    document.getElementById("rect").onclick = function () {
        mouseTool.rectangle({
            strokeColor: 'red',
            strokeOpacity: 0.5,
            strokeWeight: 5,
            fillColor: 'pink',
            fillOpacity: 0.5,
            draw: (e) => {
                if (e?.area > 10000) {
                    console.log('超过了限制')
                    e.cancel();
                }
            }
        }, e => {
            console.log('矩形', e)
        });
    };
    document.getElementById("pause").onclick = function () {
        mouseTool.pauseDraw();
    };
    document.getElementById("begin").onclick = function () {
        mouseTool.beginDraw();
    };
    document.getElementById("plot").onclick = function () {
        // 用户获取的树形数据
        // let symbolList = mouseTool.getSymbolData({path: '../assets/SymbolIcon'}, true);
        let symbolList = mouseTool.getSymbolData({path: '../assets/SymbolIcon'}, true);
        let target = document.getElementById('symbolBox').getElementsByTagName('img');
        for (let i=0;i<target.length;i++){
            target[i].addEventListener('click', e => {
                let par = e.target.parentNode;
                let type = par.getAttribute('data-type');
                console.log('当前点击的类型', type)
                console.log('当前点击的id', par.getAttribute('id'))
                mouseTool[type]({
                    id: par.getAttribute('id'),
                    strokeColor: 'red',
                    strokeOpacity:1,
                    strokeWeight: 4,
                    fillColor: 'red',
                    fillOpacity: 0,
                    pointColor:'red',
                    pointRadius: 4,
                    pointOpacity: 1,
                    infinite: true,
                });
            })
        }
    };
</script>
</body>
</html>