mini_program/pages/look/look.js

// pages/look/look.js
const $api = require('../../utils/gisApi').API;
const $apiT = require('../../utils/api').API;
const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
const gisUtil = require('../../utils/gitUtil')
let qqmapsdk;

const global = {};
//年份范围
const date = new Date();
const year = date.getFullYear();
const yearSpan = 3;
const max = year + yearSpan;
const min = 1949;
const arryList = [];
for (let idx = min; idx < max; idx++) {
    arryList.push({
        index: idx - min,
        value: idx,
        label: '' + idx + '年'
    });
};
const CITY = wx.getStorageSync('city')
let start;

Page({
    /**
     * 页面的初始数据
     */
    data: {
        cityList: [],
        cityIndex: 0,
        cityName: CITY,
        switchYear: true,
        satellite: 2,
        scale: 13,
        latitude: 29.543812,
        longitude: 106.434042,
        centerLocation: {
            latitude: 29.543812,
            longitude: 106.434042,
        },
        markers: [],
        circles: [],
        polygons: [],
        start: '2015',
        end: '2020',
        actives: [],
        tabs: [{
            id: 2,
            name: '挂牌中',
            state: false
        }, {
            id: 3,
            name: '待挂牌',
            state: false
        }, {
            id: 4,
            name: 'MORE',
            state: false
        }, {
            id: 5,
            name: '配套',
            state: false
        }, {
            id: 6,
            name: '环线',
            state: false
        }, {
            id: 7,
            name: '行政区',
            state: false
        }, {
            id: 8,
            name: '大组团',
            state: false
        }, {
            id: 9,
            name: '小组团',
            state: false
        }],
        halfScreenDialogVisible: false,
        visionDialogVisible: false,
        dialogVisible: false,
        buttons: [{
            text: '取消'
        }, {
            text: '详情'
        }],
        titleLand: 'G01-XXXXXXXXXXX02',
        landListedId: 'CQ20210617152223',
        totalConsArea: '42356',
        startingFloorPrice: '45852',
        transferPrice: '12553',
        auctionDate: '2021-07-18',
        years: arryList,
        indexStart: 0,
        indexEnd: 0,
        // 搜索框
        is_search: false,
        is_focusing: false, //是否聚焦
        is_searchList: false, //是否显示列表
        land_name: '', //土地名称
        list_arr: null, //搜索内容
    },
    //切换视图
    changeVision() {
        this.setData({
            visionDialogVisible: true
        });
    },
    closeVisionDialog() {
        this.setData({
            visionDialogVisible: false
        });
    },
    // 地图搜索框
    searchFun() {
        this.setData({
            is_search: true,
            is_focusing: true,
            is_searchList: true,
        })
    },

    escFun() { //关闭弹窗
        this.setData({
            land_name: '',
            is_search: false,
            is_focusing: false,
            is_searchList: false,
            list_arr: null,
        })
    },
    // 清空搜索内容
    emptyFun() {
        this.setData({
            land_name: '',
            is_focusing: true,
        })
        this.inputFun();
    },
    inputFun() { //输入框输入内容
        $apiT.AJAX('get', 'applets/landlisted/page', {
            landCode: this.data.land_name,
        }, true).then(data => {
            if (data.code == 0) {
                this.setData({
                    list_arr: data.data.records,
                })
            }
        })
    },
    chooseFun(e) { //选择看地列表
        let item = e.currentTarget.dataset.item;
        this.setData({
            land_name: item.landCode,
            is_searchList: false,
            is_focusing: false,
            list_arr: null
        })
        this.getLatitude(item.landListedId);
    },
    // 根据id获取经纬度
    getLatitude(landListedId) {
        $apiT.AJAX('GET', 'applets/landlistedlonlat/list/' + landListedId, {
            landListedId: landListedId,
        }, true).then(res => {
            if (res && res.data && res.data.length > 0) {
                if (res.data[0].centerPoint) {
                    let centerPoint = res.data[0].centerPoint;
                    this.setData({
                        longitude: centerPoint[0],
                        latitude: centerPoint[1]
                    })
                    gisUtil.setWKT(this, res, 2)
                    this.addFeaturesToList(res, 2);
                }
            }
        })
    },
    bindPickerChangeStart(e) {
        let sIdx = Number(e.detail.value);
        if (sIdx > this.data.indexEnd) {
            sIdx = this.data.indexEnd;
        }
        this.setData({
            start: arryList[sIdx].value,
            indexStart: sIdx
        })
        this.deletPolygon(1);
        this.removeFeaturesToList(1);
        this.inWhich({
            latitude: 0,
            longitude: 0
        }, 1);
    },
    bindPickerChangeEnd(e) {
        let eIdx = Number(e.detail.value);
        if (eIdx < this.data.indexStart) {
            eIdx = this.data.indexStart;
        }
        this.setData({
            end: arryList[eIdx].value,
            indexEnd: eIdx,
        })
        this.deletPolygon(1);
        this.removeFeaturesToList(1);
        this.inWhich({
            latitude: 0,
            longitude: 0
        }, 1);
    },
    openLandInfo(feature) {
        this.setData({
            dialogVisible: true,
        });
        global.selectFeature = feature;
        //tid 代表地块类型，1:已出让，2:挂牌中；3：拟挂牌。
        let tid = feature.id; //tid:1,2,3
        //属性property 包含 地块id字段，按需使用。
        let property = feature.properties;
        if (tid == 1 || tid == 2) {
            $apiT.AJAX('GET', 'applets/landlisted/' + (property.landId), true).then(res => {
                this.setData({
                    type: 'landlisted',
                    titleLand: res.data.landCode,
                    landListedId: res.data.landListedId,
                    totalConsArea: res.data.totalConsArea,
                    startingFloorPrice: res.data.startingFloorPrice,
                    transferPrice: res.data.transferPrice,
                    auctionDate: res.data.auctionDate,
                });
            })
        } else {
            $apiT.AJAX('GET', 'applets/landtolist/' + (property.landId), true).then(res => {
                this.setData({
                    type: 'landtolist',
                    titleLand: res.data.landCode,
                    landListedId: res.data.proposedseriaId,
                    totalConsArea: res.data.totalConsArea,
                    startingFloorPrice: res.data.startingFloorPrice,
                    transferPrice: res.data.transferPrice,
                    auctionDate: res.data.auctionDate,
                });
            })

        }
        //---------------------------------------
    },

    showLayerSetting() {
        this.setData({
            halfScreenDialogVisible: true
        });
    },
    closeLayerSetting(e) {
        this.setData({
            halfScreenDialogVisible: false
        });
    },
    tapDialogButton(e) {
        let index = e.detail.index;
        if (index === 0) {
            this.setData({
                dialogVisible: false,
                landListedId: '',
                titleLand: '',
                totalConsArea: '',
                startingFloorPrice: '',
                transferPrice: '',
                auctionDate: '',
            });
            global.selectFeature = null;
        } else {
            this.navigateToLandDetail(this.data.landListedId, this.data.type);
        }
    },
    //跳转到地块详情页面
    navigateToLandDetail(id, type) {
        if (type === 'landlisted') {
            wx.navigateTo({
                url: '/pages/look-detail/look-detail?active=1&id=' + id,
            })
        } else if (type === 'landtolist') {
            wx.navigateTo({
                url: '/pages/lookStay-detail/lookStay-detail?id=' + id,
            })
        }
    },

    comeList() {
        wx.navigateTo({
            url: '/pages/look-list/look-list',
        })
    },

    bindstartChange(e) {
        this.setData({
            start: e.detail.value
        })
    },

    bindendChange(e) {
        this.setData({
            end: e.detail.value
        })
    },

    // 功能切换
    checkBtn(e) {
        let id;
        if (e.currentTarget) {
            id = e.currentTarget.dataset.id
        } else {
            id = e
        }
        let {
            latitude,
            longitude,
        } = this.data.centerLocation;
        let {
            actives
        } = this.data;
        let state = false;
        let hasAc = actives.some(item => item === id);
        if (hasAc) {
            for (let index = 0; index < actives.length; index++) {
                const element = actives[index];
                if (element === id) {
                    actives.splice(index, 1)
                }
            }
            state = true;
        } else {
            actives.push(id);
        }
        this.setData({
            actives
        })
        switch (id) {
            case 1:
                // 已出让
                if (state) {
                    this.setData({
                        switchYear: true
                    })
                    this.deletPolygon(id);
                    this.removeFeaturesToList(id);
                } else {
                    this.setData({
                        switchYear: false
                    })
                    this.inWhich({
                        latitude,
                        longitude
                    }, id);
                }
                break;
            case 2:
                // 挂牌中
                if (state) {
                    this.deletPolygon(id);
                    this.removeFeaturesToList(id);
                } else {
                    this.inQuotation({
                        latitude,
                        longitude
                    }, id);
                }
                break;
            case 3:
                // 待挂牌
                if (state) {
                    this.deletPolygon(id);
                    this.removeFeaturesToList(id);
                } else {
                    this.toBelisted({
                        latitude,
                        longitude
                    }, id);
                }
                break;
            case 4:
                //行政区
                if (state) {
                    this.deletPolygon(id);
                } else {
                    this.getRegion({
                        latitude,
                        longitude
                    }, id);
                }
                break;
            case 5:
                // 大组团
                if (state) {
                    this.deletPolygon(id);
                } else {
                    this.getTypeRegion({
                        latitude,
                        longitude
                    }, id, 'dazutuan');
                }
                break;
            case 6:
                // 小组团
                if (state) {
                    this.deletPolygon(id);
                } else {
                    this.getTypeRegion({
                        latitude,
                        longitude
                    }, id, 'xiaozutuan');
                }
                break;
            case 7:
                // 配套
                if (state) {
                    this.clearPoint(id);
                } else {
                    this.getComplete({
                        latitude,
                        longitude
                    }, id);
                }
                break;
            case 8:
                // 环线
                if (state) {
                    this.deletPolygon(id);
                } else {
                    this.getLoop({
                        latitude,
                        longitude
                    }, id);
                }

                break;
            case 9:
                // 3KM圈
                if (state) {
                    this.clearCircles(id);
                } else {
                    let data = [{
                        gid: 1,
                        latitude,
                        longitude
                    }];
                    this.setCircles(data, id);
                }
                break;
        }
    },

    onMapTaped(e) {
        let that = this;
        let {
            latitude,
            longitude
        } = e.detail;
        let point = {
            latitude,
            longitude
        } // 地图点击点的经纬度
        let features = that.selectFeatureList(point);
        if (features && features.length > 0) {
            let f = features[0];
            that.openLandInfo(f)
        }
    },
    // 清除地块
    deletPolygon(id) {
        let {
            polygons
        } = this.data;
        if (polygons.length > 0) {
            let hasPo = polygons.some(item => item.id === id);
            if (hasPo) {
                for (let index = 0; index < polygons.length; index++) {
                    if (polygons[index].id === id) {
                        polygons.splice(index, 1);
                        index--
                    }
                }
                this.setData({
                    polygons
                })
            }
        }
    },

    // 添加标记
    setPoint(data, id, iconPath) {
        let {
            markers
        } = this.data
        let makeArr = data.data.map(item => {
            return {
                id: item.gid,
                aid: id,
                latitude: item.lat,
                longitude: item.lon,
                width: 12,
                height: 16,
            }
        })
        if (markers.length > 0) {
            markers = markers.concat(makeArr)
            this.setData({
                markers: markers
            })
        }
    },
    // 清除标记
    clearPoint(id) {
        let {
            markers
        } = this.data;
        if (markers.length > 0) {
            let hasPo = markers.some(item => item.aid === id);
            if (hasPo) {
                for (let index = 0; index < markers.length; index++) {
                    if (markers[index].aid === id) {
                        markers.splice(index, 1);
                        index--
                    }
                }
                this.setData({
                    markers
                })
            }
        }
    },

    //设置圆环
    setCircles(data, id) {
        let {
            circles
        } = this.data

        let makeArr = data.map(item => {
            let {
                latitude,
                longitude
            } = item;
            return {
                id: item.gid,
                aid: id,
                latitude: latitude,
                longitude: longitude,
                color: '#2317da66',
                fillColor: '#7cb5ec88',
                radius: 3000,
                strokeWidth: 2
            }
        })
        circles = makeArr;
        this.setData({
            circles
        })
    },
    //清除圆环
    clearCircles(id) {
        let {
            circles
        } = this.data;
        if (circles.length > 0) {
            let hasPo = circles.some(item => item.aid === id);
            if (hasPo) {
                for (let index = 0; index < circles.length; index++) {
                    if (circles[index].aid === id) {
                        circles.splice(index, 1);
                        index--
                    }
                }
                this.setData({
                    circles
                })
            }
        }
    },
    mapTabItem(e) {
        let satellite = e.currentTarget.dataset.id
        if (satellite !== this.data.satellite) {
            this.setData({
                satellite,
                visionDialogVisible: false
            })
        }
    },

    scaleDown(e) {
        let type = e.currentTarget.dataset.type
        let {
            scale
        } = this.data
        if (type === 'add' && scale < 20) {
            this.setData({
                scale: ++scale
            })
        } else if (type === 'reduce' && scale > 3) {
            this.setData({
                scale: --scale
            })
        }
    },
    //定位当前
    scaleBack() {
        let that = this;
        wx.getLocation({
            type: 'gcj02',
            success: function (res) {
                let latitude = Number(res.latitude)
                let longitude = Number(res.longitude)
                that.setData({
                    latitude: latitude,
                    longitude: longitude,
                    centerLocation: {
                        latitude,
                        longitude,
                    },
                })
            }
        })
    },

    regionchange(e) {
        if (e.type === 'end') {
            let {
                latitude,
                longitude
            } = e.detail.centerLocation;
            this.data.longitude = longitude;
            this.data.longitude = longitude;

            this.setData({
                centerLocation: e.detail.centerLocation
            });
            let {
                actives
            } = this.data;
            let id9 = 9;
            let state9 = actives.some(item => item === id9);
            if (state9) {
                this.clearCircles(id9);
                let data = [{
                    latitude,
                    longitude
                }];
                this.setCircles(data, id9);
            } else {
                this.clearCircles(id9);
            }
            let id7 = 7;
            let state7 = actives.some(item => item === id7);
            if (state7) {
                this.clearPoint(id7);
                this.getComplete({
                    latitude,
                    longitude
                }, id7);
            } else {
                this.clearPoint(7);
            }
            //中心点--重绘
            // this.showCenterLocation({
            //     latitude,
            //     longitude
            // })

        }
    },
    // 已出让
    inWhich(res, id) {
        const that = this;
        let {
            start,
            end
        } = this.data;
        $api.getLandList({
            lon: res.longitude,
            lat: res.latitude,
            start: `${start}-01-01`,
            end: `${end}-12-31`,
        }).then(data => {
            gisUtil.setWKT(that, data, id)
            that.addFeaturesToList(data, id);
        })
    },

    // 挂牌中
    inQuotation(res, id) {
        const that = this;
        $api.getLandListing({
            lon: res.longitude,
            lat: res.latitude
        }).then(data => {
            gisUtil.setWKT(that, data, id)
            that.addFeaturesToList(data, id);
        })
    },

    // 待挂牌
    toBelisted(res, id) {
        const that = this;
        $api.getLandToList({
            lon: res.longitude,
            lat: res.latitude
        }).then(data => {
            gisUtil.setWKT(that, data, id)
            that.addFeaturesToList(data, id);
        })
    },

    addFeaturesToList(data, tid) {
        let key = 'key' + tid;
        if (data && data.data && data.data.length > 0) {
            let features = data.data.map(item => {
                return item.feature;
            });
            if (global.features[key] && global.features[key].length > 0) {
                global.features[key] = global.features[key].concat(features)
            } else {
                global.features[key] = features;
            }
        }
    },
    removeFeaturesToList(tid) {
        let key = 'key' + tid;
        if (global.features[key] && global.features[key].length > 0) {
            global.features[key] = [];
        }
    },
    selectFeatureList(pt, maxCount) {
        maxCount = maxCount || 1;
        let x = pt.longitude;
        let y = pt.latitude;
        let selectList = [];
        let features = [];
        if (global.features['key1'] && global.features['key1'].length > 0) {
            features = features.concat(global.features['key1']);
        }
        if (global.features['key2'] && global.features['key2'].length > 0) {
            features = features.concat(global.features['key2']);
        }
        if (global.features['key3'] && global.features['key3'].length > 0) {
            features = features.concat(global.features['key3']);
        }
        for (let i = 0; i < features.length; i++) {
            let feature = features[i];
            let hitTest = gisUtil.isPointInPolygon(y, x, feature.coordinates);
            if (hitTest) {
                selectList.push(feature);
                if (selectList.length >= maxCount) {
                    break;
                }
            }
        }
        return selectList
    },
    // 配套
    getComplete(res, id) {
        const that = this;
        $api.getFacilitiesByLocation({
            lon: res.longitude,
            lat: res.latitude
        }).then(data => {
            let iconPath = "../../assets/images/add.png";
            that.setPoint(data, id, iconPath);
        })
    },
    // 环线数据
    getLoop(res, id) {
        const that = this;
        $api.getLoopLine({
            lon: res.longitude,
            lat: res.latitude
        }).then(data => {
            gisUtil.setWKT(that, data, id)
        })
    },

    //行政区面数据
    getRegion(res, id) {
        const that = this;
        $api.getRegionByLocation({
            lon: res.longitude,
            lat: res.latitude
        }).then(data => {
            gisUtil.setWKT(that, data, id)
        })
    },

    // 组团数据
    getTypeRegion(res, id, type) {
        const that = this;
        $api.getTypeRegionByLocation({
            lon: res.longitude,
            lat: res.latitude,
            type
        }).then(data => {
            gisUtil.setWKT(that, data, id)
        })
    },
    bindupdated(e) {
        if (start) {
            let time = (new Date().getTime() - start) / 1000
            console.log("渲染耗时====》" + time);
        }
    },
    bindAddressChange(e) {
        let city = this.data.cityList[e.detail.value]
        wx.setStorageSync('city', city)
        this.setCity(city);
    },
    setCity: function (city) {
        let index = this.data.cityList.indexOf(city)
        let that = this;
        qqmapsdk.geocoder({
            address: city,
            sig: 'FvbPshzJis7X9P4A5wbkLVnnOuYdtv',
            success: function (res) {
                var latitude = res.result.location.lat;
                var longitude = res.result.location.lng;
                that.setData({
                    latitude: latitude,
                    longitude: longitude,
                })
            }
        })
        this.setData({
            cityName: city,
            cityIndex: index
        })
        this.setData({
            actives: [2]
        })
        let {
            latitude,
            longitude,
        } = this.data.centerLocation;
        this.deletPolygon(2);
        this.removeFeaturesToList(2);
        this.inQuotation({
            latitude,
            longitude
        }, 2);
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        qqmapsdk = new QQMapWX({
            key: '5LUBZ-EIXCU-4D4VL-433ZJ-TZDAH-YABL6'
        });
        global.bboxkey = 0;
        global.features = {
            key1: [],
            key2: [],
            key3: [],
        };
        let sIdx = year - yearSpan - min;
        let eIdx = year - min;
        this.setData({
            indexStart: sIdx,
            indexEnd: eIdx,
            start: arryList[sIdx].value,
            end: arryList[eIdx].value,
        })
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        if (typeof this.getTabBar === 'function' &&
            this.getTabBar()) {
            this.getTabBar().setData({
                selected: 1
            })
        }
        $apiT.getCityList().then(res => {
            this.setData({
                cityList: res.data
            })
        })
        let city = wx.getStorageSync('city')
        this.setCity(city)
    },
    onShareAppMessage: function () {
        return {
            title: '艾儿数据',
            path: 'pages/look/look', // 路径，传递参数到指定页面。
        }
    },
    onShareTimeline() {
        return {
            title: '艾儿数据',
            path: 'pages/look/look', // 路径，传递参数到指定页面。
        }
    }
})