133 lines
4.6 KiB
JavaScript
133 lines
4.6 KiB
JavaScript
/**
|
|
业主详情页面
|
|
**/
|
|
(function(vc) {
|
|
vc.extends({
|
|
data: {
|
|
parkingMapInfo: {
|
|
datas: [],
|
|
parkStatusList: [],
|
|
conditions: {
|
|
communityId: vc.getCurrentCommunity().communityId
|
|
}
|
|
}
|
|
},
|
|
_initMethod: function() {
|
|
|
|
$that._loadDatas();
|
|
|
|
|
|
},
|
|
_initEvent: function() {
|
|
|
|
},
|
|
methods: {
|
|
_loadDatas: function() {
|
|
let param = {
|
|
params: $that.parkingMapInfo.conditions
|
|
}
|
|
//发送get请求
|
|
vc.http.apiGet('/parkingSpace.queryParkingMap',
|
|
param,
|
|
function(json, res) {
|
|
let _json = JSON.parse(json);
|
|
$that.parkingMapInfo.datas = _json;
|
|
$that._initParkingMap();
|
|
},
|
|
function(errInfo, error) {
|
|
console.log('请求失败处理');
|
|
}
|
|
);
|
|
},
|
|
_initParkingMap: function() {
|
|
const parkStatusList = [{
|
|
id: 86,
|
|
status: 1
|
|
}]
|
|
//加载geo数据
|
|
const source = new ol.source.Vector({
|
|
features: (new ol.format.GeoJSON()).readFeatures({
|
|
type: 'FeatureCollection',
|
|
features: $that.parkingMapInfo.datas.map(v => {
|
|
const geoJson = JSON.parse(v.geo);
|
|
//添加属性
|
|
geoJson.properties.type = v.type;
|
|
geoJson.properties.num = v.num;
|
|
geoJson.properties.ID = v.ID;
|
|
return geoJson;
|
|
})
|
|
})
|
|
});
|
|
//定义块样式
|
|
const partStyle = new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
color: '#ffcc33',
|
|
width: 3
|
|
})
|
|
});
|
|
const parkStyle = new ol.style.Style({
|
|
text: new ol.style.Text({
|
|
textAlign: 'center',
|
|
overflow: false, //永久显示
|
|
font: 'bold 20px 微软雅黑',
|
|
fill: new ol.style.Fill({
|
|
color: 'black'
|
|
})
|
|
})
|
|
});
|
|
const redStyle = new ol.style.Style({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(255,0,0,0.5)',
|
|
})
|
|
});
|
|
const greenStyle = new ol.style.Style({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(0,255,0,0.5)',
|
|
})
|
|
});
|
|
//初始化图层
|
|
const vectorLayer = new ol.layer.Vector({
|
|
background: 'lightgray',
|
|
source: source,
|
|
style: function(feature) {
|
|
const { type, num, ID } = feature.getProperties();
|
|
const styles = [partStyle];
|
|
if (type == '车位') {
|
|
parkStyle.getText().setText(num);
|
|
styles.push(parkStyle);
|
|
if (parkStatusList.find(v => v.id == ID) ? .status) {
|
|
styles.push(redStyle);
|
|
} else {
|
|
styles.push(greenStyle);
|
|
}
|
|
}
|
|
return styles;
|
|
}
|
|
});
|
|
const view = new ol.View({
|
|
center: [0, 0],
|
|
zoom: 1,
|
|
});
|
|
//初始化画布
|
|
const map = new ol.Map({
|
|
layers: [
|
|
vectorLayer,
|
|
],
|
|
target: 'map',
|
|
view: view,
|
|
});
|
|
//定位
|
|
view.fit(source.getExtent(), {
|
|
nearest: true,
|
|
padding: [0, 250, 0, 0]
|
|
})
|
|
},
|
|
refreshParkStatus: function() {
|
|
parkStatusList[0].status = !parkStatusList[0].status;
|
|
vectorLayer.changed();
|
|
}
|
|
|
|
|
|
}
|
|
});
|
|
})(window.vc); |