Browse Source

地图引入

release_0.0.4
‘lijianhao’ 2 years ago
parent
commit
d972ee6004
  1. 6
      web/client/index.ejs
  2. 6
      web/client/index.html
  3. 39
      web/client/src/sections/quanju/containers/example.js
  4. 2
      web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
  5. 9
      web/client/src/sections/quanju/style.less

6
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">

6
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

39
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>
)

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

9
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;
}

Loading…
Cancel
Save