地图引入

2 years ago · d972ee6004
5 changed files with 57 additions and 5 deletions
--- a/web/client/index.ejs
+++ b/web/client/index.ejs
@ -9,6 +9,12 @@
      type="text/css"
      href="/assets/font_sc/iconfont.css"
    />
+    <script type="text/javascript">
+      window._AMapSecurityConfig = {
+          securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
+      }
+  </script>
+  <script src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.Adaptor,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.CustomLayer,Map3D,ElasticMarker"></script>
  </head>

  <body style="background: transparent">
--- a/web/client/index.html
+++ b/web/client/index.html
@ -10,6 +10,12 @@
      href="/assets/font_sc/iconfont.css"
    />
    <link rel="stylesheet" href="/assets/fontziti/font.css" />
+    <script type="text/javascript">
+      window._AMapSecurityConfig = {
+          securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
+      }
+  </script>
+  <script src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.Adaptor,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.CustomLayer,Map3D,ElasticMarker"></script>
  </head>
  <body>
    <link
--- a/web/client/src/sections/quanju/containers/example.js
+++ b/web/client/src/sections/quanju/containers/example.js
@ -21,20 +21,55 @@ const Example = (props) => {
        // dispatch({ type: 'TAB-CHANGE', data: tab })
    }

+
+    useEffect(() => {
+        const map = new AMap.Map("amapId", {
+            //resizeEnable: true,
+            center: [115.880421, 28.529637],//地图中心点，初始定位加载显示楼块
+            // center: [115.857952, 28.683003],//地图中心点
+            zoom: 8,//地图显示的缩放级别
+            zooms: [8, 18],
+            pitch: 65, // 地图俯仰角度，有效范围 0 度- 83 度
+            viewMode: '3D', // 地图模式
+            // rotation: 60
+            // showLabel: false
+        });
+
+
+        //主题样式
+        let styleName = 'amap://styles/fb26776387242721c2fc32e2cb1daccc';
+        map.setMapStyle(styleName);
+
+        let mapComplete = false;
+        let windowOnload = false;
+        window.onload = function () {
+            windowOnload = true;
+        }
+        return () =>{
+            map.destroy(); //销毁地图
+            map=null
+        }
+    }, [])
+
+
    return (
        <Spin tip="biubiubiu~" spinning={loading}>
-            <div id='example2' style={{
+            <div style={{
                backgroundColor: "#031839", width: "100vw", height: "100vh", /* transform: `scale(${Math.min(
                    document.body.clientWidth / 1920,
                    document.body.clientHeight / 1080
                )})`, */
            }}>
+                <div id='amapId' style={{ position: 'absolute', width: "100%", height: "100%" }}></div>
                <div style={{ width: "100%", height: "10%" }}>
                    <Header tabChange={tabChange} tabKey={tabKey} dispatch={dispatch} />
                </div>
-                <div style={{ width: "100%", height: "90%" }}>
+
+                <div style={{ position: 'absolute', width: "100%", height: "90%" }}>
                    <Footer tabKey={tabKey} />
                </div>
+                {/* </div> */}
+
            </div>
        </Spin>
    )
--- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
@ -230,7 +230,7 @@ const LeftCenter = (props) => {
                        <img src='assets/images/quanju/kelvhua_icon.png' alt='icon' style={{ width: '26%' }} />
                        <span style={{ color: '#C2EEFF', marginLeft: 5 }}>可绿化里程总数</span>
                    </Col>
-                    <Col span={9} style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>{totalData}</Col>
+                    <Col span={9} style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>{totalData.toFixed(3) || 0}</Col>
                </Row>
                <div ref={chartRef} style={{ height: "14.5vh", width: "100%" }}></div>

--- a/web/client/src/sections/quanju/style.less
+++ b/web/client/src/sections/quanju/style.less
@ -1,3 +1,8 @@
 #example:hover {
-    font-size: larger;
-}
+  font-size: larger;
+}
+.amap-logo {
+  display: none;
+
+  opacity: 0 !important;
+}