javascript - leafletjs - 谷歌浏览器呈现的圆圈并不完美

Question

当 Google Chrome 读取我的 map 时，圆圈出现问题，如左图所示，而 Mozilla Firefox 可以完美读取右侧图像。

所以，我在将圆权重从1转换为7时发现了这个问题。事实上，我一直在寻找解决方案，但没有任何帮助。这是我的演示和完整源代码，位于

circle = L.circle([parseFloat(cordinate[0]), parseFloat(cordinate[1])], 7, {
   color: markers[x].color,
   opacity: 0.8,
   weight: 7,
   fillColor: markers[x].color,
   fillOpacity: 0.8,
   className:'circle-obj'
 }).addTo(mymap);

https://jsfiddle.net/youo8uht/5/

如果有其他解决方案或替代方法，我很感激，谢谢:)

Answer 1

运动动画:更改描边宽度在除 FF 之外的所有浏览器中效果不佳。它尝试调整 SVG 元素的笔画，实际上它是一个标记。我想提供一个在所有浏览器上都能很好地工作的示例。此示例使用您的数据并构建 SVG 圆圈而不是标记。尝试一下。

  var markers = [
        {"state_id": 12,
        "location": "2.9619, 101.7571",
        "name": "Bandar Baru Bangi",
        "subsribers": {
          "total": 10,
          "user_type": [
            {
            "type": "Student",
              "total": 10
            }
          ]
        },
        "color": "#E9D149"
      },
      {
        "state_id": 12,
        "location": "2.9725, 101.7948",
        "name": "Taman Kajang Utama",
        "subsribers": {
          "total": 30,
          "user_type": [
            {
              "type": "Student",
              "total": 30
            }
          ]
        },
        "color": "#E9D149"
      },
      {
        "state_id": 10,
        "location": "5.9804, 116.0735",
        "name": "Kota Kinabalu",
        "subsribers": {
          "total": 20,
          "user_type": [
            {
              "type": "Student",
              "total": 20
            }
          ]
        },
        "color": "#E9D149"
      },
      {
        "state_id": 6,
        "location": "3.7634, 103.2202",
        "name": "Kuantan",
        "subsribers": {
          "total": 20,
          "user_type": [
            {
              "type": "Student",
              "total": 20
            }
          ]
        },
        "color": "#E9D149"
      },
      {
        "state_id": 14,
        "location": "3.2637, 101.6538",
        "name": "Selayang",
        "subsribers": {
          "total": 20,
          "user_type": [
            {
              "type": "Parent",
              "total": 20
            }
          ]
        },
        "color": "#95D440"
      },
      {
        "state_id": 12,
        "location": "2.8123, 101.7809",
        "name": "Bandar Baru Nilai",
        "subsribers": {
          "total": 20,
          "user_type": [
            {
              "type": "Parent",
              "total": 20
            }
          ]
        },
        "color": "#95D440"
      },
      {
        "state_id": 12,
        "location": "2.9474, 101.8451",
        "name": "Semenyih",
        "subsribers": {
          "total": 10,
          "user_type": [
            {
              "type": "Parent",
              "total": 10
            }
          ]
        },
        "color": "#95D440"
      },
      {
        "state_id": 10,
        "location": "6.4657, 116.7264",
        "name": "Kota Marudu",
        "subsribers": {
          "total": 10,
          "user_type": [
            {
              "type": "Teacher",
              "total": 10
            }
          ]
        },
        "color": "#0097E2"
      },
      {
        "state_id": 11,
        "location": "1.6077, 110.3785",
        "name": "Kuching",
        "subsribers": {
          "total": 40,
          "user_type": [
            {
              "type": "Student",
              "total": 30
            },
            {
              "type": "Parent",
              "total": 5
            },
            {
              "type": "Teacher",
              "total": 5
            }
          ]
        },
        "color": "#FC3915"
      }
    ];

var mymap;

var NS="http://www.w3.org/2000/svg"
var MySVG;
var SymbolG;
$(document).ready(function(){
    var mapView = [4.2105, 101.9758];
    mymap = L.map('mapid').setView(mapView, 6);
    //---zooming the map---
    mymap.on("viewreset", adjustSVGSymbols);
    var offset = mymap.getSize().x*0.30;
    mymap.panBy(new L.Point(offset, 0), {animate: false});
    mymap.attributionControl.setPrefix('');
    //---CREATE SVG---
    mymap._initPathRoot() //---creates an svg layer---
    MySVG=document.querySelector("svg") //---access svg element---
    //---place symbols in here---
    SymbolG=document.createElementNS(NS,"g")
    MySVG.appendChild(SymbolG)

    userCoordinateSVG();


});

