11 changed files with 454 additions and 62 deletions
|
After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1,189 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { geoJson } from './mock_data'; |
|||
|
|||
export default class Bounds extends Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.map = props.map; |
|||
this.pl = {}; |
|||
this.textMarker = {}; |
|||
} |
|||
static propTypes = { |
|||
prop: PropTypes |
|||
} |
|||
|
|||
componentDidMount() { |
|||
if (!window.BoundPl) { |
|||
this.drawBounds(); |
|||
} |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
if (window.local_) |
|||
window.local_.remove(this.pl); |
|||
this.textMarker = null; |
|||
window.BoundPl = null; |
|||
} |
|||
|
|||
drawBounds = () => { |
|||
var map = this.map; |
|||
var loca = window.local_; |
|||
loca.ambLight = { |
|||
intensity: 0.3, |
|||
color: '#fff', |
|||
}; |
|||
loca.dirLight = { |
|||
intensity: 0.6, |
|||
color: '#fff', |
|||
target: [0, 0, 0], |
|||
position: [0, -1, 1], |
|||
}; |
|||
loca.pointLight = { |
|||
color: 'rgb(100,100,100)', |
|||
position: [120.24289, 30.341335, 20000], |
|||
intensity: 3, |
|||
// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
|
|||
distance: 50000, |
|||
}; |
|||
var geo = new Loca.GeoJSONSource({ |
|||
data: geoJson |
|||
}); |
|||
|
|||
var colors = ['#04398c', '#04398c', '#0542a5'].reverse(); |
|||
var height = [500]; |
|||
var pl = new Loca.PolygonLayer({ |
|||
// loca,
|
|||
zIndex: 1, |
|||
opacity: 0.6, |
|||
// cullface: 'none',
|
|||
shininess: 10, |
|||
hasSide: true, |
|||
}); |
|||
|
|||
pl.setSource(geo); |
|||
pl.setStyle({ |
|||
topColor: function (index, feature) { |
|||
var i = index % 3; |
|||
return colors[i]; |
|||
}, |
|||
sideColor: function (index, feature) { |
|||
return '#023890'; |
|||
}, |
|||
borderColor: function () { |
|||
return '#24dcf7' |
|||
}, |
|||
height: function (index, feature) { |
|||
return index == 0 ? height[0] : height[0] + index * 50; |
|||
}, |
|||
altitude: 0, |
|||
}); |
|||
loca.add(pl); |
|||
|
|||
// 创建纯文本标记
|
|||
var text = new AMap.Text({ |
|||
text: '纯文本标记', |
|||
anchor: 'center', // 设置文本标记锚点
|
|||
draggable: true, |
|||
cursor: 'pointer', |
|||
angle: 0, |
|||
visible: false, |
|||
offset: [60, 60], |
|||
extData: 'bounds_text', |
|||
style: { |
|||
'padding': '5px 10px', |
|||
'margin-bottom': '1rem', |
|||
'border-radius': '.25rem', |
|||
'background-color': 'rgba(0,0,0,0.5)', |
|||
// 'width': '12rem',
|
|||
'border-width': 0, |
|||
'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)', |
|||
'text-align': 'center', |
|||
'font-size': '16px', |
|||
'color': '#fff', |
|||
}, |
|||
}); |
|||
// text.setMap(map);
|
|||
if (!this.textMarker) |
|||
map.add(text); |
|||
this.textMarker = text; |
|||
console.log(text) |
|||
// 拾取
|
|||
map.on('mousemove', (e) => { |
|||
var feat = pl.queryFeature(e.pixel.toArray()); |
|||
// if (!text) {
|
|||
map.add(text); |
|||
// text = this.textMarker;
|
|||
// }
|
|||
|
|||
if (feat) { |
|||
text.show(); |
|||
text.setText(feat.properties.NAME); |
|||
text.setPosition(e.lnglat); |
|||
|
|||
pl.setStyle({ |
|||
topColor: (index, feature) => { |
|||
if (feature === feat) { |
|||
return [19, 43, 77, 1]; |
|||
} |
|||
// var v = feature.properties.health * 100;
|
|||
var i = index % 3; |
|||
return colors[i]; |
|||
}, |
|||
sideColor: (index, feature) => { |
|||
if (feature === feat) { |
|||
return '#023890'; |
|||
} |
|||
return '#023890'; |
|||
}, |
|||
borderColor: function () { |
|||
return '#24dcf7' |
|||
}, |
|||
height: function (index, feature) { |
|||
return index == 0 ? height[0] : height[0] + index * 50; |
|||
|
|||
}, |
|||
}); |
|||
} else { |
|||
pl.setStyle({ |
|||
topColor: function (index, feature) { |
|||
var i = index % 3; |
|||
return colors[i]; |
|||
}, |
|||
sideColor: function (index, feature) { |
|||
return '#023890'; |
|||
}, |
|||
borderColor: function () { |
|||
return '#24dcf7' |
|||
}, |
|||
height: function (index, feature) { |
|||
return index == 0 ? height[0] : height[0] + index * 50; |
|||
}, |
|||
altitude: 0, |
|||
}); |
|||
|
|||
text.hide(); |
|||
map.remove(text); |
|||
} |
|||
}); |
|||
|
|||
|
|||
map.setZoom(11) |
|||
map.setCenter([115.912663,28.543149]); |
|||
map.setRotation(-68.7); |
|||
map.setPitch(42); |
|||
|
|||
this.pl = pl; |
|||
window.BoundPl = pl; |
|||
} |
|||
|
|||
render() { |
|||
|
|||
return ( |
|||
<div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,53 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import Bounds from './bounds'; |
|||
|
|||
const MAPID = 'screenGis' |
|||
const Gis = (props) => { |
|||
|
|||
const [mapObj, setMapObj] = useState(); |
|||
|
|||
useEffect(() => { |
|||
if (AMap) loadMap(); |
|||
return () => { |
|||
if (window.local_) { |
|||
window.local_ = null |
|||
} |
|||
if (mapObj) |
|||
mapObj.clearMap(); |
|||
} |
|||
}, [true]) |
|||
|
|||
const loadMap = () => { |
|||
const map = new AMap.Map(MAPID, { |
|||
resizeEnable: true, |
|||
center: [115.912663,28.543149],//地图中心点，初始定位加载显示楼块
|
|||
zoom: 15,//地图显示的缩放级别
|
|||
zooms: [10, 12], |
|||
pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
|
|||
viewMode: '3D', // 地图模式
|
|||
mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc', |
|||
}); |
|||
|
|||
let windowOnload = false; |
|||
map.on('complete', function () { |
|||
if (!window.local_) { |
|||
window.local_ = new Loca.Container({ map }); |
|||
setMapObj(map); |
|||
} |
|||
}); |
|||
window.onload = function () { |
|||
windowOnload = true; |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<div style={{ position: 'absolute', width: '100%', backgroundColor: '#101824', height: '100%', minHeight: 700 }}> |
|||
<div id={MAPID} style={{ width: '100%', height: '100%', background: "#101824", minHeight: 700 }} /> |
|||
{mapObj ? <Bounds map={mapObj} /> : ''} |
|||
</div > |
|||
) |
|||
} |
|||
|
|||
|
|||
export default Gis |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue