地图级别计算

app/view/tender/detail.ejs

@@ -56,7 +56,7 @@
         </div>
     </div>
     <div class="content-wrap" id="big-data">
-        <div style="height: 34px;background-color: #2c3237; display: none" id="exitfull-div">
+        <div style="height: 70px;background-color: #2c3237; display: none" id="exitfull-div">
             <div class="title-main d-flex">
                 <div class="ml-auto">
                     <div class="dropdown d-flex float-left mt-1 mr-2">
@@ -1260,6 +1260,7 @@
 
             const polyLineList = [];
             const centerPoint = { lng: 116.404, lat: 39.915 };
+            let level = 15;
             const pointList = [];
             for (const tm of tenderMapList) {
                 if (tm.map_json) {
@@ -1278,24 +1279,42 @@
                 }
             }
             if (pointList.length > 0) {
+                let maxDistance = 0;
+                // 中心点计算
                 const features = turf.featureCollection(pointList);
                 const center = turf.center(features);
                 if (center && center.geometry && center.geometry.coordinates && center.geometry.coordinates.length === 2) {
                     centerPoint.lng = _.round(center.geometry.coordinates[0], 4);
                     centerPoint.lat = _.round(center.geometry.coordinates[1], 4);
-                    const result = gcoord.transform([centerPoint.lng, centerPoint.lat], gcoord.WGS84, gcoord.BD09);
-                    centerPoint.lng = result[0];
-                    centerPoint.lat = result[1];
                 }
+                // 地图级别计算
+                for (const c of pointList) {
+                    const distance = turf.distance(c, turf.point([centerPoint.lng, centerPoint.lat]));
+                    if (distance > maxDistance) {
+                        maxDistance = distance;
+                    }
+                }
+                const result = gcoord.transform([centerPoint.lng, centerPoint.lat], gcoord.WGS84, gcoord.BD09);
+                centerPoint.lng = result[0];
+                centerPoint.lat = result[1];
+                // 级别区间
+                // const range = [0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 25, 50, 100, 200, 500, 1000, 2000, 5000, 10000];
+                const range = [10000, 5000, 2000, 1000, 500, 200, 100, 50, 25, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1, 0.05, 0.02];
+                level = _.findIndex(range, function (item) {
+                    return item <= maxDistance;
+                })
+                level = level + 1;
             }
             // 初始化地图，设置中心点坐标和地图级别
             const point = new BMapGL.Point(centerPoint.lng, centerPoint.lat);
-            map.centerAndZoom(point, 15);
+            map.centerAndZoom(point, level);
+            // const LocationControl = new BMapGL.LocationControl();  // 添加比例尺控件
+            // map.addControl(LocationControl);
             map.enableScrollWheelZoom(true);
             map.setMapStyleV2({styleId: '20d4aea41cf71387395f2dc835f1c4b6'});
             if (polyLineList.length > 0) {
                 for (const pl of polyLineList) {
-                    const polyline = new BMapGL.Polyline(pl.map, {strokeColor: pl.color, strokeWeight:5, strokeOpacity:1});
+                    const polyline = new BMapGL.Polyline(pl.map, {strokeColor: pl.color, strokeWeight:15, strokeOpacity:1});
                     map.addOverlay(polyline);
                 }
             }

app/view/tender/detail_modal.ejs

@@ -2040,7 +2040,11 @@
             </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-color" value="" placeholder="请选择路线颜色">
+                <div id="map-color-select" class="input-group mb-1" title="Using input value">
+                    <input id="map-color" type="text" class="form-control form-control-sm" />
+                    <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="请选择路线颜色">-->
                 <div class="modal-height-300" style="overflow-y: auto">
                     <div id="map-spread" style="height: 297px; width: 465px;"></div>
                 </div>
@@ -2092,7 +2096,6 @@
     const hadMap = parseInt(<%- hadMap %>);
     $(function () {
         $('#bd-set-11').on('show.bs.modal', function () {
-            console.log(hadMap);
             if (parseInt(hadMap) == 0) {
                 $('#bd-set-11').find('.card').eq(0).addClass('border-dark');
                 $('#bd-set-11').find('.card').eq(0).find('.btn').removeClass('select-map').addClass('disabled').text('当前');
@@ -2129,7 +2132,6 @@
                 toastr.warning('未更改当前设置，无需提交');
             }
         })
-        $('#map-color').colorpicker();
         $('#add-map').click(function () {
             const num = $('#map-table tr').length;
             const name = '路线' + (num+1);
@@ -2174,6 +2176,8 @@
             const mapInfo = _.find(tenderMapList, { id });
             $('#map-name').val(mapInfo.name);
             $('#map-color').val(mapInfo.color);
+            console.log(mapInfo.color);
+            $('#map-color-select').colorpicker({"color": mapInfo.color});
             SpreadJsObj.loadSheetData(mapSpread.getActiveSheet(), SpreadJsObj.DataType.Data, (mapInfo.map_json ? JSON.parse(unescape(escape(mapInfo.map_json))) : []));
         });
         const xPattern = /^-?(\d{1,2}(\.\d{1,8})?|1[0-7]\d(\.\d{1,8})?|180)$/;