echarts省级地图定位,symbol圆点不准,定位到了地图外面

橘子芒果 发布于 2017/04/21 16:18
阅读 2K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:亲,有个echarts问题问你,最近用echarts3做省地图经纬度定点,发现一个问题,就是加入某一个经纬度不在该省内,离该省比较近,定点的时候也会显示出来。而且如果我的经纬度数据比较多的情况下会有很多的点出现在某个省地图外面,非常乱。

我在百度地图上http://lbsyun.baidu.com/jsdemo.htm#i8_4,上面特意将定位到外面的圆点经纬度输入查看了一下,在新疆省地图内,可是echarts新疆省地图就不行。附上源代码:注释:新疆省地图是我的本地文件,下载的echarts3官网上面的js地图文件。

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>新疆省数据定位</title>
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height:100%"></div>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script src="map/js/province/xinjiang.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

       <script type="text/javascript">
            var container = document.getElementById("container",'vintage');
            var myChart = echarts.init(container);
            window.onresize = myChart.resize;

     var  geoCoordMapOnLineScreen = {      // 在线
             "0001": [87.68  , 43.77],   
             "0002": [84.77  , 45.59],   
             "0003": [85.94  , 44.27],   
             "0004": [89.19  , 42.91],   
             "0005": [88.63  , 42.77],   
             "0006": [90.25  , 42.82], 
             "0007": [93.44  , 42.78],  //  
             "0008": [94.65  , 43.28],  // 
             "0009": [93     , 43.6 ],   //
             "0010": [86.06  , 41.68],   
             "0011": [86.35  , 42.31],   
             "0012": [86.84  , 42.23],   
             "0013": [86.53  , 41.95],   
             "0014": [86.24  , 41.36],   
             "0015": [84.25  , 41.77],   
             "0016": [86.55  , 42.05],   
             "0017": [79.94  , 37.12],   
             "0018": [82.63  , 37.07],   
             "0019": [80.78  , 37.04],   
             "0020": [81.63  , 36.86], 
             "0021": [80.17  , 37.12],   
             "0022": [78.29  , 37.06],   
             "0023": [79.74  , 37.31],   
             "0024": [80.29  , 41.15],   
             "0025": [80.24  , 41.29],   
             "0026": [81.84  , 41.82],   
             "0027": [82.97  , 41.68],   
             "0028": [82.63  , 41.55],   
             "0029": [82.9   , 41.25],   
             "0030": [80.34  , 40.64],   
             "0031": [79.06  , 40.55],   
             "0032": [79.25  , 41.22],   
             "0033": [75.94  , 39.52],   
             "0034": [78.59  , 39.78],   
             "0035": [76.78  , 39.46],   
             "0036": [76.67  , 39.23],   
             "0037": [77.62  , 38.95],   
             "0038": [77.25  , 38.45],   
             "0039": [77.26  , 38.2 ],   
             "0040": [77.42  , 37.89], 
             "0041": [76.05  , 39.41],   
             "0042": [76.17  , 38.91],   
             "0043": [75.83  , 39.42],   
             "0044": [75.22  , 37.76],   
             "0045": [76.12  , 39.73],
             "0046": [78.42  , 41.91], //  
             "0047": [75.94  , 39.14],   
             "0048": [75.18  , 39.7 ],   
             "0049": [87.31  , 44.05],   
             "0050": [87.94  , 44.14]                                             
         }      

     var geoCoordMapOffLineScreen = {    //离线
              "1001": [89.52  , 44.02], 
              "1002": [89.14  , 44   ],   
              "1003": [87.68  , 43.97], 
              "1004": [86.22  , 44.28],  
              "1005": [86.92  , 44.18],  
              "1006": [90.34  , 43.8 ], 
              "1007": [82.1   , 44.93], 
              "1008": [82.92  , 44.67], 
              "1009": [81.08  , 44.95], 
              "1010": [81.33  , 43.91], 
              "1011": [82.53  , 43.82],  
              "1012": [83.27  , 43.41], 
              "1013": [82.23  , 43.35], 
              "1014": [84.89  , 44.45], 
              "1015": [81.81  , 43.23],  
              "1016": [81.08  , 43.15], 
              "1017": [80.87  , 44.07], 
              "1018": [81.12  , 43.82],   
              "1019": [82.96  , 46.74], 
              "1020": [83.62  , 46.52], 
              "1021": [84.62  , 44.45], 
              "1022": [83.59  , 45.92], 
              "1023": [82.94  , 46.21], 
              "1024": [85.56  , 44.29], 
              "1025": [85.13  , 46.78],   
              "1026": [88.14  , 47.86],  
              "1027": [90.37  , 46.71], 
              "1028": [89.44  , 47.05], 
              "1029": [87.51  , 47.15], 
              "1030": [85.84  , 47.42],  
              "1031": [86.92  , 47.7 ],  
              "1032": [86.41  , 48.05]
         }

    var convertData = function (data) {     //离线
       var res = [];
       for (var i = 0; i < data.length; i++) {
           var geoCoord =  geoCoordMapOnLineScreen[data[i].name];
           if (geoCoord) {
               res.push({
                   name: data[i].name,
                   value: geoCoord.concat(data[i].value)
               });
           }
        }
       return res;
      };
      var convertData2 = function (data) {   //在线
       var res = [];
       for (var i = 0; i < data.length; i++) {
           var geoCoord2 = geoCoordMapOffLineScreen[data[i].name];
           if (geoCoord2) {
               res.push({
                   name: data[i].name,
                   value: geoCoord2.concat(data[i].value)
               });
           }
        }
       return res;
      };

        myChart.setOption(option = {
              legend: {
                orient: 'vertical',
                show:true,
                right:300,
                bottom:100,
                data:['新疆省在线大屏数量','新疆省离线大屏数量']  
              },
              geo: {
               map: '新疆',
               label: {
                   normal:{
                      show:false
                   },
                   emphasis: {
                       show: true
                   }
               },
               itemStyle: {
                   normal: {
                       borderColor: '#111'
                   },
                   emphasis: {
                       areaColor: 'orange'
                   }
               }
           },
            series: [
                {               //离线
                    name: '新疆省离线大屏数量',        
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data:convertData([
                          {name:"0001" ,value:1} , 
                          {name:"0002" ,value:1} , 
                          {name:"0003" ,value:1} , 
                          {name:"0004" ,value:1} , 
                          {name:"0005" ,value:1} , 
                          {name:"0006" ,value:1} , 
                          {name:"0007" ,value:1} , 
                          {name:"0008" ,value:1} , 
                          {name:"0009" ,value:1} , 
                          {name:"0010" ,value:1} , 
                          {name:"0011" ,value:1} , 
                          {name:"0012" ,value:1} , 
                          {name:"0013" ,value:1} , 
                          {name:"0014" ,value:1} , 
                          {name:"0015" ,value:1} , 
                          {name:"0016" ,value:1} , 
                          {name:"0017" ,value:1} , 
                          {name:"0018" ,value:1} , 
                          {name:"0019" ,value:1} , 
                          {name:"0020" ,value:1} , 
                          {name:"0021" ,value:1} , 
                          {name:"0022" ,value:1} , 
                          {name:"0023" ,value:1} , 
                          {name:"0024" ,value:1} , 
                          {name:"0025" ,value:1} , 
                          {name:"0026" ,value:1} , 
                          {name:"0027" ,value:1} , 
                          {name:"0028" ,value:1} , 
                          {name:"0029" ,value:1} , 
                          {name:"0030" ,value:1} ,                         
                          {name:"0031" ,value:1} , 
                          {name:"0032" ,value:1} , 
                          {name:"0033" ,value:1} , 
                          {name:"0034" ,value:1} , 
                          {name:"0035" ,value:1} , 
                          {name:"0036" ,value:1} , 
                          {name:"0037" ,value:1} , 
                          {name:"0038" ,value:1} , 
                          {name:"0039" ,value:1} , 
                          {name:"0040" ,value:1} ,                         
                          {name:"0041" ,value:1} , 
                          {name:"0042" ,value:1} , 
                          {name:"0043" ,value:1} , 
                          {name:"0044" ,value:1} , 
                          {name:"0045" ,value:1} , 
                          {name:"0046" ,value:1} , 
                          {name:"0047" ,value:1} , 
                          {name:"0048" ,value:1} , 
                          {name:"0049" ,value:1} , 
                          {name:"0050" ,value:1} 
                      ]),                     
                    legendHoverLink:true, 
                    z:3,
                    silent:false,
                    symbolSize: 10,   
                    symbol:'circle',
                    label: {            
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                      normal:{
                        color:'red'
                       },
                      emphasis: {
                        borderColor: '#fff',
                        borderWidth: 0,
                        color:'red'
                          }
                    }
                },
                {               //在线
                  name:'新疆省在线大屏数量',
                  type:'scatter',
                  coordinateSystem:'geo',
                  data:convertData2([
                      {name:"1001" ,value:0} , 
                      {name:"1002" ,value:0} , 
                      {name:"1003" ,value:0} , 
                      {name:"1004" ,value:0} , 
                      {name:"1005" ,value:0} , 
                      {name:"1006" ,value:0} , 
                      {name:"1007" ,value:0} , 
                      {name:"1008" ,value:0} , 
                      {name:"1009" ,value:0} , 
                      {name:"1010" ,value:0} , 
                      {name:"1011" ,value:0} , 
                      {name:"1012" ,value:0} , 
                      {name:"1013" ,value:0} , 
                      {name:"1014" ,value:0} , 
                      {name:"1015" ,value:0} , 
                      {name:"1016" ,value:0} , 
                      {name:"1017" ,value:0} , 
                      {name:"1018" ,value:0} , 
                      {name:"1019" ,value:0} , 
                      {name:"1020" ,value:0} , 
                      {name:"1021" ,value:0} , 
                      {name:"1022" ,value:0} , 
                      {name:"1023" ,value:0} , 
                      {name:"1024" ,value:0} , 
                      {name:"1025" ,value:0} , 
                      {name:"1026" ,value:0} , 
                      {name:"1027" ,value:0} , 
                      {name:"1028" ,value:0} , 
                      {name:"1029" ,value:0} , 
                      {name:"1030" ,value:0} , 
                      {name:"1031" ,value:0} , 
                      {name:"1032" ,value:0} , 
                    ]),
                  legendHoverLink:true, 
                  z:3,
                  silent:false,
                  symbolSize: 10,   
                  symbol:'circle',
                  label: {            
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                  itemStyle: {
                      normal:{
                        color:'green'
                       },
                      emphasis: {
                        borderColor: '#fff',
                        borderWidth: 0,
                        color:'green'
                          }
                   }
                }
              ]
            });
  </script>
</body>
</html>

加载中
返回顶部
顶部