czapp/pages/amap/fence/fence.js

(function () {
    var page = {
        init: function ($page, param) {
            // //地图初始化
            var map = new AMap.Map("fence-map", {
                center: [113.955439, 22.542956],//地图中心点
                zoom: 12 //地图显示的缩放级别
            });




            // // var polygonFence = new AMap.Polygon({
            // //     strokeColor: "#FF33FF", 
            // //     strokeWeight: 6,
            // //     strokeOpacity: 0.2,
            // //     fillOpacity: 0.4,
            // //     fillColor: '#1791fc',
            // //     zIndex: 50,
            // // })



            var fenceInfo = param.fenceInfo;
            var defaultPt = param.defaultLocation;
            var ableStatus = param.fenceAlarmStatus;

            if(ableStatus){
                $('#fence-switch').addClass('f-active');
            }
            console.log(param);




            var circleFence = new AMap.Circle({
                center: defaultPt,
                radius: fenceInfo.data.radius || 100, 
                strokeOpacity: 0,
                strokeWeight: 0,
                strokeOpacity: 0.2,
                fillOpacity: 0.3,
                fillColor : '#1791fc',
                zIndex: 50,
            });

            circleFence.setMap(map)
            map.setFitView(circleFence);

            // displayFence(fenceInfo);


            $page.find('#fence-switch').lrswitch();

            var rangeObj = $('#fence-radius');
            rangeObj[0].value = fenceInfo.data.radius || 100;
            $('#display-radius')[0].innerHTML = rangeObj[0].value;
            //获取要设置的半径
            function getSetRadius(){
                return rangeObj[0].value; 
            }

            $('#fence-radius').on('input',function(){
                $('#display-radius')[0].innerHTML = this.value;
                var radius = getSetRadius();
                circleFence.setRadius(radius);
                // setFenceView(circleFence);
                map.setFitView([ circleFence ]);
                
            });

            map.on('moveend', function(){
                var center = map.getCenter();
                circleFence.setCenter(center);
            });

            //保存
            $page.find('#save-fence').on('tap', function(){
                
                learun.layer.confirm('保存将会覆盖原围栏', function (_index) { 
                    if(_index === '1'){
                        var data = getPostData();
                        if(!data){
                            learun.layer.toast('围栏信息有误或者为空');
                            return;
                        }
                        postFence(data);
                    }else{
                        return;
                    }
                }, '保存围栏', ['否', '是']);
            });

            //获取提交数据
            function getPostData(){
                var fenceEnable = getAbleStatus();
                var radius = circleFence.getRadius();
                var circleCenter = circleFence.getCenter();
                var center = {lng: circleCenter.lng, lat:circleCenter.lat}
                var data = {
                    type: 'circle',
                    data: {radius: radius, center: center},
                    fenceAlarmEnable: fenceEnable
                };

                return data;
            }

            //获取启用状态
            function getAbleStatus(){
                var status = $('#fence-switch').hasClass('f-active');
                if(status){
                    return true;
                }else{
                    return false;
                }
            }



            //post围栏信息
            function postFence(data){
                learun.httppost(config.webapi+'?s=api/save_fence_info',data,function(res){
                    if(!res.success){
                        learun.layer.toast(res.message);
                        return;
                    }
                    learun.layer.toast('保存成功');
                });
            }


            
            
            //显示围栏(初始)
            // function displayFence(fenceInfo){
            //     if(!fenceInfo){
            //         circleFence.setCenter(defaultPt);
            //         var radius = getSetRadius();
            //         circleFence.setRadius(radius);
            //         // circleFence.setMap(map);
            //         map.setFitView([ circleFence ]);
            //         return;
            //     }

            //     var fence = fenceInfo;
            //     console.log(fence);
            //     if(fence.type == 'circle'){
            //         var pt = new AMap.LngLat(fence.data.center.lng, fence.data.center.lat);
            //         // circleFence.setCenter(pt);
            //         circleFence.setRadius(fence.data.radius);
            //         // circleFence.setMap(map);
            //         map.setFitView([ circleFence ]);
            //         return;
            //     }

            //     // if(fence.type == 'polygon'){
            //     //     var pts = [];
            //     //     var paths = fence.data.vertex;
                    
            //     //     paths.forEach(v => {
            //     //         pts.push([v.lng, v.lat]);
            //     //     });
            //     //     polygonFence.setPath(pts);
            //     //     polygonFence.setMap(map);
            //     //     map.setFitView([ polygonFence ]);
            //     //     return;
            //     // }
            // }





            

            
        }
    };

    return page;
})();