Browse Source

gis弹框图片

dev
巴林闲侠 2 years ago
parent
commit
7e5706e8b4
  1. 30
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/hudong.js
  2. 12
      web/client/src/sections/quanju/containers/public/olMap.js

30
web/client/src/sections/quanju/containers/footer/leadership/centerleft/hudong.js

@ -2,7 +2,7 @@ import { values } from 'lodash';
import React, { Component } from 'react'; import React, { Component } from 'react';
import './conter.less'; import './conter.less';
class ReactCarousel extends Component { class ReactCarousel extends Component {
chunk(arr, size) { chunk (arr, size) {
var arr1 = new Array(); var arr1 = new Array();
for (var i = 0; i < Math.ceil(arr.length / size); i++) { for (var i = 0; i < Math.ceil(arr.length / size); i++) {
arr1[i] = new Array(); arr1[i] = new Array();
@ -45,7 +45,7 @@ class ReactCarousel extends Component {
// arr1: "" // arr1: ""
dizhi: localStorage.getItem("qndmn") dizhi: localStorage.getItem("qndmn")
} }
// console.log(this.state.imgs); console.log(this.props.shuzu);
this.state.imgs = this.props.shuzu.filter((item) => { this.state.imgs = this.props.shuzu.filter((item) => {
return item.imgs !== "" return item.imgs !== ""
}) })
@ -53,7 +53,7 @@ class ReactCarousel extends Component {
} }
render() { render () {
return ( return (
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> <div className="ReactCarousel" style={{ width: "100%", height: "100%" }}>
<div className="contain" <div className="contain"
@ -61,15 +61,27 @@ class ReactCarousel extends Component {
onMouseLeave={() => { this.start() }} //鼠标退出自动播放 onMouseLeave={() => { this.start() }} //鼠标退出自动播放
> >
<ul className="ul"> <ul className="ul" style={{ paddingInlineStart: 0 }}>
{ {
this.state.imgs.map((value, index) => { this.state.imgs.map((value, index) => {
return ( return (
<li style={{ position: "relative", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''} <li style={{
// position: "relative",
width: "100%", height: "100%",
// top: "-5%",
fontSize: "12px"
}} className={index === this.state.showIndex ? 'show' : ''}
key={index} key={index}
> >
<div style={{ width: "100%", height: "80%", position: "absolute", top: "10%", right: "5%" }}> <div style={{
<img src={this.state.dizhi + "/" + value.imgs} style={{ width: "100%", height: "100%", marginLeft: "3%", marginRight: "3%" }} /> width: "100%", height: "80%",
// position: "absolute", top: "10%", right: "5%"
}}>
<img src={this.state.dizhi + "/" + value.imgs} style={{
// width: "100%", height: "100%",
width: 140, height: 140,
marginLeft: "3%", marginRight: "3%"
}} />
</div> </div>
</li> </li>
@ -101,11 +113,11 @@ class ReactCarousel extends Component {
</div > </div >
) )
} }
componentDidMount() { //一开始自动播放 componentDidMount () { //一开始自动播放
this.start(); this.start();
} }
componentWillUnmount() { //销毁前清除定时器 componentWillUnmount () { //销毁前清除定时器
this.stop(); this.stop();
} }
stop = () => { //暂停 stop = () => { //暂停

12
web/client/src/sections/quanju/containers/public/olMap.js

@ -12,7 +12,13 @@ const OlMap = (props) => {
const [pointItem, setPointItem] = useState({}) const [pointItem, setPointItem] = useState({})
useEffect(() => { useEffect(() => {
setOlMapOpenData([])
setPointItem({})
if (olMap) {
olMap.closeOverlay('clickOpen')
olMap.closeOverlay('pointClickOpen')
olMap.removeGeometryLayer('geometry0')
}
}, [tab]) }, [tab])
useEffect(() => { useEffect(() => {
@ -256,7 +262,7 @@ const OlMap = (props) => {
scale: 1, // 图标引用 scale: 1, // 图标引用
}, },
}, },
layerName: 'geometry_road_'// + index layerName: 'geometry_road_' + index
}); });
}); });
} }
@ -307,7 +313,7 @@ const OlMap = (props) => {
<div style={{ width: "50%", height: "100%", }}> <div style={{ width: "50%", height: "100%", }}>
{ {
pointItem.id ? pointItem.id ?
<Hua shuzu={ <Hua key={pointItem.id} shuzu={
isRoadProject ? isRoadProject ?
[{ [{
"imgs": pointItem.scene_pic && pointItem.scene_pic.length ? "imgs": pointItem.scene_pic && pointItem.scene_pic.length ?

Loading…
Cancel
Save