|
@@ -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
|