function userCoordinateSVG(){
   L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 18,
   }).addTo(mymap);
   var circle, cordinate;
   for(var x in markers){

        cordinate = markers[x].location.split(',');
        var lat=parseFloat(cordinate[0])
        var lng=parseFloat(cordinate[1])
        circle=document.createElementNS(NS,"circle")
        circle.setAttribute("class","circle-obj")
        circle.setAttribute("cursor","default")
        circle.setAttribute("opacity",.8)
        circle.setAttribute("fill",markers[x].color)
        circle.setAttribute("r",5)

             for(var y in markers[x].subsribers.user_type){
                user = markers[x].subsribers.user_type[y];
              }

         //---attach data to element--
        circle.setAttribute("state",markers[x].state_id)
        circle.setAttribute("subscribers",markers[x].subsribers.total)
        circle.setAttribute("name",markers[x].name)
        circle.setAttribute("total",user.total)
        circle.setAttribute("type",user.type)
        circle.setAttribute("onmouseover","showData(evt)")
        circle.setAttribute("onmouseout","hideData(evt)")

        //---required for sizing/reposition on zoom---
        circle.setAttribute("lat",lat)
        circle.setAttribute("lng",lng)
        //---convert lat/lng to x,y---
        var latLng= new  L.latLng(lat, lng)
        var transX=mymap.latLngToLayerPoint(latLng).x
        var transY=mymap.latLngToLayerPoint(latLng).y
        circle.setAttribute("transform","translate("+transX+" "+transY+")")
        SymbolG.appendChild(circle)
   }
}
//--- on map zoom - fired via map event: viewreset---
function adjustSVGSymbols()
{
	//--a scale value used to auto-size the symbols--
	var scale=mymap.getZoom()/2

	var symbols=SymbolG.childNodes
	for(var k=0;k<symbols.length;k++)
	{
		var symbol=symbols.item(k)
		//---initial lat/lng for symbol---
		var lat=parseFloat(symbol.getAttribute("lat"))
		var lng=parseFloat(symbol.getAttribute("lng"))
		var latLng= new  L.latLng(lat, lng)
		var transX=mymap.latLngToLayerPoint(latLng).x
		var transY=mymap.latLngToLayerPoint(latLng).y

		//---trash previous transform---
		symbol.setAttribute("transform","") //---required for IE

		symbol.removeAttribute("transform")

		var transformRequestObj=MySVG.createSVGTransform()
		var animTransformList=symbol.transform
		//---get baseVal to access/place object transforms
		var transformList=animTransformList.baseVal
		//---translate----
		transformRequestObj.setTranslate(transX,transY)
		transformList.appendItem(transformRequestObj)
		transformList.consolidate()
		//---scale---
		transformRequestObj.setScale(scale,scale)
		transformList.appendItem(transformRequestObj)
		transformList.consolidate()
	}


}

//--show/hide data---
function showData(evt)
{
    var target=evt.target
    target.setAttribute("stroke","black")
    target.setAttribute("stroke-width",".2")
    //---locate dataDiv near cursor--
    var x = evt.clientX;
    var y = evt.clientY;
    dataDiv.style.left=10+x+"px"
    dataDiv.style.top=20+y+"px"
    //---data--
    var state=target.getAttribute("state")
    var subscribers=target.getAttribute("subscribers")
    var name=target.getAttribute("name")
    var total=target.getAttribute("total")
    var type=target.getAttribute("type")
    //---format as desired---
    var html=state+subscribers+name+total+type

    dataDiv.innerHTML=html

    dataDiv.style.visibility="visible"

}
function hideData(evt)
{
    dataDiv.style.visibility="hidden"
    var target=evt.target
    target.removeAttribute("stroke")
    target.removeAttribute("stroke-width")
}

<!DOCTYPE HTML>
<html>
<head>
  <title>Leaflet w/SVG layer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<div class="col-md-12" style="padding:0px;margin:0px;">
    <div id="mapid" style="height: 385px" class="widget-body"></div>
</div>
<div  id=dataDiv  style='box-shadow: 4px 4px 4px #888888;-webkit-box-shadow:2px 3px 4px #888888;font-size:80%;z-index:20;padding:2px;position:absolute;top:0px;left:0px;visibility:hidden;background-color:linen;border: solid 1px black;border-radius:5px;'></div>
</body>
  </html>