|
@@ -110,7 +110,8 @@
|
|
//新地图
|
|
//新地图
|
|
var map = new AMap.Map('container', {
|
|
var map = new AMap.Map('container', {
|
|
zoom: 4,
|
|
zoom: 4,
|
|
- mapStyle: "amap://styles/grey",
|
|
|
|
|
|
+ //mapStyle: "amap://styles/grey",
|
|
|
|
+ mapStyle: "amap://styles/8016abec658e1132508723183f848f14",
|
|
features: ['bg']
|
|
features: ['bg']
|
|
});
|
|
});
|
|
|
|
|
|
@@ -152,7 +153,7 @@
|
|
pointStyle: {
|
|
pointStyle: {
|
|
width: 6,
|
|
width: 6,
|
|
height: 6,
|
|
height: 6,
|
|
- fillStyle:'rgba(0, 236, 252, 0.38)'
|
|
|
|
|
|
+ fillStyle:'rgba(0, 236, 252, 0.9)'
|
|
},
|
|
},
|
|
//鼠标hover时的title信息
|
|
//鼠标hover时的title信息
|
|
hoverTitleStyle: {
|
|
hoverTitleStyle: {
|
|
@@ -188,7 +189,7 @@
|
|
* 绘制一个蓝底白字的label替代聚合标注
|
|
* 绘制一个蓝底白字的label替代聚合标注
|
|
*/
|
|
*/
|
|
drawMyLabel: function(feature, dataItems) {
|
|
drawMyLabel: function(feature, dataItems) {
|
|
- if(dataItems.length != 0){
|
|
|
|
|
|
+ //if(dataItems.length != 0){
|
|
var pixelRatio = this.getPixelRatio(); //高清下存在比例放大
|
|
var pixelRatio = this.getPixelRatio(); //高清下存在比例放大
|
|
|
|
|
|
var containerPos = map.lngLatToContainer(feature.properties.centroid || feature.properties.center);
|
|
var containerPos = map.lngLatToContainer(feature.properties.centroid || feature.properties.center);
|
|
@@ -202,28 +203,59 @@
|
|
labelCtx.save();
|
|
labelCtx.save();
|
|
|
|
|
|
labelCtx.font = 12 * pixelRatio + 'px 微软雅黑';
|
|
labelCtx.font = 12 * pixelRatio + 'px 微软雅黑';
|
|
-
|
|
|
|
- var text = feature.properties.name + '\n' + dataItems.length + '';
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+ 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 textMetrics = labelCtx.measureText(text);
|
|
-
|
|
|
|
var halfTxtWidth = textMetrics.width / 2;
|
|
var halfTxtWidth = textMetrics.width / 2;
|
|
|
|
|
|
- labelCtx.fillStyle = 'rgba(3 , 94 , 255 , 0.5)';//'#3366cc';
|
|
|
|
|
|
+ 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.fillRect(centerX - halfTxtWidth - 3 * pixelRatio,
|
|
|
|
- centerY - 11 * pixelRatio,
|
|
|
|
- textMetrics.width + 6 * pixelRatio,
|
|
|
|
- 22 * pixelRatio);
|
|
|
|
|
|
+ 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,
|
|
|
|
+ // centerY - 11 * pixelRatio,
|
|
|
|
+ // textMetrics.width + 6 * pixelRatio,
|
|
|
|
+ // 22 * pixelRatio);
|
|
|
|
|
|
labelCtx.fillStyle = '#ffffff';
|
|
labelCtx.fillStyle = '#ffffff';
|
|
labelCtx.textBaseline = 'middle';
|
|
labelCtx.textBaseline = 'middle';
|
|
- labelCtx.stroke();
|
|
|
|
- labelCtx.fillText(text, centerX - halfTxtWidth, centerY);
|
|
|
|
|
|
+ //labelCtx.stroke();
|
|
|
|
|
|
|
|
+ labelCtx.fillText(text, centerX - halfTxtWidth, centerY - 5);
|
|
|
|
+ labelCtx.fillText(num , centerX - halfNumWidth, centerY + 12);
|
|
|
|
+
|
|
|
|
+ labelCtx.stroke();
|
|
labelCtx.restore();
|
|
labelCtx.restore();
|
|
- }
|
|
|
|
|
|
+ //}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
@@ -247,7 +279,8 @@
|
|
featureClickToShowSub: true,
|
|
featureClickToShowSub: true,
|
|
featureStyle: {
|
|
featureStyle: {
|
|
lineWidth: 2, //描边线宽
|
|
lineWidth: 2, //描边线宽
|
|
- strokeStyle: 'rgba(31, 119, 180, 0.8)', //描边色
|
|
|
|
|
|
+ // strokeStyle: 'rgba(0, 119, 180, 0.5)', //描边色
|
|
|
|
+ strokeStyle: 'rgba(75, 143, 239, 0.5)', //描边色
|
|
//鼠标Hover后的样式
|
|
//鼠标Hover后的样式
|
|
hoverOptions: {
|
|
hoverOptions: {
|
|
fillStyle: 'rgba(255,255,255,0.2)'
|
|
fillStyle: 'rgba(255,255,255,0.2)'
|