t

src/pagesOther/map/aftermetro.jsx

@@ -20,16 +20,22 @@ class Index extends Component {
   }
   constructor (props) {
     super(props)
-    const longitude = '115.786696'
-    const latitude = '28.603354'
+    const longitude = '115.877835'
+    const latitude = '28.67022'
     this.state = {
+      curShowLineObj: {
+        key: '5号线',
+        val: '5'
+      },
+      allLineList: [],
       estateArr: [],
       polylines: [],
       mapDiyObj: {
         center: [longitude, latitude],
-        cScale: '13.1',
+        cScale: '11.2',
       },
-      curScale: 13.1,
+      // curScale: 13.1,
+      curScale: 11.2,
       isFooterTipsShow: false,
       isEnablesatellite: false,
       polygonsTextArr: [],
@@ -37,7 +43,8 @@ class Index extends Component {
       prevCenterLocation: {
         longitude,
         latitude,
-      }
+      },
+      allData: {},
     }
   }
 
@@ -75,19 +82,24 @@ class Index extends Component {
     }
   }
 
-  getData () {
-    this.getEstate()
-    Taro.api.other.apimapcoordindetail({uuid: '97dd9c01-3282-40c6-a251-e75914131dab'}).then(res => {
-      const data = JSON.parse(res.data)
-      let oldlines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
-      let polylines = []
-      oldlines.forEach(item => {
-        let points = []
-        const pArr = item.path || []
-        pArr.forEach(p => {
-          points.push({longitude: p[0], latitude: p[1]})
-        })
-        if (item.text !== '4号线') {
+  dealData () {
+    const { curShowLineObj, allData: data } = this.state
+    let oldlines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
+    let allLineList = oldlines.map(line => {
+      return {
+        key: line.text,
+        val: line.text.split('号')[0],
+      }
+    })
+    let polylines = []
+    oldlines.forEach(item => {
+      let points = []
+      const pArr = item.path || []
+      pArr.forEach(p => {
+        points.push({longitude: p[0], latitude: p[1]})
+      })
+      if (curShowLineObj && curShowLineObj.key) {
+        if (item.text === curShowLineObj.key) {
           polylines.push({
             points,
             color: item.fillColor,
@@ -96,30 +108,73 @@ class Index extends Component {
             level: 'abovelabels',
           })
         }
-      })
-      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 = item.icon || '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',
-        }
-      })
+      } else {
+        polylines.push({
+          points,
+          color: item.fillColor,
+          width: 5,
+          // dottedLine: true,
+          level: 'abovelabels',
+        })
+      }
+    })
+    let markerData = [...data.markerData]
+    let markerData2 = []
+    markerData.map((item, index) => {
+      
+      
+      let isShow = false
+      const curTextArr = item.text && item.text.split('#').length > 0 ? item.text.split('#')[0] : []
+      const lineArr = curTextArr.split('&')
+      
+      if (curShowLineObj && curShowLineObj.key) {
+        lineArr.forEach(l => {
+          if(l == curShowLineObj.val) {
+            isShow = true
+          }
+        })
+      } else {
+        isShow = true
+      }
+      
+      if (isShow) {
+        markerData2.push({
+          ...item,
+          longitude: item.position[0],
+          latitude: item.position[1],
+          id: 50000 + index,
+          iconPath: item.icon || 'https://icon.honglouplus.com/icon_1px.png',
+          width: 0,
+          height: 0,
+          zIndex: 99,
+          callout: {
+            content: `${item.text}`,
+            color: '#fff',
+            bgColor: '#369af7',
+            display: 'ALWAYS',
+            padding: '6px 10px',
+            textAlign: 'center',
+            borderRadius: '10',
+          }   
+        })
+      }
+    })
+    this.setState({
+      allLineList,
+      polylines,
+      polygonsTextArr: markerData2
+    })
+  }
+
+  getData () {
+    this.getEstate()
+    Taro.api.other.apimapcoordindetail({uuid: '97dd9c01-3282-40c6-a251-e75914131dab'}).then(res => {
+      const data = JSON.parse(res.data)
+      // console.log(data)
       this.setState({
-        polylines,
-        polygonsTextArr: markerData
+        allData: data
+      }, () => {
+        this.dealData()
       })
     })
   }
@@ -229,7 +284,7 @@ class Index extends Component {
 
 
   renderFooter () {
-    const { isEnablesatellite } = this.state
+    const { isEnablesatellite, allLineList, curShowLineObj } = this.state
     return (
       <View className="scoped-bottom">
         <View className="sb-nav">
@@ -237,21 +292,50 @@ class Index extends Component {
           <View onClick={this.enablesatelliteChange.bind(this)} className={isEnablesatellite ? 'op t4' : 'op t2'}>{isEnablesatellite ? '关闭卫星图' : '开启卫星图'}</View>
         </View>
         <View className="sb-content">
+          <View className="scoped-tab-line">
+            <View className="stl-title">选择选路展示</View>
+            <View className={!curShowLineObj.key ? 'stl-nav cur' : 'stl-nav'} onClick={this.lineNavHandle.bind(this, {})}>全选</View>
+            {
+              allLineList.map((item, index) => {
+                return (
+                  <View className={curShowLineObj.key && curShowLineObj.key === item.key ? 'stl-nav cur' : 'stl-nav'} onClick={this.lineNavHandle.bind(this, item)}>{item.key}</View>
+                )
+              })
+            }
+            
+          </View>
           <View className="tips">
             <View className="l">该线路图及站点位置纯属巴老师YY，不作为任何房产购置参考依据</View>
           </View>
-          <View className="more">
+          {/* <View className="more">
             <View onClick={this.moreHandle.bind(this)} className={'op'}>更多敬请期待,欢迎给我们提建议</View>
-          </View>
+          </View> */}
         </View>
       </View>
     )
   }
 
+  lineNavHandle (item) {
+    if (item.key) {
+      this.setState({
+        curShowLineObj: item
+      }, () => {
+        this.dealData()
+      })
+    } else {
+      this.setState({
+        curShowLineObj: {}
+      }, () => {
+        this.dealData()
+      })
+    }
+  }
+  
   enablesatelliteChange () {
     const { isEnablesatellite, estateArr } = this.state
     estateArr.map(item => {
-      item.callout.display = 'BYCLICK'
+      // item.callout.display = 'BYCLICK'
+      item.callout.display = 'ALWAYS'
     })
     this.setState({
       estateArr,

src/pagesOther/map/aftermetro.scss

@@ -152,3 +152,30 @@
     opacity: .8;
   }
 }
+
+
+
+
+.scoped-tab-line {
+  .stl-title {
+    color: #333;
+    padding-bottom: 10px;
+    font-size: 24px;
+  }
+  .stl-nav {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 24px;
+    padding: 4px 15px;
+    border: 1PX solid #dcdcdc;
+    color: #666;
+    border-radius: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    &.cur {
+      border-color: $mainColor2;
+      color: $mainColor2;
+      font-weight: bold;
+    }
+  }
+}