20220902

xiaoyong931011

2022-09-13 44208f351fe102080a9939afeb455851359df13a

20220902

 src/main/resources/templates/febs/views/modules/leader/leaderMapSetting.html

@@ -1,21 +1,24 @@
<div class="layui-fluid layui-anim febs-anim" id="febs-map-demo-test" lay-title="高德地图">
    <div class="layui-row febs-container">
        <div class="layui-card">
            <form class="layui-form layui-table-form" lay-filter="user-table-form">
                <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
                    <div class="input-card" style="width: 120px">
                        <button type="button" class="layui-btn layui-btn-danger" id="createPolygon" style="margin-bottom: 2px">新建围栏</button>
                    </div>
                    <div class="input-card" style="width: 120px">
                        <button type="button" class="layui-btn layui-btn-danger" id="open" style="margin-bottom: 2px">开始编辑</button>
                    </div>
                    <div class="input-card" style="width: 120px">
                        <button type="button" class="layui-btn layui-btn-danger" id="close" style="margin-bottom: 2px">结束编辑</button>
        <div class="layui-col-md12">
            <div class="layui-card">
                <button type="button" id="createPolygon" style="margin-bottom: 2px">新建围栏
                </button>
                <button type="button" id="open" style="margin-bottom: 2px">开始编辑
                </button>
                <button type="button" id="close" style="margin-bottom: 2px">结束编辑
                </button>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-row febs-container">
                        <div class="layui-card">
                            <div style="padding: .1rem;">
                                <div id="container" class="map"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div style="padding: .1rem;">
                <div id="container" class="map"></div>
            </div>
        </div>
    </div>
@@ -35,41 +38,79 @@
            center: [116.368904,39.913423],
            zoom: 16.8
        });
        var polyEditor = new AMap.PolygonEditor(map);
        // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
        var path = [
            new AMap.LngLat(116.368904,39.913423),
            new AMap.LngLat(116.382122,39.901176),
            new AMap.LngLat(116.387271,39.912501),
            new AMap.LngLat(116.398258,39.904600)
        ];
        var polyEditor = new AMap.PolyEditor(map);

        // 创建折线实例
        var polyline = new AMap.Polyline({
            path: path,
            borderWeight: 2, // 线条宽度，默认为 1
            strokeColor: 'red', // 线条颜色
            lineJoin: 'round' // 折线拐点连接处样式
        });

        // 将折线添加至地图实例
        map.add(polyline);

        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var path = [];
        // 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
        // path = [
        //     new AMap.LngLat(116.368904,39.913423),
        //     new AMap.LngLat(116.382122,39.901176),
        //     new AMap.LngLat(116.387271,39.912501),
        //     new AMap.LngLat(116.387272,39.912502),
        //     new AMap.LngLat(116.387273,39.912503),
        //     new AMap.LngLat(116.487274,39.812504),
        //     new AMap.LngLat(116.398258,39.904600)
        // ];
        map.on('click', function (e) {
            febs.alert.success('经度：' + e.lnglat.getLng() + '，纬度：' + e.lnglat.getLat());
            let lngLat = new AMap.LngLat(e.lnglat.getLng(),e.lnglat.getLat());
            path.push(lngLat);
            alert(path);


            var polyline = new AMap.Polyline({
                path: path,
                borderWeight: 2, // 线条宽度，默认为 1
                strokeColor: 'red', // 线条颜色
                lineJoin: 'round' // 折线拐点连接处样式
            });
            // 将折线添加至地图实例
            map.add(polyline);
        });


        // // 创建折线实例
        // var polyline = new AMap.Polyline({
        //     path: path,
        //     borderWeight: 2, // 线条宽度，默认为 1
        //     strokeColor: 'red', // 线条颜色
        //     lineJoin: 'round' // 折线拐点连接处样式
        // });
        //
        //
        //
        // // 将折线添加至地图实例
        // map.add(polyline);


        $createPolygon.on('click', function () {
            febs.alert.success('点击新建');
            polyEditor.close();
            polyEditor.open();
        });

        $open.on('click', function () {
            febs.alert.success('开始编辑');
            path.splice(path.length -1);


            alert(path);

            var polyline = new AMap.Polyline({
                path: path,
                borderWeight: 2, // 线条宽度，默认为 1
                strokeColor: 'red', // 线条颜色
                lineJoin: 'round' // 折线拐点连接处样式
            });
            // 将折线添加至地图实例
            map.add(polyline);
        });

        $close.on('click', function () {
            febs.alert.success('结束编辑');
        });

    });
</script>