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.
 

964 lines
20 KiB

// pages/look/look.js
const $api = require('../../utils/gisApi').API;
const $apiT = require('../../utils/api').API;
const WKT = require('../../utils/terraformer-wkt-parser.min');
const gisUtil = require('../../utils/gitUtil')
const util = require('../../utils/util')
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+'年' });
} ;
Page({
/**
* 页面的初始数据
*/
data: {
satellite: 1,
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,
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,//搜索内容
},
// 地图搜索框
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(){//输入框输入内容
console.log(this.data.land_name);
$apiT.AJAX('get','applets/landlisted/page',{
landCode:this.data.land_name,
},true).then(data => {
console.log(data);
if(data.code == 0){
this.setData({
list_arr:data.data.records,
})
}
})
},
chooseFun(e){//选择看地列表
console.log(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(data => {
console.log(data);
if(data.code == 0){
let number = data.data[0].centerPoint;
console.log(number)
let l = number.indexOf('(')+1;
let z = number.indexOf(' ');
let r = number.indexOf(')');
console.log(l,z,r)
let log = number.substr(l,z-l);
let lag = number.substr(z,r-z);
console.log(lag,log)
let polygon = this.wkt2polygon(data.data[0].geom);
polygon.strokeColor = '#fe00fe';
polygon.strokeWidth = 2;
polygon.fillColor = '#00fe04' + util.ten2XO(50);
let polygons = [polygon];
this.setData({
polygons,
latitude:lag,
longitude:log,
})
}
})
},
wkt2polygon(geom) {
let geomPoints = WKT.parse(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,
zIndex: 1,
}
return polygon;
},
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
})
},
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,
})
},
openLandInfo(feature) {
this.setData({
dialogVisible: true,
});
global.selectFeature=feature;
// console.log(feature)
//tid 代表地块类型,1:已出让,2:挂牌中;3:拟挂牌。
let tid = feature.tid;//tid:1,2,3
//属性property 包含 地块id字段,按需使用。
let property =feature.properties;
//添加---接口对接---获取地块数据------以下全部替换
console.log('添加---接口对接---获取地块数据------以下全部替换')
//变量 tid 代表地块类型,1:已出让,2:挂牌中;3:拟挂牌。
//变量 property 包含 地块id字段,按需使用。
console.log(property);
this.setData({
titleLand:'G01-XXXXXXXXXXX03',
landListedId:'CQ20210617152223',
totalConsArea:'68749',
startingFloorPrice:'25784',
transferPrice:'23546',
auctionDate:'2021-07-20',
});
//---------------------------------------
},
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{
console.log('跳转到地块详情页面')
//跳转到地块详情页面 landListedId:'CQ20210617152223',
this.navigateToLandDetail(this.data.landListedId);
}
},
//跳转到地块详情页面
navigateToLandDetail(landListedId){
wx.navigateTo({
url: '/pages/look-detail/look-detail?active=1&landListedId='+landListedId,
})
},
// closeDialog: function () {
// let qdDialog = this.data.qdDialog;
// qdDialog.show = false;
// qdDialog.buttons = [];
// this.setData({ qdDialog: qdDialog })
// },
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,
} = 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.deletPolygon(id);
this.removeFeaturesToList(id);
} else {
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, 1);
}
break;
case 6:
// 小组团
if (state) {
this.deletPolygon(id);
} else {
this.getTypeRegion({
latitude,
longitude
}, id, 0);
}
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
}];
console.log(data);
this.setCircles(data, id);
}
break;
}
},
onMapTaped(e){
let that= this;
let {
latitude,
longitude
} = e.detail;
let point = {latitude,longitude} // 地图点击点的经纬度
let features = that.selectFeatureList(point);
console.log(features);
if(features && features.length>0){
let f = features[0];
// console.log(f);
// console.log(f);
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.map(item => {
return {
id: item.gid,
aid: id,
latitude: item.lat,
longitude: item.lon,
iconPath,
width: 12,
height: 16,
}
})
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--
}
}
this.setData({
markers
})
}
}
},
//设置圆环
setCircles(data, id) {
let {
circles
} = this.data
let makeArr = data.map(item => {
console.log('---')
console.log(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
})
}
},
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
})
}
},
showCenterLocation(centerPoint){
let id = -1;
let{
latitude,
longitude,
}=centerPoint;
this.clearPoint(id);
let {
markers
} = this.data
let mark = {
aid: id,
id: id,
latitude,
longitude,
width: 16,
height:24,
}
markers.push(mark)
this.setData({
markers: markers
})
},
//定位当前
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,
},
})
that.showCenterLocation({latitude,longitude})
}
})
},
markertap(e) {
},
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 => {
that.setWKT(data, id);
that.addFeaturesToList(data,id);
})
},
// 挂牌中
inQuotation(res, id) {
const that = this;
$api.getLandListing({
lon: res.longitude,
lat: res.latitude
}).then(data => {
that.setWKT(data, id);
that.addFeaturesToList(data,id);
})
},
// 待挂牌
toBelisted(res, id) {
const that = this;
$api.getLandToList({
lon: res.longitude,
lat: res.latitude
}).then(data => {
that.setWKT(data, id);
that.addFeaturesToList(data,id);
})
},
addFeaturesToList(data, tid){
let key= 'key'+tid;
let features = data.map(item => {
let geomPoints = WKT.parse(item.geom).coordinates;
let properties =item;
properties.tid=tid;//类型
let polygon ={
key,tid,properties,
type: "Feature",
geometry: {
type: "Polygon",
coordinates:geomPoints
}
}
return polygon;
});
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.geometry.coordinates[0]);
if(hitTest){
selectList.push(feature);
if(selectList.length>=maxCount){
break;
}
}
}
return selectList
},
// 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 strokeColor = ''+ item.line_color + util.ten2XO(item.line_opaqueness);
let strokeWidth = item.strokeWidth ? Number(item.strokeWidth):2;
let fillColor = ''+ item.fill_color + util.ten2XO(item.fill_opaqueness);
let polygon = {
points,
strokeColor,
strokeWidth,
fillColor,
zIndex: 1,
id
}
return polygon
});
polygons = polygons.concat(newPolygons);
this.setData({
polygons
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
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,
}
)
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 () {
}
})