You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
511 lines
9.5 KiB
511 lines
9.5 KiB
// pages/look/look.js |
|
const $api = require('../../utils/gisApi').API; |
|
const WKT = require('../../utils/terraformer-wkt-parser.min'); |
|
Page({ |
|
|
|
/** |
|
* 页面的初始数据 |
|
*/ |
|
data: { |
|
satellite: 1, |
|
scale: 13, |
|
latitude: 29.543812, |
|
longitude: 106.434042, |
|
markers: [], |
|
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 |
|
}] |
|
}, |
|
|
|
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 = e.currentTarget.dataset.id |
|
console.log(id) |
|
let { |
|
latitude, |
|
longitude, |
|
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.deletPolygon(id); |
|
} else { |
|
this.inWhich({ |
|
latitude, |
|
longitude |
|
}, id); |
|
} |
|
break; |
|
case 2: |
|
// 挂牌中 |
|
if (state) { |
|
this.deletPolygon(id); |
|
} else { |
|
this.inQuotation({ |
|
latitude, |
|
longitude |
|
}, id); |
|
} |
|
break; |
|
case 3: |
|
// 待挂牌 |
|
if (state) { |
|
this.deletPolygon(id); |
|
} else { |
|
this.toBelisted({ |
|
latitude, |
|
longitude |
|
}, id); |
|
} |
|
break; |
|
case 4: |
|
// MORE |
|
break; |
|
case 5: |
|
// 配套 |
|
if (state) { |
|
this.clearPoint(id); |
|
} else { |
|
this.getComplete({ |
|
latitude, |
|
longitude |
|
}, id); |
|
} |
|
break; |
|
case 6: |
|
// 环线 |
|
if (state) { |
|
this.deletPolygon(id); |
|
} else { |
|
this.getLoop({ |
|
latitude, |
|
longitude |
|
}, id); |
|
} |
|
break; |
|
case 7: |
|
//行政区 |
|
if (state) { |
|
this.deletPolygon(id); |
|
} else { |
|
this.getRegion({ |
|
latitude, |
|
longitude |
|
}, id); |
|
} |
|
break; |
|
case 8: |
|
// 大组团 |
|
if (state) { |
|
this.deletPolygon(id); |
|
} else { |
|
this.getTypeRegion({ |
|
latitude, |
|
longitude |
|
}, id, 1); |
|
} |
|
break; |
|
case 9: |
|
// 小组团 |
|
if (state) { |
|
this.deletPolygon(id); |
|
} else { |
|
this.getTypeRegion({ |
|
latitude, |
|
longitude |
|
}, id, 0); |
|
} |
|
break; |
|
} |
|
}, |
|
|
|
// 清除地块 |
|
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.map(item => { |
|
return { |
|
id: item.gid, |
|
aid: id, |
|
latitude: item.lat, |
|
longitude: item.lon, |
|
iconPath, |
|
width: 40, |
|
height: 45, |
|
} |
|
}) |
|
if (markers.length > 0) { |
|
markers = markers.concat(makeArr) |
|
this.setData({ |
|
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-- |
|
} |
|
} |
|
console.log('markers', markers); |
|
this.setData({ |
|
markers |
|
}) |
|
} |
|
} |
|
}, |
|
|
|
mapTabItem(e) { |
|
let satellite = e.currentTarget.dataset.id |
|
if (satellite !== this.data.satellite) { |
|
this.setData({ |
|
satellite |
|
}) |
|
} |
|
}, |
|
|
|
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) { |
|
res = { |
|
latitude: 29.6267, |
|
longitude: 106.5682 |
|
}; //测试数据(发布时删除) |
|
let latitude = res.latitude |
|
let longitude = res.longitude |
|
let { |
|
markers |
|
} = that.data |
|
let mark = { |
|
id: -1, |
|
latitude, |
|
longitude, |
|
} |
|
markers.push(mark) |
|
that.setData({ |
|
latitude: latitude, |
|
longitude: longitude, |
|
markers: markers |
|
}) |
|
} |
|
}) |
|
}, |
|
|
|
//点击MORE标记点 |
|
markertap(e) { |
|
let id = e.detail.markerId |
|
wx.navigateTo({ |
|
url: '/pages/look-list/look-list?id=' + id, |
|
}) |
|
}, |
|
|
|
// 已出让 |
|
inWhich(res, id) { |
|
const that = this; |
|
let { |
|
start, |
|
end |
|
} = this.data; |
|
$api.getLandListing({ |
|
lon: res.longitude, |
|
lat: res.latitude, |
|
start: `${start}-01-01`, |
|
end: `${end}-01-01`, |
|
}).then(data => { |
|
that.setWKT(data, id); |
|
}) |
|
}, |
|
|
|
// 挂牌中 |
|
inQuotation(res, id) { |
|
const that = this; |
|
$api.getLandListing({ |
|
lon: res.longitude, |
|
lat: res.latitude |
|
}).then(data => { |
|
that.setWKT(data, id); |
|
}) |
|
}, |
|
|
|
// 待挂牌 |
|
toBelisted(res, id) { |
|
const that = this; |
|
$api.getLandToList({ |
|
lon: res.longitude, |
|
lat: res.latitude |
|
}).then(data => { |
|
that.setWKT(data, id); |
|
}) |
|
}, |
|
|
|
// MORE地块 |
|
getMoreInfo(res, id) { |
|
|
|
}, |
|
|
|
// 配套 |
|
getComplete(res, id) { |
|
const that = this; |
|
$api.getFacilitiesByLocation({ |
|
lon: res.longitude, |
|
lat: res.latitude |
|
}).then(data => { |
|
let iconPath = "../../assets/images/user-address.png"; |
|
that.setPoint(data, id, iconPath); |
|
}) |
|
}, |
|
|
|
// 环线数据 |
|
getLoop(res, id) { |
|
const that = this; |
|
$api.getLoopLine({ |
|
lon: res.longitude, |
|
lat: res.latitude |
|
}).then(data => { |
|
that.setWKT(data, id); |
|
}) |
|
}, |
|
|
|
//行政区面数据 |
|
getRegion(res, id) { |
|
const that = this; |
|
$api.getRegionByLocation({ |
|
lon: res.longitude, |
|
lat: res.latitude |
|
}).then(data => { |
|
that.setWKT(data, id); |
|
}) |
|
}, |
|
|
|
// 组团数据 |
|
getTypeRegion(res, id, type) { |
|
const that = this; |
|
$api.getTypeRegionByLocation({ |
|
lon: res.longitude, |
|
lat: res.latitude, |
|
type |
|
}).then(data => { |
|
that.setWKT(data, id); |
|
}) |
|
}, |
|
|
|
// 地块数据解析 |
|
setWKT(data, id) { |
|
let { |
|
polygons |
|
} = this.data; |
|
let newPolygons = data.map(item => { |
|
let geomPoints = WKT.parse(item.geom); |
|
let points = []; |
|
geomPoints.coordinates[0].forEach(ele => { |
|
if (typeof (ele[0]) === 'number') { |
|
points.push({ |
|
longitude: ele[0], |
|
latitude: ele[1] |
|
}) |
|
} else { |
|
points = ele.map(once => { |
|
let lonlat = { |
|
longitude: once[0], |
|
latitude: once[1] |
|
} |
|
return lonlat |
|
}) |
|
} |
|
}) |
|
let polygon = { |
|
points, |
|
strokeColor: '#FFF', |
|
fillColor: '#FFCC4050', //`#${item.fillcolor}`, |
|
zIndex: 1, |
|
strokeWidth: 2, |
|
id |
|
} |
|
return polygon |
|
}); |
|
polygons = polygons.concat(newPolygons); |
|
this.setData({ |
|
polygons |
|
}) |
|
}, |
|
|
|
|
|
/** |
|
* 生命周期函数--监听页面加载 |
|
*/ |
|
onLoad: function (options) { |
|
this.scaleBack() |
|
}, |
|
|
|
/** |
|
* 生命周期函数--监听页面初次渲染完成 |
|
*/ |
|
onReady: function () { |
|
|
|
}, |
|
|
|
/** |
|
* 生命周期函数--监听页面显示 |
|
*/ |
|
onShow: function () { |
|
if (typeof this.getTabBar === 'function' && |
|
this.getTabBar()) { |
|
this.getTabBar().setData({ |
|
selected: 1 |
|
}) |
|
} |
|
}, |
|
|
|
/** |
|
* 生命周期函数--监听页面隐藏 |
|
*/ |
|
onHide: function () { |
|
|
|
}, |
|
|
|
/** |
|
* 生命周期函数--监听页面卸载 |
|
*/ |
|
onUnload: function () { |
|
|
|
}, |
|
|
|
/** |
|
* 页面相关事件处理函数--监听用户下拉动作 |
|
*/ |
|
onPullDownRefresh: function () { |
|
|
|
}, |
|
|
|
/** |
|
* 页面上拉触底事件的处理函数 |
|
*/ |
|
onReachBottom: function () { |
|
|
|
}, |
|
|
|
/** |
|
* 用户点击右上角分享 |
|
*/ |
|
onShareAppMessage: function () { |
|
|
|
} |
|
}) |