|
@@ -42,7 +42,10 @@ class Index extends Component {
|
|
|
isFooterTipsShow: false,
|
|
|
isEnablesatellite: false,
|
|
|
timer: null,
|
|
|
- prevCenterLocation: {},
|
|
|
+ prevCenterLocation: {
|
|
|
+ longitude: '115.852386',
|
|
|
+ latitude: '28.684076',
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -55,200 +58,72 @@ class Index extends Component {
|
|
|
|
|
|
componentWillMount () {
|
|
|
Taro.$AHU(this)
|
|
|
- const { longitude, latitude } = this.$router.params
|
|
|
- if (longitude && latitude) {
|
|
|
- this.setState({
|
|
|
- isEnablesatellite: true,
|
|
|
- mapDiyObj: {
|
|
|
- cScale: 16,
|
|
|
- center: [longitude, latitude]
|
|
|
- },
|
|
|
- prevCenterLocation: {
|
|
|
- longitude,
|
|
|
- latitude,
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- const { id } = this.$router.params
|
|
|
- if (id) {
|
|
|
- this.setState({
|
|
|
- curUuid: id
|
|
|
- }, () => {
|
|
|
- this.getData()
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.getData()
|
|
|
- }
|
|
|
+ this.getCurESData()
|
|
|
}
|
|
|
|
|
|
- getData () {
|
|
|
- const { curUuid } = this.state
|
|
|
- Taro.api.other.apimapcoordindetail({uuid: curUuid}).then(res => {
|
|
|
- const data = JSON.parse(res.data)
|
|
|
- let polygons = data.polygons
|
|
|
- polygons.map((item, index) => {
|
|
|
+
|
|
|
+
|
|
|
+ getCurESData () {
|
|
|
+ const { prevCenterLocation } = this.state
|
|
|
+ Taro.api.other.apimapcoordinaround({
|
|
|
+ longitude: prevCenterLocation.longitude,
|
|
|
+ latitude: prevCenterLocation.latitude,
|
|
|
+ distance: 3000,
|
|
|
+ map_id: '98d97887-3bfe-417d-89f8-113dc2e70abc'
|
|
|
+ }).then(res => {
|
|
|
+ let list = res || []
|
|
|
+ let polygons = []
|
|
|
+ let markerData = []
|
|
|
+ list.forEach((op, index) => {
|
|
|
+ let item = JSON.parse(op.data)
|
|
|
let points = []
|
|
|
- item.id = 10000 + index
|
|
|
item.path.forEach(p => {
|
|
|
points.push({
|
|
|
latitude: p[1],
|
|
|
longitude: p[0],
|
|
|
})
|
|
|
})
|
|
|
- item.points = points
|
|
|
- item.strokeWidth = item.strokeWeight
|
|
|
- if (item.fillColor === '#ff0') {
|
|
|
- item.fillColor = '#ffff0080'
|
|
|
- } else {
|
|
|
- item.fillColor = item.fillColor + 80
|
|
|
- }
|
|
|
- // item.fillColor = item.fillColor + (item.fillOpacity * 100)
|
|
|
- // item.strokeColor = item.strokeColor + (item.strokeOpacity * 100)
|
|
|
- })
|
|
|
- let mapDiyObj = data.mapDiyObj
|
|
|
- mapDiyObj.cScale = 12
|
|
|
- let markerData = [...data.markerData]
|
|
|
- markerData.map((item, index) => {
|
|
|
- item.longitude = item.position[0]
|
|
|
- item.latitude = item.position[1]
|
|
|
- item.id = 50000 + index
|
|
|
- // item.alpha = 0
|
|
|
- item.iconPath = 'https://icon.honglouplus.com/icon_1px.png'
|
|
|
- item.width = 0
|
|
|
- item.height = 0
|
|
|
- item.zIndex = 99
|
|
|
- item.callout = {
|
|
|
- content: `${item.text}`,
|
|
|
- color: '#fff',
|
|
|
- bgColor: '#369af7',
|
|
|
- display: 'ALWAYS',
|
|
|
- padding: '6px 10px',
|
|
|
- textAlign: 'center',
|
|
|
- borderRadius: '10',
|
|
|
+ let fillColor = item.fillColor + 80
|
|
|
+ if (item.fillColor === '#ff0') fillColor = '#ffff0080'
|
|
|
+ if (item.fillColor === '#999') fillColor = '#99999980'
|
|
|
+ polygons.push({
|
|
|
+ ...item,
|
|
|
+ id: 10000 + index,
|
|
|
+ points,
|
|
|
+ strokeWidth: item.strokeWeight,
|
|
|
+ fillColor
|
|
|
+ })
|
|
|
+ let calloutContent = item.text
|
|
|
+ if ((item.estateObj && item.estateObj.length > 10) || (item.schoolObj && item.schoolObj.length > 10)) {
|
|
|
+ calloutContent += '>'
|
|
|
}
|
|
|
+ markerData.push({
|
|
|
+ latitude: op.latitude,
|
|
|
+ longitude: op.longitude,
|
|
|
+ id: 20000 + index,
|
|
|
+ iconPath: 'https://icon.honglouplus.com/icon_1px.png',
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ zIndex: 99,
|
|
|
+ callout: {
|
|
|
+ content: calloutContent,
|
|
|
+ color: item.fillColor === '#ff0' ? '#FFC82C' : '#fff',
|
|
|
+ bgColor: item.fillColor || '#369af7',
|
|
|
+ display: 'ALWAYS',
|
|
|
+ padding: '6px 10px',
|
|
|
+ textAlign: 'center',
|
|
|
+ borderRadius: '10',
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
- const curScale = mapDiyObj.cScale
|
|
|
- this.setState({
|
|
|
- curScale,
|
|
|
- mapDiyObj,
|
|
|
- prevCenterLocation: {
|
|
|
- longitude: mapDiyObj.center[0],
|
|
|
- latitude: mapDiyObj.center[1],
|
|
|
- },
|
|
|
- polygons,
|
|
|
- polygons2: polygons,
|
|
|
- polygonsTextArr: markerData
|
|
|
- }, () => {
|
|
|
- // this.getAreaInfo()
|
|
|
- this.getCurESData()
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
|
|
|
- getAreaInfo () {
|
|
|
- Taro.api.other.apiareatotal().then(res => {
|
|
|
- let area_list = res.area_list || []
|
|
|
- let area_total = res.area_total || []
|
|
|
- const areaInfoArr = area_list.map((a, aIndex) => {
|
|
|
- return {
|
|
|
- key: aIndex,
|
|
|
- val: a.option1,
|
|
|
- longitude: a.longitude,
|
|
|
- latitude: a.latitude,
|
|
|
- areaName: a.area_name,
|
|
|
- id: a.id,
|
|
|
- }
|
|
|
- })
|
|
|
- let areaList = []
|
|
|
- area_total.forEach(item => {
|
|
|
- if (arrToObj(areaInfoArr)[item.area_type] > -1) {
|
|
|
- const areaObj = areaInfoArr[arrToObj(areaInfoArr)[item.area_type]]
|
|
|
- areaList.push({
|
|
|
- longitude: areaObj.longitude,
|
|
|
- latitude: areaObj.latitude,
|
|
|
- id: areaObj.key + 100000,
|
|
|
- title: areaObj.areaName,
|
|
|
- iconPath: 'https://icon.honglouplus.com/icon_1px.png',
|
|
|
- width: 0,
|
|
|
- height: 0,
|
|
|
- callout: {
|
|
|
- content: `${areaObj.areaName}\n 楼盘${item.estate_total}/学校${item.school_total}`,
|
|
|
- color: '#fff',
|
|
|
- bgColor: '#369af7',
|
|
|
- display: 'ALWAYS',
|
|
|
- padding: '6px 10px',
|
|
|
- textAlign: 'center',
|
|
|
- borderRadius: '10'
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- this.setState({
|
|
|
- areaArr: areaList,
|
|
|
- areaInfoArr
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
|
|
|
- getCurESData () {
|
|
|
- const { prevCenterLocation } = this.state
|
|
|
- Taro.api.other.apimapcoordinall2({
|
|
|
- longitude: prevCenterLocation.longitude,
|
|
|
- latitude: prevCenterLocation.latitude,
|
|
|
- distance: 3000
|
|
|
- }).then(res => {
|
|
|
- let estateList = res.estate_list || []
|
|
|
- estateList.map(item => {
|
|
|
- item.id = item.id + 20000
|
|
|
- item.longitude = item.longitude
|
|
|
- item.latitude = item.latitude
|
|
|
- item.iconPath = 'https://img2.honglounews.com/20220110041411-6675.png'
|
|
|
- item.width = '20'
|
|
|
- item.height = '20'
|
|
|
- item.zIndex = 9
|
|
|
- item.callout = {
|
|
|
- content: `${item.estate_name}\n¥${item.price_range}/㎡`,
|
|
|
- color: '#313131',
|
|
|
- bgColor: '#fff',
|
|
|
- padding: '4px 6px',
|
|
|
- textAlign: 'center',
|
|
|
- borderRadius: '6',
|
|
|
- borderWidth: '1',
|
|
|
- borderColor: '#dcdcdc',
|
|
|
- }
|
|
|
- })
|
|
|
- let schoolList = res.school_list || []
|
|
|
- const { curUuid } = this.state
|
|
|
- if (curUuid === '95542fdc-b542-4582-9be2-9ab8005728d3') {
|
|
|
- schoolList = JSON.parse(JSON.stringify(res.small_school_list))
|
|
|
- }
|
|
|
- if (curUuid === '95542ff1-8176-4267-8344-2aa7f1034ac5') {
|
|
|
- schoolList = JSON.parse(JSON.stringify(res.medium_school_list))
|
|
|
- }
|
|
|
- schoolList.map(item => {
|
|
|
- item.id = item.id + 30000
|
|
|
- item.longitude = item.longitude
|
|
|
- item.latitude = item.latitude
|
|
|
- item.iconPath = 'https://img2.honglounews.com/20220110041435-6276.png'
|
|
|
- item.width = '20'
|
|
|
- item.height = '20'
|
|
|
- item.zIndex = 9
|
|
|
- item.callout = {
|
|
|
- content: item.school_name,
|
|
|
- color: '#313131',
|
|
|
- bgColor: '#fff',
|
|
|
- // display: 'ALWAYS',
|
|
|
- padding: '4px 6px',
|
|
|
- textAlign: 'center',
|
|
|
- borderRadius: '6',
|
|
|
- borderWidth: '1',
|
|
|
- borderColor: '#dcdcdc',
|
|
|
- }
|
|
|
- })
|
|
|
this.setState({
|
|
|
- estateArr: estateList,
|
|
|
- schoolArr: schoolList,
|
|
|
+ polygons,
|
|
|
+ polygons2: polygons,
|
|
|
+ polygonsTextArr: markerData,
|
|
|
})
|
|
|
+
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -260,36 +135,34 @@ class Index extends Component {
|
|
|
calloutTap (e) {
|
|
|
const { markerId } = e.detail
|
|
|
if (markerId > 9999) {
|
|
|
- if (markerId > 49999 && markerId < 60000) { // 学区文字
|
|
|
- const curIndex = markerId - 50000
|
|
|
- const { polygons2 } = this.state
|
|
|
- let polygons = JSON.parse(JSON.stringify(polygons2))
|
|
|
- polygons[curIndex].fillColor = '#0259e740'
|
|
|
- polygons[curIndex].strokeColor = '#0259e7'
|
|
|
+ const curIndex = markerId - 20000
|
|
|
+ const { polygons2 } = this.state
|
|
|
+ let polygons = JSON.parse(JSON.stringify(polygons2))
|
|
|
+ const cObj = polygons[curIndex] || {}
|
|
|
+ if (cObj.estateObj && cObj.estateObj.length > 10) {
|
|
|
+ Taro.showLoading({
|
|
|
+ mask: true,
|
|
|
+ title: '正在跳转~'
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ Taro.hideLoading()
|
|
|
+ }, 3000)
|
|
|
+ Taro.navigateTo({url: `/pagesHouse/indexDtl?id=${JSON.parse(cObj.estateObj).id}`})
|
|
|
+ } else if (cObj.schoolObj && cObj.schoolObj.length > 10) {
|
|
|
+ Taro.showLoading({
|
|
|
+ mask: true,
|
|
|
+ title: '正在跳转~'
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ Taro.hideLoading()
|
|
|
+ }, 3000)
|
|
|
+ Taro.navigateTo({url: `/pagesSchool/indexDtl?id=${JSON.parse(cObj.schoolObj).id}}`})
|
|
|
+ } else {
|
|
|
+ cObj.fillColor = '#0259e740'
|
|
|
+ cObj.strokeColor = '#0259e7'
|
|
|
this.setState({
|
|
|
polygons
|
|
|
})
|
|
|
- return
|
|
|
- }
|
|
|
- Taro.showLoading({
|
|
|
- mask: true,
|
|
|
- title: '正在跳转~'
|
|
|
- })
|
|
|
- setTimeout(() => {
|
|
|
- Taro.hideLoading()
|
|
|
- }, 3000)
|
|
|
- if (markerId > 99999 && markerId < 200000) { // 区域
|
|
|
- const curIndex = markerId - 100000
|
|
|
- const { areaInfoArr } = this.state
|
|
|
- const eData = areaInfoArr[curIndex]
|
|
|
- // Taro.navigateTo({url: `/pagesSchool/index?areaName=${eData.areaName}&areaType=${eData.val}`})
|
|
|
- Taro.navigateTo({url: `/pagesQa/areaSub?name=${eData.areaName}&id=${eData.id}`})
|
|
|
- }
|
|
|
- if (markerId > 19999 && markerId < 30000) { // 楼盘
|
|
|
- Taro.navigateTo({url: `/pagesHouse/indexDtl?id=${markerId - 20000}`})
|
|
|
- }
|
|
|
- if (markerId > 29999 && markerId < 40000) { // 学校
|
|
|
- Taro.navigateTo({url: `/pagesSchool/indexDtl?id=${markerId - 30000}`})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -382,14 +255,15 @@ class Index extends Component {
|
|
|
})
|
|
|
const curCL = eObj.centerLocation
|
|
|
let d = this.getDistance(curCL.longitude, curCL.latitude, prevCenterLocation.longitude, prevCenterLocation.latitude)
|
|
|
- if (d > 1.5 && curScale > 13.9) {
|
|
|
+ // if (d > 1.5 && curScale > 13.9) {
|
|
|
+ if (d > 1.5 && curScale > 11) {
|
|
|
this.debounce(() => {
|
|
|
this.setState({
|
|
|
prevCenterLocation: eObj.centerLocation
|
|
|
}, () => {
|
|
|
this.getCurESData()
|
|
|
})
|
|
|
- }, 1000)
|
|
|
+ }, 800)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -465,21 +339,9 @@ class Index extends Component {
|
|
|
|
|
|
|
|
|
render () {
|
|
|
- let { areaArr, estateArr, schoolArr } = this.state
|
|
|
const { mapDiyObj, curScale, polygons, polygonsTextArr } = this.state
|
|
|
- if (curScale < 17 && curScale > 13) {
|
|
|
- if (curScale > 14.5) {
|
|
|
- estateArr.map(item => {
|
|
|
- item.callout.display = 'ALWAYS'
|
|
|
- })
|
|
|
- } else {
|
|
|
- estateArr.map(item => {
|
|
|
- item.callout.display = 'BYCLICK'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
const { isEnablesatellite } = this.state
|
|
|
- const markers = curScale > 13 ? JSON.parse(JSON.stringify([...estateArr, ...schoolArr, ...polygonsTextArr])) : JSON.parse(JSON.stringify([...areaArr]))
|
|
|
+ const markers = curScale > 15 ? JSON.parse(JSON.stringify([...polygonsTextArr])) : []
|
|
|
return (
|
|
|
<View className="l-box">
|
|
|
{this.renderHeader()}
|