地图修改

ys_vue/src/views/map/map.vue

@@ -153,7 +153,7 @@
                         pointStyle: {
                             width: 6,
                             height: 6,
-                            fillStyle:'rgba(0, 236, 252, 0.38)'
+                            fillStyle:'rgba(0, 236, 252, 0.9)'
                         },
                         //鼠标hover时的title信息
                         hoverTitleStyle: {
@@ -202,23 +202,43 @@
 
                             labelCtx.save();
 
-                            labelCtx.font = 15 * pixelRatio + 'px 微软雅黑';
-
-                            var text = feature.properties.name ;//+ '\n' + dataItems.length;
-
+                            labelCtx.font = 12 * pixelRatio + 'px 微软雅黑';
+                            
+                            var name = feature.properties.name;
+                            if(feature.properties.level == "province") {
+                                if(name == "黑龙江省" || name == "内蒙古自治区"){
+                                    name = name.substring(0,3)
+                                } else {
+                                    name = name.substring(0,2)
+                                }
+                            }
+                            var text = name;//feature.properties.name ;//+ '\n' + dataItems.length;
                             var textMetrics = labelCtx.measureText(text);
-
                             var halfTxtWidth = textMetrics.width / 2;
 
-                            labelCtx.beginPath();
+                            var num = dataItems.length;
+                            var numMetrics = labelCtx.measureText(num);
+                            var halfNumWidth = numMetrics.width / 2;
+
                             // labelCtx.fillStyle = 'rgba(3 , 94 , 255 , 0.5)';//'#3366cc';
+                            
+                            labelCtx.beginPath();
                             labelCtx.fillStyle = 'rgba(12 , 239 , 231 , 0.8)';//'#3366cc';
+
                             //绘制一个蓝色背景
-                            labelCtx.strokeStyle= "rgba(12 , 239 , 231 , 0.5)"
-                            labelCtx.fillStyle = 'rgba(12 , 239 , 231 , 0.5)';
-                            labelCtx.arc(centerX , centerY,
-                                (textMetrics.width + 6 * pixelRatio) / 2,
-                                0*Math.PI,2*Math.PI,false);
+                            labelCtx.strokeStyle= "rgba(12 , 239 , 231 , 0.8)"
+                            labelCtx.fillStyle = 'rgba(12 , 239 , 231 , 0.8)';
+                            
+                            var radius = 0;
+                            if(textMetrics.width > numMetrics.width) {
+                                radius = (textMetrics.width + 6 * pixelRatio) / 2;
+                            } else {
+                                radius = (numMetrics.width + 6 * pixelRatio) / 2;
+                            }
+
+                            labelCtx.arc(centerX , centerY, radius + 6,
+                                0*Math.PI, 2*Math.PI, false);
+
                             labelCtx.closePath();
                             labelCtx.fill();
                             // labelCtx.fillRect(centerX - halfTxtWidth - 3 * pixelRatio,
@@ -229,8 +249,10 @@
                             labelCtx.fillStyle = '#ffffff';
                             labelCtx.textBaseline = 'middle';
                             //labelCtx.stroke();
-                            labelCtx.fillText(text, centerX - halfTxtWidth, centerY);
-                            labelCtx.fillText(dataItems.length , centerX - 4, centerY + 15);
+
+                            labelCtx.fillText(text, centerX - halfTxtWidth, centerY - 5);
+                            labelCtx.fillText(num , centerX - halfNumWidth, centerY + 12);
+
                             labelCtx.stroke();
                             labelCtx.restore();
                         //}