跳到主要内容
版本：9.16.0

三维图形绘制与编辑

支持在三维场景中绘制和编辑图形，包括矩形、圆、多边形等。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>三维图形绘制与编辑</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="./GraphicEdit.css">
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>
<body>
    <div id="map"></div>
    <div id="controlPanel">
        <div class="panel-title">三维图形编辑</div>

        <div id="toolbar" class="panel-row">
            <button id="btnPolygon" title="单击放置顶点，双击或 Enter 闭合完成" onclick="toggleDrawMode('polygon', this)">多边形</button>
            <button id="btnRectangle" title="按住鼠标拖拽完成" onclick="toggleDrawMode('rectangle', this)">矩形</button>
            <button id="btnCircle" title="按住鼠标拖拽完成" onclick="toggleDrawMode('circle', this)">圆形</button>
        </div>

        <div id="stylePanel" class="panel-row">
            <div class="styleItem">
                <label for="fillColorPicker">填充颜色</label>
                <input id="fillColorPicker" type="color" value="#D2D418" title="填充颜色" oninput="changeFillColor(this.value)">
            </div>
            <div class="styleItem">
                <label for="fillOpacityInput">填充不透明度</label>
                <input id="fillOpacityInput" type="number" value="0.5" min="0" max="1" step="0.1" title="填充不透明度" oninput="changeFillOpacity(this.value)">
            </div>
            <div class="styleItem">
                <label for="strokeWidthInput">边框宽度</label>
                <input id="strokeWidthInput" type="number" value="3" min="1" max="20" title="边框宽度（px）" oninput="changeStrokeWidth(this.value)">
            </div>
        </div>

        <div id="operationPanel">
            <div class="operation-row">
                <button id="btnToggleEdit" class="edit-button" onclick="toggleEditMode()">编辑：开</button>
                <button id="btnSave" onclick="saveShapes()">保存</button>
                <button id="btnLoad" onclick="loadShapes()">加载</button>
            </div>
            <div class="operation-row">
                <button id="btnUndo" title="撤销上一次操作" onclick="undoLastOperation()">撤销上一步绘制的图形</button>
                <button id="btnClear" onclick="clearAllShapes()">清除</button>
                <button id="btnDelete" onclick="deleteSelectedShape()">删除选中图形</button>
            </div>
        </div>
    </div>

    <script>
        const editButton = document.getElementById('btnToggleEdit');

        let sketchLayer;
        let sketchShapes;
        let modelLayer;

        const map = new mapmost.Map({
            container: 'map',
            style: "<your style url>", 
            center: [120.73783051606478, 31.31409917592829],
            doubleClickZoom: false,
            zoom: 16,
            pitch: 45,
            bearing: -20,
            sky: 'light',
            userId: '***', // 授权码
        });

        map.on('load', iaddSketchLayer);

        // 添加三维图形绘制图层
        function addSketchLayer() {
            map.addLayer({
                id: 'graphic-sketch',
                type: 'sketch',
                fillColor: '#D2D418', // 填充颜色
                fillOpacity: 0.5, // 填充不透明度
                strokeColor: '#D2D418', // 边框颜色
                strokeWidth: 3, // 边框宽度
                strokeOpacity: 1, // 边框不透明度
                editStrokeColor: '#ff6600', // 编辑边框颜色
                onDrawEnd: handleDrawEnd,
                callback: handleSketchLayerReady
            });
        }

        // 图形绘制图层回调函数
        function handleSketchLayerReady(shapes, layer) {
            sketchShapes = shapes;
            sketchLayer = layer;
        }

        // 绘制或编辑完毕执行的回调函数
        function handleDrawEnd(shape) {
            console.log('绘制或编辑完成：', shape);
        }

        // 切换绘制模式
        function toggleDrawMode(mode, button) {
            if (!sketchLayer) return;

            sketchLayer.setMode(mode);
        }

        // 撤销上一步绘制的图形
        function undoLastOperation() {
            if (!sketchLayer || !sketchLayer.undo()) return;
        }

        // 清除所有绘制的图形
        function clearAllShapes() {
            if (!sketchLayer) return;

            sketchLayer.clear();
        }

        // 删除选中的图形
        function deleteSelectedShape() {
            if (!sketchLayer || !sketchLayer.removeSelected()) {
                alert('请先开启编辑并选中一个图形。');
                return;
            }
        }

        // 开启/关闭编辑模式
        function toggleEditMode() {
            if (!sketchLayer) return;

            const nextEditable = !sketchLayer.editable;
            sketchLayer.setEditable(nextEditable);
            editButton.textContent = `编辑：${nextEditable ? '开' : '关'}`;
            editButton.classList.toggle('is-off', !nextEditable);
        }

        // 更新选中图形的填充颜色和边框颜色
        function changeFillColor(color) {
            if (!sketchLayer) return;

            const shape = getSelectedShape();
            if (shape) {
                // 更新选中图形的填充面颜色
                sketchLayer.updateShapeFillColor(shape, color);
                // 更新选中图形的边框线颜色
                sketchLayer.updateShapeStrokeColor(shape, color);
            } else {
                sketchLayer.fillColor = color;
                sketchLayer.strokeColor = color;
            }
        }

        // 更新选中图形的填充不透明度
        function changeFillOpacity(value) {
            if (!sketchLayer) return;

            const opacity = Number(value);
            if (Number.isNaN(opacity)) return;

            const shape = getSelectedShape();
            if (shape) {
                // 更新选中图形的填充面透明度
                sketchLayer.updateShapeFillOpacity(shape, opacity);
            } else {
                sketchLayer.fillOpacity = opacity;
            }
        }

        // 更新选中图形的边框宽度
        function changeStrokeWidth(value) {
            if (!sketchLayer) return;

            const width = Number(value) || 1;
            const shape = getSelectedShape();
            if (shape) {
                // 更新选中图形的边框线宽度
                sketchLayer.updateShapeStrokeWidth(shape, width);
            } else {
                sketchLayer.strokeWidth = width;
            }
        }

        // 获取当前选中的图形
        function getSelectedShape() {
            if (typeof sketchLayer.getSelectedShape === 'function') {
                return sketchLayer.getSelectedShape();
            }
            return sketchLayer.selectedShape;
        }

        // 保存当前绘制的图形
        function saveShapes() {
            if (!sketchLayer) return;

            // 导出当前绘制的图形数据
            const data = sketchLayer.exportData();
            localStorage.setItem('sketch_shapes', JSON.stringify(data));
            alert(`保存成功，共 ${data.length} 个图形。`);
        }

        // 加载已保存的图形
        function loadShapes() {
            if (!sketchLayer) return;

            const savedShapes = localStorage.getItem('sketch_shapes');
            if (!savedShapes) {
                alert('没有已保存的图形数据。');
                return;
            }

            // 导入已保存的图形数据
            sketchLayer.importData(JSON.parse(savedShapes));
        }
    </script>
    
</body>
</html>