路线标注

app/service/tender_map.js

@@ -39,6 +39,7 @@ module.exports = app => {
                 color: mapData.color,
                 map_json: mapData.map_json,
                 center: mapData.center,
+                tips: mapData.tips,
             };
             return await this.db.update(this.tableName, updateData, { where: { id } });
         }

app/view/tender/detail.ejs

@@ -1304,6 +1304,7 @@
             const centerPoint = { lng: 116.404, lat: 39.915 };
             let level = 15;
             const pointList = [];
+            const centerList = [];
             for (const tm of tenderMapList) {
                 if (tm.map_json) {
                     const map_json = JSON.parse(unescape(escape(tm.map_json)));
@@ -1318,6 +1319,10 @@
                     });
                     const center = JSON.parse(tm.center);
                     pointList.push(turf.point([center.lng, center.lat]));
+                    if (tm.tips) {
+                        const centerResult = gcoord.transform([map_json[Math.ceil(map_json.length/2)].lng, map_json[Math.ceil(map_json.length/2)].lat], gcoord.WGS84, gcoord.BD09);
+                        centerList.push({ map: new BMapGL.Point(centerResult[0], centerResult[1]), color: tm.color, tips: tm.tips });
+                    }
                 }
             }
             if (pointList.length > 0) {
@@ -1360,6 +1365,24 @@
                     map.addOverlay(polyline);
                 }
             }
+            if (centerList.length > 0) {
+                for (const cl of centerList) {
+                    const opts = {
+                        position : cl.map,    // 指定文本标注所在的地理位置
+                        offset   : new BMapGL.Size(0, 0)    //设置文本偏移量
+                    }
+                    const label = new BMapGL.Label(cl.tips, opts);  // 创建文本标注对象
+                    label.setStyle({
+                        color : cl.color,
+                        fontSize : '10px',
+                        height : '20px',
+                        lineHeight : '20px',
+                        fontFamily: '微软雅黑',
+                        border: '1px solid ' + cl.color,
+                    });
+                    map.addOverlay(label);
+                }
+            }
         })
 
     </script>

app/view/tender/detail_modal.ejs

@@ -2040,8 +2040,9 @@
             </div>
             <div class="modal-body">
                 <input class="form-control form-control-sm mb-1" type="text" id="map-name" value="" placeholder="请输入路线名称">
+                <input class="form-control form-control-sm mb-1" type="text" id="map-tips" value="" placeholder="请输入路线标注（可以为空）">
                 <div id="map-color-select" class="input-group mb-1">
-                    <input id="map-color" type="text" class="form-control form-control-sm" style="height: 30px" />
+                    <input id="map-color" type="text" placeholder="请选择路线颜色" class="form-control form-control-sm" style="height: 30px" />
                     <span class="input-group-append"><span class="input-group-text colorpicker-input-addon"><i></i></span></span>
                 </div>
                 <!--<input class="form-control form-control-sm mb-1" type="text" id="map-color" value="#ff0000" placeholder="请选择路线颜色">-->
@@ -2196,6 +2197,7 @@
             // 加载sjs
             const mapInfo = _.find(tenderMapList, { id });
             $('#map-name').val(mapInfo.name);
+            $('#map-tips').val(mapInfo.tips);
             $('#map-color').val(mapInfo.color);
             $('#map-color').attr('value', mapInfo.color);
             $('#map-color-select').colorpicker("setValue", mapInfo.color);
@@ -2432,6 +2434,10 @@
                     toastr.error('请选择或输入正确的颜色编码');
                     return;
                 }
+                if ($('#map-tips').val().length > 255) {
+                    toastr.error('路线标注太长啦~');
+                    return;
+                }
             }
             if (!pass) {
                 const str = wrongRow.join('、');
@@ -2457,8 +2463,10 @@
                 id,
                 name: $('#map-name').val(),
                 color: $('#map-color').val(),
+                tips: $('#map-tips').val(),
                 map_json: mapData.length > 0 ? JSON.stringify(mapData) : null,
                 center: centerPoints.lng !== '' ? JSON.stringify(centerPoints) : null,
+
             }
             const mapInfo = _.find(tenderMapList, { id });
             oneMapData.create_time = mapInfo.create_time;

sql/update20210831.sql

@@ -69,3 +69,5 @@ CREATE TABLE `zh_netcasign_log` (
   KEY `tid` (`tid`),
   KEY `uid` (`uid`)
 ) ENGINE=InnoDB AUTO_INCREMENT=254 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT='签名记录信息表';
+
+ALTER TABLE `zh_tender_map` ADD `tips` VARCHAR(255) NULL DEFAULT '' COMMENT '路线备注' AFTER `center`;