规划地图，按需加载

src/api/other.js

@@ -9,6 +9,9 @@ export default {
   apimapcoordindetail: params => { // 地图 测试 详情
     return request('/api/map/coordin/detail', params)
   },
+  apimapcoordinaround: params => { // 地图 多边形按需
+    return request('/api/map/coordin/around', params)
+  },
   apivrestateall: params => { // vr楼盘
     return request('/api/vr/estate/all', params, 'loading')
   },

src/pagesOther/map/plan.jsx

@@ -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()}