GiveHenanAHand · GeoLibra · Jul 25, 2021 · Jul 25, 2021 · Jul 25, 2021 · Jul 25, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/images/marker-blue.svg b/public/images/marker-blue.svg
diff --git a/public/images/marker-red.svg b/public/images/marker-red.svg
diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>河南暴雨微博求助信息</title>
-    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=mTM4lv5gl2AenfvEuC8hV6DMGyWF4mBZ"></script>
+    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=0glwxwioYYuSFk9iaVuC25GDZb4pDL4N"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useMemo} from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { BaiduMap, InfoHeader } from "./components";
 import { COLOR_MAP } from './common/constant'
 import './styles/App.css';
@@ -11,16 +11,16 @@ function App() {
     const [bounds, setBounds] = useState(null)
     const [listDefaultText, setListDefaultText] = useState("")
     // map center
-    const [center, setCenter] = useState({ lng: 113.802193, lat: 34.820333 })
+    const [center, setCenter] = useState(null)
 
     // filter relevant states
-    const [ keyword, setKeyword ] = useState('')
-    const [ selectedCategory, setSelectedCategory ] = useState('')
-    const [ selectedTypes, setSelectedTypes ] = useState([])
+    const [keyword, setKeyword] = useState('')
+    const [selectedCategory, setSelectedCategory] = useState('')
+    const [selectedTypes, setSelectedTypes] = useState([])
 
     // highlight relevant states
     // changeList: (id -> icon) dict
-    const [ changeList, setChangeList ] = useState({})
+    const [changeList, setChangeList] = useState({})
 
     // modal relevant states
     const [ modalState, setModalState ] = useState({ modalVisible: false, item: null })
@@ -30,8 +30,8 @@ function App() {
         // across different versions of json format; only for the transition phase
         item.isWeibo = !item.link.startsWith('no_link')
         // generate random to prevent overlap
-        let random1 = Math.random()-0.5
-        let random2 = Math.random()-0.5
+        let random1 = Math.random() - 0.5
+        let random2 = Math.random() - 0.5
         if (!item.isWeibo) {
             random1 = random1 / 200
             random2 = random2 / 200
@@ -92,7 +92,7 @@ function App() {
             if ('weibo' in data) return
             const serverData = JSON.parse(xhr_weibo.responseText)
             const items = serverData.map(createDataItem)
-            setData(previousData => ({...previousData, weibo: items}))
+            setData(previousData => ({ ...previousData, weibo: items }))
         };
         xhr_weibo.open("GET", "https://api-henan.tianshili.me/parse_json.json");
         xhr_weibo.send()
@@ -102,7 +102,7 @@ function App() {
             if ('sheet' in data) return
             const serverData = JSON.parse(xhr_sheet.responseText)
             const items = serverData.map(createDataItem)
-            setData(previousData => ({...previousData, sheet: items}))
+            setData(previousData => ({ ...previousData, sheet: items }))
         };
         xhr_sheet.open("GET", "https://api-henan.tianshili.me/manual.json");
         xhr_sheet.send()
@@ -122,8 +122,8 @@ function App() {
             const beginTime = Date.now() - timeRange * 60 * 60 * 1000
             currentFilteredData = data[dataSource].filter(item => {
                 const result = (item.timestamp > beginTime) &&
-                            item.post.indexOf(keyword) > -1 &&
-                            item.category.indexOf(selectedCategory) > -1
+                    item.post.indexOf(keyword) > -1 &&
+                    item.category.indexOf(selectedCategory) > -1
                 // if already false
                 if (result === false) { return false }
                 // default select all
@@ -189,10 +189,11 @@ function App() {
         // highlight item
         list[item.id] = 'loc_blue'
         setChangeList(list)
-        setCenter(item.location)
+        setCenter(item)
     }
 
     function handleCorrection(item) {
+        console.log('sssss');
         setModalState({ visible: true, item: item })
     }
 

diff --git a/src/common/constant.js b/src/common/constant.js
@@ -2,6 +2,7 @@ const COLOR_MAP = {
     '求救': '#EC2215',
     '帮助': '#47AE53',
     '其他': '#3371BE',
+    '未分类': '#ac3370aa',
 }
 
 const CATEGORY_MAP = {
@@ -11,4 +12,4 @@ const CATEGORY_MAP = {
     '未分类': []
 }
 
-export { COLOR_MAP, CATEGORY_MAP }
+export { COLOR_MAP, CATEGORY_MAP }
diff --git a/src/components/BaiduMap.js b/src/components/BaiduMap.js
@@ -1,21 +1,13 @@
-import React, {useState, useCallback, useMemo} from "react";
-import {Map, ScaleControl, ZoomControl, MapTypeControl} from 'react-bmapgl';
-import { InfoMarker,InfoWindow,LocationControl } from ".";
-
+import React, { useState, useCallback, useEffect } from "react";
+import { Map, ScaleControl, ZoomControl, MapTypeControl, MapvglView, MapvglLayer } from 'react-bmapgl';
+import { InfoWindow, LocationControl } from ".";
+import { COLOR_MAP } from '../common/constant'
 
 function BaiduMap(props) {
     const [focus, setFocus] = useState("")
     const [bounds, setBounds] = useState(null)
     const [shouldAutoFocus, setShouldAutoFocus] = useState(true)
-
-    function onClickMarker(id){
-        setShouldAutoFocus(true)
-        if (focus === id) {
-            setFocus("")
-        } else {
-            setFocus(id)
-        }
-    }
+    const [listIem, setListItem] = useState(null);
 
     const mapRef = useCallback(node => {
         if (node !== null && bounds == null) {
@@ -47,36 +39,113 @@ function BaiduMap(props) {
         props.handleBoundChanged(visibleBounds)
     }
 
-    function onWindowCloseClick() {
-        onClickMarker(focus)
+    function onWindowCloseClick(e) {
+        e.stopPropagation()
+        const item = {
+            dataItem: {
+                properties: focus
+            }
+        };
+        onPointClick(item)
     }
 
-    const infoMarkers = useMemo(() => {
-        return props.data.map( item => {
-                    // color in props.changeList has a higher priority
-                    return <InfoMarker key={item.id} item={item} icon={props.changeList[item.id] || item.icon} onClickMarker={onClickMarker}/>
-                })
-    }, [props.changeList, props.data])
+    const onPointClick = useCallback((e) => {
+        const { dataIndex, dataItem } = e;
+        if (dataItem) {
+            const { geometry, properties } = dataItem;
+            setShouldAutoFocus(true)
+            if (focus === properties.id) {
+                setFocus("")
+            } else {
+                setFocus(properties.id)
+            }
+        } else {
+            // 点击空白关闭infoWindow
+            setFocus("")
+        }
+    }, [focus]);
+
+    const geojson = [];
+    let centerPoint = null;
+    props.data.map((item) => {
+        // delete item.color
+        const point = {
+            geometry: {
+                type: 'Point',
+                coordinates: [item.location.lng, item.location.lat],
+            },
+            properties: {
+                ...item,
+                icon: item.id === (focus || listIem) ? './images/marker-blue.svg' : './images/marker-red.svg',
+            },
+        }
+        if (item.id === (focus || listIem)) {
+            centerPoint = point;
+        } else {
+            geojson.push(point);
+        }
+    })
+    centerPoint && geojson.push(centerPoint);
+    let loc = { lng: 113.802193, lat: 34.820333 };
+
+    if (props.center) {
+        const { location } = props.center;
+        loc = location;
+    }
 
+    // 选中列表项展示infoWindow
+    useEffect(() => {
+        if (props.center) {
+            setListItem(props.center.id);
+        }
+    }, [props.center]);
     return <Map
-                enableScrollWheelZoom={true}
-                enableDragging={true}
-                zoom={9}
-                center={props.center}
-                className="mapDiv"
-                ref={mapRef}
-                style={{height: "100%"}}>
-                <ZoomControl/>
-                <ScaleControl/>
-                <LocationControl/>
-                <MapTypeControl mapTypes={['normal', 'satellite']}/>
-                { infoMarkers }
-                <InfoWindow 
-                    item={props.data.find(e => e.id === focus)}
-                    shouldAutoCenter={shouldAutoFocus}
-                    handleCorrection={props.handleCorrection}
-                    onCloseClick={onWindowCloseClick}/>
-            </Map>
+        enableScrollWheelZoom={true}
+        enableDragging={true}
+        zoom={9}
+        center={loc}
+        className="mapDiv"
+        ref={mapRef}
+        style={{ height: "100%" }}>
+        <ZoomControl />
+        <ScaleControl />
+        <LocationControl />
+        <MapTypeControl mapTypes={['normal', 'satellite']} />
+        <InfoWindow
+            item={props.data.find(e => e.id === focus)}
+            shouldAutoCenter={shouldAutoFocus}
+            handleCorrection={props.handleCorrection}
+            onCloseClick={onWindowCloseClick} />
+        <MapvglView>
+            <MapvglLayer
+                type="IconLayer"
+                data={geojson}
+                options={{
+                    // icon: (item) => {
+                    //     console.log('item', item.properties);
+                    //     if (item.properties.id === focus) {
+                    //         return './images/marker-blue.svg';
+                    //     }
+                    //     console.log('item', item);
+                    //     return './images/marker-red.svg';
+                    // },
+                    color: (item) => {
+                        // console.log('item', item);
+                        const { properties: { category } } = item
+                        return COLOR_MAP[category]
+                    },
+                    size: 20,
+                    enablePicked: true,// 是否可以拾取
+                    selectedIndex: (item) => {
+                        console.log('item', item);
+                    },
+                    selectedColor: '#5B8FF9', // 选中项颜色
+                    autoSelect: true,// 根据鼠标位置来自动设置选中项
+                    onClick: onPointClick,
+                }}
+            />
+        </MapvglView>
+    </Map>
 }
 
-export default BaiduMap
+export default BaiduMap
diff --git a/src/components/InfoHeader.js b/src/components/InfoHeader.js
@@ -1,9 +1,9 @@
-import {useCallback, useEffect, useState} from "react";
+import { useCallback, useEffect, useState } from "react";
 import { LEFT_FOLD } from '../icon';
-import {Button, Slider, Row, Col, Input, Select, List, Radio} from 'antd';
-import {SearchOutlined} from "@ant-design/icons";
+import { Button, Slider, Row, Col, Input, Select, List, Radio } from 'antd';
+import { SearchOutlined } from "@ant-design/icons";
 import InfoItem from "./InfoItem";
-import {CATEGORY_MAP} from "../common/constant";
+import { CATEGORY_MAP } from "../common/constant";
 import '../styles/InfoHeader.css'
 const { Option } = Select
 
@@ -26,7 +26,7 @@ function InfoHeader(props) {
         e.stopPropagation();
         setIsFold(!isFold);
     }, [isFold])
-    
+
 
     const handleSliderChange = (value) => {
         setTimeRange(value)
@@ -48,9 +48,9 @@ function InfoHeader(props) {
             <Col style={{ marginTop: 5 }}>信息来源：</Col>
             <Col>
                 <Radio.Group defaultValue="weibo" buttonStyle="solid" onChange={handleSouceSwitched}>
-                <Radio.Button value="weibo">微博</Radio.Button>
-                <Radio.Button value="sheet">在线表格</Radio.Button>
-            </Radio.Group></Col>
+                    <Radio.Button value="weibo">微博</Radio.Button>
+                    <Radio.Button value="sheet">在线表格</Radio.Button>
+                </Radio.Group></Col>
         </Row>
     }
 
@@ -85,7 +85,7 @@ function InfoHeader(props) {
         return <div className="slider-container">
             <Row justify="center" align="middle">
                 <Col span={12}>
-                    <Slider defaultValue={8} step={2} min={2} max={12} onAfterChange={handleSliderChange}/>
+                    <Slider defaultValue={8} step={2} min={2} max={12} onAfterChange={handleSliderChange} />
                 </Col>
                 <Col className="label-col" span={6}>
                     <label>{labelText}</label>
@@ -100,25 +100,25 @@ function InfoHeader(props) {
     }
 
     return (
-            <div className="info-container" data-fold={isFold}>
-                <div className="info" data-fold={isFold}>
-                    {souceSwitch()}
-                    <div>{headerText()}</div>
-                    <br />
-                    {slider()}
-                </div>
+        <div className="info-container" data-fold={isFold}>
+            <div className="info" data-fold={isFold}>
+                {souceSwitch()}
+                <div>{headerText()}</div>
+                <br />
+                {slider()}
+            </div>
             <div className="info-list-header">
                 <Input placeholder="搜索"
-                       className="info-list-search"
-                       value={props.keyword}
-                       onChange={ e => props.notifyKeywordChange(e.target.value) }
-                       allowClear
-                       prefix={<SearchOutlined className="info-list-search-icon"/>}
-                       style={{ }}
+                    className="info-list-search"
+                    value={props.keyword}
+                    onChange={e => props.notifyKeywordChange(e.target.value)}
+                    allowClear
+                    prefix={<SearchOutlined className="info-list-search-icon" />}
+                    style={{}}
                 />
                 <Select defaultValue='' className="info-list-category" style={{}} onChange={handleCategoryChange}>
                     <Option value={''}>全选</Option>
-                    { categories.map(category => <Option value={category} key={category}>{category}</Option>) }
+                    {categories.map(category => <Option value={category} key={category}>{category}</Option>)}
                 </Select>
                 <Select mode="multiple"
                         className="info-list-types"
@@ -130,7 +130,7 @@ function InfoHeader(props) {
                         disabled={types.length === 0}
                         onChange={value => props.notifyTypesChange(value)}>
                     {types.map(type => (
-                      <Option key={type}>{type}</Option>
+                        <Option key={type}>{type}</Option>
                     ))}
                 </Select>
             </div>
@@ -139,15 +139,15 @@ function InfoHeader(props) {
                 itemLayout="horizontal"
                 bordered
                 dataSource={displayList}
-                locale={ { emptyText: props.defaultText } }
+                locale={{ emptyText: props.defaultText }}
                 renderItem={item => (
                     <List.Item key={item.id} className={item.id === selectedId ? "selected-item" : ''} onClick={ () => { handleItemClicked(item) } }>
                         <InfoItem info={item} handleCorrection={props.handleCorrection}/>
                     </List.Item>
                 )}
-                />
-                <div className="left-fold" data-fold={isFold} onClick={onLeftFold}>{LEFT_FOLD}</div>
-            </div>
+            />
+            <div className="left-fold" data-fold={isFold} onClick={onLeftFold}>{LEFT_FOLD}</div>
+        </div>
     )
 }