添加地块规划

src/app.jsx

@@ -166,6 +166,7 @@ class App extends Component {
           'map/metro',
           'map/aftermetro',
           'map/vr',
+          'map/plan',
           'bankRate/index',
           'brand/index'
         ]

src/pagesOther/map/plan.jsx

@@ -0,0 +1,509 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, Map } from '@tarojs/components'
+
+import { AtNoticebar } from 'taro-ui'
+
+import './plan.scss'
+import { arrToObj } from '@utils'
+
+class Index extends Component {
+  onShareAppMessage() {
+    const { curUuid } = this.state
+    return {
+      title: `南昌地块规划地图`,
+      path: `/pagesOther/map/dtl?id=${curUuid}`,
+    }
+  }
+  onShareTimeline () {
+    const { curUuid } = this.state
+    return {
+      title: `南昌地块规划地图`,
+      path: `/pagesOther/map/dtl?id=${curUuid}`,
+    }
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      curUuid: '98d97887-3bfe-417d-89f8-113dc2e70abc',       
+      allObj: {},
+      areaArr: [],
+      areaInfoArr: [],
+      estateArr: [],
+      schoolArr: [],
+      polygons: [],
+      polygons2: [],
+      polygonsTextArr: [],
+      mapDiyObj: {
+        center: ['115.852386', '28.684076'],
+        cScale: '',
+      },
+      curScale: '',
+      isFooterTipsShow: false,
+      isEnablesatellite: false,
+      timer: null,
+      prevCenterLocation: {},
+    }
+  }
+
+  config = {
+    navigationBarTitleText: '南昌地块规划地图-洪楼Plus',
+  }
+
+  componentWillUnmount () {
+  }
+
+  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()
+    }
+  }
+
+  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) => {
+        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',
+        }
+      })
+      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,
+      })
+    })
+  }
+
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  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'
+        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}`})
+      }
+    }
+  }
+  markerTap (e) {}
+
+
+
+
+
+
+
+  renderFooter () {
+    const colorArr = [
+      {color: '#ff0', t: '新楼盘', id: 1}, 
+      {color: '#bb9c2c', t: '二手房', id: 2}, 
+      {color: '#e8d0e6', t: '还建房', id: 3}, 
+      {color: '#ff9149', t: '幼儿园', id: 4}, 
+      {color: '#ff7fbf', t: '小初中', id: 5},
+      {color: '#e77ad4', t: '高中', id: 6},
+      {color: '#fb6557', t: '专本科', id: 7}, 
+      {color: '#ff003f', t: '纯商业', id: 8},
+      {color: '#999', t: '商综合', id: 9},
+      {color: '#007299', t: '公共', id: 10}, 
+      {color: '#00ff3f', t: '公园', id: 11}, 
+      {color: '#4da4ee', t: '医院', id: 12}, 
+    ]
+    const colorItem = colorArr.map((item) => {
+      return (
+        <View className="scl-op" key={item.id} style={`background: ${item.color}`}>{item.t}</View>
+      )
+    })
+    return (
+      <View className="scoped-bottom">
+        <View className='scoped-color-list'>
+          {colorItem}
+        </View>
+      </View>
+    )
+  }
+  navHandle (uuid) {
+    this.setState({
+      curUuid: uuid
+    }, () => {
+      this.getData()
+    })
+  }
+  tipsChange () {
+    const { isFooterTipsShow } = this.state
+    this.setState({
+      isFooterTipsShow: !isFooterTipsShow
+    })
+  }
+  enablesatelliteChange () {
+    const { isEnablesatellite, estateArr, schoolArr } = this.state
+    estateArr.map(item => {
+      item.callout.display = 'BYCLICK'
+    })
+    schoolArr.map(item => {
+      item.callout.display = 'BYCLICK'
+    })
+    this.setState({
+      estateArr,
+      schoolArr,
+      isEnablesatellite: !isEnablesatellite
+    })
+  }
+  moreHandle () {
+    if (wx.openCustomerServiceChat) {
+      wx.openCustomerServiceChat({
+        extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc5a98824cf0cc0451'},
+        corpId: 'ww2d34323a70a31730',
+        success(res) {}
+      })
+    } else {
+      Taro.$msg('当前微信版本过低，请升级微信或手动添加微信：JXFP2019')
+    }
+  }
+
+
+
+
+
+  regionChange (e) {
+    const { prevCenterLocation } = this.state
+    if (e.type === 'end') {
+      const eObj = e.target || {}
+      let curScale = eObj.scale
+      this.setState({
+        curScale
+      })
+      const curCL = eObj.centerLocation
+      let d = this.getDistance(curCL.longitude, curCL.latitude, prevCenterLocation.longitude, prevCenterLocation.latitude)
+      if (d > 1.5 && curScale > 13.9) {
+        this.debounce(() => {
+          this.setState({
+            prevCenterLocation: eObj.centerLocation
+          }, () => {
+            this.getCurESData()
+          })
+        }, 1000)
+      }
+    }
+  }
+  debounce (fn, delay) {
+    const { timer } = this.state
+    clearTimeout(timer)
+    let curTimer = setTimeout(fn, delay)
+    this.setState({
+      timer: curTimer
+    })
+  }
+  getDistance(lng1, lat1, lng2, lat2){
+    var radLat1 = lat1*Math.PI / 180.0
+    var radLat2 = lat2*Math.PI / 180.0
+    var a = radLat1 - radLat2
+    var  b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0
+    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
+    Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)))
+    s = s *6378.137 
+    s = Math.round(s * 10000) / 10000
+    return s
+  }
+
+
+
+
+  renderShare () {
+    const iconShare = require('@img/images/icon_g_share6.png')
+    return (
+      <Button className="g-icon-share btn-to-div" openType="share">
+        <Image className="img" src={iconShare} />
+      </Button>
+    )
+  }
+
+
+
+
+
+  renderHeader () {
+    const { isEnablesatellite } = this.state
+    return (
+      <View className="scoped-header">
+        <AtNoticebar>
+          手工绘制，难免出现误差，仅供参考，一切以正式文件为准。
+          <View onClick={this.enablesatelliteChange.bind(this)} className={isEnablesatellite ? 'm' : 'm t2'}>{isEnablesatellite ? '关闭卫星图' : '开启卫星图'}</View>
+          <Navigator url="/pagesOther/map/aftermetro" className="m t3">查看2022-2035最新地铁规划</Navigator>
+          <Navigator url="/pagesOther/map/dtl" className="m t3">学区地图</Navigator>
+          <Navigator url="/pagesOther/map/vr" className="m t3">航拍</Navigator>
+        </AtNoticebar>
+      </View>
+    )
+  }
+
+  renderSign () {
+    const img = require('@img/sigin_sy.png')
+    return (
+      <View className="scoped-sign">
+        <View className="bg"></View>
+        <Image className="img" src={img} />
+      </View>
+    )
+  }
+  renderSign2 () {
+    const img = require('@img/sigin_sy.png')
+    return (
+      <View className="scoped-sign2">
+        <Image className="img" src={img} />
+      </View>
+    )
+  }
+
+
+
+  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]))
+    return (
+      <View className="l-box">
+        {this.renderHeader()}
+        <Map
+          enable-satellite={isEnablesatellite}
+          longitude={mapDiyObj.center[0]}
+          latitude={mapDiyObj.center[1]} 
+          enable-poi={false}
+          scale={mapDiyObj.cScale}
+          markers={markers}
+          polygons={polygons}
+          min-scale="11"
+          max-scale="20"
+          subkey="Y7PBZ-FPZRP-4DXDL-VXQ3B-7DFL7-UXBK4"
+          onCalloutTap={this.calloutTap.bind(this)}
+          onRegionChange={this.regionChange.bind(this)} 
+          className="scoped-map"/>
+        {this.renderFooter()}
+        {this.renderShare()}
+        {this.renderSign()}
+        {this.renderSign2()}
+      </View>
+    )
+  }
+}
+
+export default Index

src/pagesOther/map/plan.scss

@@ -0,0 +1,184 @@
+@import '@css/mixin.scss';
+.l-box {
+  height: 100vh;
+}
+.scoped-map {
+  width: 100%;
+  height: 100%;
+}
+
+
+.scoped-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 166px;
+  background: #fff;
+  z-index: 9;
+  display: flex;
+  .sb-nav {
+    width: 180px;
+    padding-top: 20px;
+    padding-left: 20px;
+    .op {
+      width: 150px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      border-radius: 10px;
+      color: #313131;
+      border: 1PX solid #dcdcdc;
+      box-shadow: 0 0 3px #dcdcdc;
+      margin-bottom: 20px;
+      font-size: 28px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      &.cur {
+        background: $mainColor;
+        box-shadow: 0 0 3px $mainColor;
+        color: #fff;
+      }
+    }
+  }
+  .sb-content {
+    width: 540px;
+    height: 166px;
+    overflow-y: auto;
+    padding: 20px 0;
+    box-sizing: border-box;
+    .tips {
+      padding: 10px;
+      color: #de8c17;
+      background: #fcf6ed;
+      font-size: 24px;
+      border-radius: 10px;
+      .b {
+        display: inline-block;
+        background: $mainColor;
+        color: #fff;
+        padding: 2px 6px;
+        font-size: 22px;
+        border-radius: 6px;
+      }
+      .s {
+        font-size: 22px;
+      }
+    }
+    .more {
+      padding: 20px 0;
+      .op {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        padding: 6px 10px;
+        border: 1PX solid #dcdcdc;
+        color: #666;
+        border-radius: 10px;
+        font-size: 24px;
+        &:last-child {
+          margin-right: 0;
+        }
+        &.t2 {
+          border-color: $mainColor;
+          color: $mainColor;
+        }
+        &.t4 {
+          border-color: $dangerColor;
+          color: $dangerColor;
+        }
+      }
+    }
+  }
+}
+
+
+
+.scoped-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
+  .m {
+    display: inline-block;
+    background: $dangerColor;
+    color: #fff;
+    padding: 6rpx 10rpx;
+    border-radius: 6rpx;
+    margin-right: 10rpx;
+    &.t2 {
+      background: $successColor;
+    }
+    &.t3 {
+      background: $mainColor;
+    }
+  }
+}
+
+
+.scoped-sign2 {
+  position: fixed;
+  top: 360px;
+  left: 0;
+  width: 198px;
+  height: 46px;
+  z-index: 99999;
+  .img {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    width: 182px;
+    height: 30px;
+    z-index: 2;
+  }
+}
+
+
+.scoped-sign {
+  position: fixed;
+  top: 760px;
+  right: 0;
+  width: 198px;
+  height: 46px;
+  z-index: 99999;
+  border-radius: 10px 0 0 10px;
+  overflow: hidden;
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 198px;
+    height: 46px;
+    z-index: 1;
+    background: #000;
+    opacity: .3;
+  }
+  .img {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    width: 182px;
+    height: 30px;
+    z-index: 2;
+    opacity: .8;
+  }
+}
+
+
+
+
+.scoped-color-list {
+  display: flex;
+  flex-wrap: wrap;
+  .scl-op {
+    width: 16.6%;
+    color: #fff;
+    text-align: center;
+    font-size: 28rpx;
+    height: 82rpx;
+    line-height: 82rpx;
+  }
+}