14 changed files with 599 additions and 47302 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,188 +1,188 @@ |
|||
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(12.88) |
|||
map.setCenter([115.888149, 28.549851]); |
|||
map.setRotation(-68.7); |
|||
map.setPitch(42); |
|||
|
|||
this.pl = pl; |
|||
window.BoundPl = pl; |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
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(12.88) |
|||
map.setCenter([115.888149, 28.549851]); |
|||
map.setRotation(-68.7); |
|||
map.setPitch(42); |
|||
|
|||
this.pl = pl; |
|||
window.BoundPl = pl; |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Loading…
Reference in new issue