/** 业主详情页面 **/ (function (vc) { vc.extends({ data: { inspectionTaskMapInfo: { datas: [], map: {} } }, _initMethod: function () { }, _initEvent: function () { vc.on('inspectionTaskMap', 'initMap', function (_data) { $that._queryInspectionTaskMap(_data); }); vc.on('inspectionTaskMap', 'switch', function (_data) { $that._queryInspectionTaskMap(_data); }); }, methods: { _queryInspectionTaskMap: function (_route) { let param = { params: { communityId: vc.getCurrentCommunity().communityId, taskId: _route.taskId, page: 1, row: 1000 } }; //发送get请求 vc.http.apiGet('/inspection.queryInspectionTaskDetail', param, function (json) { let _json = JSON.parse(json); $that.inspectionTaskMapInfo.data = _json.data; $that.initInspectionTaskMap(_json.data); }, function () { console.log('请求失败处理'); } ); }, initInspectionTaskMap: 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; } }); let center = new TMap.LatLng(_lat, _lng) //定义map变量,调用 TMap.Map() 构造函数创建地图 let map = new TMap.Map(document.getElementById('inspectionTaskMap'), { center: center,//设置地图中心点坐标 zoom: 18, //设置地图缩放级别 baseMap: { //底图设置(参数为:VectorBaseMap对象) type: 'vector', //类型:失量底图 features: ['base', 'building2d', 'point'] //仅渲染:道路及底面(base) + 2d建筑物(building2d),以达到隐藏文字的效果 } }); $that.inspectionTaskMapInfo.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.inspectionTaskMapInfo.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.inspectionTaskMapInfo.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.inspectionTaskMapInfo.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);