mirror of
https://gitee.com/java110/MicroCommunityWeb.git
synced 2026-02-24 05:46:03 +08:00
210 lines
9.2 KiB
JavaScript
210 lines
9.2 KiB
JavaScript
/**
|
||
业主详情页面
|
||
**/
|
||
(function (vc) {
|
||
vc.extends({
|
||
data: {
|
||
aInspectionTaskMapInfo: {
|
||
datas: [],
|
||
map: {}
|
||
|
||
}
|
||
},
|
||
_initMethod: function () {
|
||
|
||
},
|
||
_initEvent: function () {
|
||
vc.on('aInspectionTaskMap', 'initMap', function (_data) {
|
||
$that._queryAInspectionTaskMap(_data);
|
||
});
|
||
vc.on('aInspectionTaskMap', 'switch', function (_data) {
|
||
$that._queryAInspectionTaskMap(_data);
|
||
});
|
||
},
|
||
methods: {
|
||
|
||
_queryAInspectionTaskMap: function (_route) {
|
||
let param = {
|
||
params: {
|
||
taskId: _route.taskId,
|
||
page: 1,
|
||
row: 1000
|
||
}
|
||
};
|
||
//发送get请求
|
||
vc.http.apiGet('/inspection.queryAdminInspectionTaskDetail',
|
||
param,
|
||
function (json) {
|
||
let _json = JSON.parse(json);
|
||
$that.aInspectionTaskMapInfo.data = _json.data;
|
||
|
||
$that.initAInspectionTaskMap(_json.data);
|
||
|
||
},
|
||
function () {
|
||
console.log('请求失败处理');
|
||
}
|
||
);
|
||
},
|
||
initAInspectionTaskMap: function (_pos) {
|
||
let _lng = 116.307484;
|
||
let _lat = 39.984120;
|
||
// _pos.forEach(_m => {
|
||
// let _latLon = wgs84togcj02(_m.lng,_m.lat);
|
||
|
||
// });
|
||
|
||
if (!_pos || _pos.length < 1) {
|
||
return;
|
||
}
|
||
_pos.forEach(_p => {
|
||
if (_p.lat) {
|
||
_lat = _p.lat;
|
||
_lng = _p.lng;
|
||
}
|
||
});
|
||
|
||
if($that.aInspectionTaskMapInfo.map && $that.aInspectionTaskMapInfo.map.hasOwnProperty('height')){
|
||
$that.aInspectionTaskMapInfo.map.destroy();
|
||
}
|
||
|
||
|
||
let center = new TMap.LatLng(_lat, _lng)
|
||
//定义map变量，调用 TMap.Map() 构造函数创建地图
|
||
let map = new TMap.Map(document.getElementById('aInspectionTaskMap'), {
|
||
center: center,//设置地图中心点坐标
|
||
zoom: 18, //设置地图缩放级别
|
||
baseMap: { //底图设置（参数为：VectorBaseMap对象）
|
||
type: 'vector', //类型：失量底图
|
||
features: ['base', 'building2d', 'point']
|
||
//仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
|
||
}
|
||
});
|
||
$that.aInspectionTaskMapInfo.map = map;
|
||
$that._addTaskPointMachine(_pos);
|
||
},
|
||
_addTaskPointMachine: function (_pos) {
|
||
let _geometriesMarker = [];
|
||
let _geometriesLabel = [];
|
||
let _path = [];
|
||
|
||
_pos.forEach(_m => {
|
||
try {
|
||
let center = new TMap.LatLng(_m.lat, _m.lng);
|
||
let _markerStyle = 'myStyle';
|
||
if(_m.state == '20200405'){
|
||
_markerStyle = 'myStyle_red';
|
||
}
|
||
_geometriesMarker.push({
|
||
"id": _m.inspectionId, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
|
||
"styleId": _markerStyle, //指定样式id
|
||
"position": center, //点标记坐标位置
|
||
});
|
||
|
||
let _layerStyle = 'label';
|
||
if(_m.state == '20200405'){
|
||
_layerStyle = 'label_red';
|
||
}
|
||
|
||
_geometriesLabel.push({
|
||
'id': 'label_' + _m.inspectionId, //点图形数据的标志信息
|
||
'styleId': _layerStyle, //样式id
|
||
'position': center, //标注点位置
|
||
// 'content': _m.staffName, //标注文本
|
||
'content': _m.inspectionName
|
||
});
|
||
_path.push(center);
|
||
} catch (e) {
|
||
|
||
}
|
||
});
|
||
let markerLayer = new TMap.MultiMarker({
|
||
map: $that.aInspectionTaskMapInfo.map, //指定地图容器
|
||
//样式定义
|
||
styles: {
|
||
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
|
||
"myStyle": new TMap.MarkerStyle({
|
||
"width": 25, // 点标记样式宽度（像素）
|
||
"height": 35, // 点标记样式高度（像素）
|
||
"src": '/img/inspection.png', //图片路径
|
||
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
|
||
"anchor": { x: 32, y: 32 }
|
||
}),
|
||
"myStyle_red": new TMap.MarkerStyle({
|
||
"width": 25, // 点标记样式宽度（像素）
|
||
"height": 35, // 点标记样式高度（像素）
|
||
"src": '/img/inspection_do.png', //图片路径
|
||
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
|
||
"anchor": { x: 32, y: 32 }
|
||
})
|
||
},
|
||
//点标记数据数组
|
||
geometries: _geometriesMarker
|
||
});
|
||
|
||
let label = new TMap.MultiLabel({
|
||
id: 'label-layer',
|
||
map: $that.aInspectionTaskMapInfo.map, //设置折线图层显示到哪个地图实例中
|
||
//文字标记样式
|
||
styles: {
|
||
'label': new TMap.LabelStyle({
|
||
'color': '#3777FF', //颜色属性
|
||
'size': 20, //文字大小属性
|
||
'offset': { x: 0, y: 15 }, //文字偏移属性单位为像素
|
||
'angle': 0, //文字旋转属性
|
||
'alignment': 'center', //文字水平对齐属性
|
||
'verticalAlignment': 'middle' //文字垂直对齐属性
|
||
}),
|
||
'label_red': new TMap.LabelStyle({
|
||
'color': '#CC0000', //颜色属性
|
||
'size': 20, //文字大小属性
|
||
'offset': { x: 0, y: 15 }, //文字偏移属性单位为像素
|
||
'angle': 0, //文字旋转属性
|
||
'alignment': 'center', //文字水平对齐属性
|
||
'verticalAlignment': 'middle' //文字垂直对齐属性
|
||
})
|
||
},
|
||
//文字标记数据
|
||
geometries: _geometriesLabel
|
||
});
|
||
|
||
let polylineLayer = new TMap.MultiPolyline({
|
||
id: 'polyline-layer', //图层唯一标识
|
||
map: $that.aInspectionTaskMapInfo.map,//设置折线图层显示到哪个地图实例中
|
||
//折线样式定义
|
||
styles: {
|
||
'style_blue': new TMap.PolylineStyle({
|
||
'color': '#3777FF', //线填充色
|
||
'width': 6, //折线宽度
|
||
'borderWidth': 5, //边线宽度
|
||
'borderColor': '#FFF', //边线颜色
|
||
'lineCap': 'butt' //线端头方式
|
||
}),
|
||
'style_red': new TMap.PolylineStyle({
|
||
'color': '#CC0000', //线填充色
|
||
'width': 6, //折线宽度
|
||
'borderWidth': 5, //边线宽度
|
||
'borderColor': '#FFF', //边线颜色
|
||
'lineCap': 'butt' //线端头方式
|
||
}),
|
||
},
|
||
//折线数据定义
|
||
geometries: [
|
||
{//第1条线
|
||
'id': 'pl_1',//折线唯一标识，删除时使用
|
||
'styleId': 'style_blue',//绑定样式名
|
||
'paths': _path
|
||
},
|
||
{//第1条线
|
||
'id': 'pl_2',//折线唯一标识，删除时使用
|
||
'styleId': 'style_red',//绑定样式名
|
||
'paths': _path
|
||
}
|
||
]
|
||
});
|
||
}
|
||
|
||
|
||
}
|
||
});
|
||
})(window.vc); |