zoukankan      html  css  js  c++  java
  • echarts 根据经纬度坐标在地图上描点

    var mapData = [
    {'latitude':30.67, 'longitude':104.07},
    {'latitude':34.76, 'longitude':113.65},
    {'latitude':29.65, 'longitude':91.13},
    {'latitude':43.82, 'longitude':87.62}
    ]
     
    series: [
    //根据经纬度在地图上描点
    {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    // animation: true,
    rippleEffect: {
    brushType: 'stroke'
    },
    symbolSize: function (val,params) {
    return 30;
    },
    data: dmtData.map(function (itemOpt) {
    return {
    // name: itemOpt.name,
    value: [
    itemOpt.longitude,
    itemOpt.latitude,
    // itemOpt.value //数量
    ],
    label: {
    emphasis: {
    position: 'right',
    show: false
    }
    },
    itemStyle: {
    normal: {
    // color: itemOpt.color //色值
    color: RandomItemStylecolor()
    }
    }
    };
    }),
    symbolSize: function (val) {
    return 5;//描点的大小
    },
    }
    ]
     
    -----------------------------------------------------------------------------------------------------
     

    javaScript向对象数组赋值 存储以下格式的数据:

    var mapData = [
    {'latitude':30.67, 'longitude':104.07 , 'name':'四川', 'value':1, 'color':'#0394d9'},
    {'latitude':34.76, 'longitude':113.65 , 'name':'河南', 'value':3, 'color':'#d94d02'},
    {'latitude':29.65, 'longitude':91.13 , 'name':'西藏', 'value':4, 'color':'#b42fd5'},
    {'latitude':43.82, 'longitude':87.62 , 'name':'新疆', 'value':5, 'color':'#0394d9'},
    ]

    //改变成动态数据

    $.ajax({
    url: "xxxx.do",
    type: "POST",
    dataType: "json",
    data: {
      treeId:86
    },
    success: function (data) {


    var dmtData = [];

    for (var i = 0; i < data.length; i++) {

    latitude= data[i].latitude;
    longitude= data[i].longitude;
    dmtData.push({latitude:latitude,longitude:longitude});
    }

    }

    })

  • 相关阅读:
    Java数据库操作(MySQL与SQLserver)
    LeetCode 11. 盛最多水的容器
    LeetCode 10.正则表达式匹配
    LeetCode 9.回文数
    LeetCode 7. 整数反转
    LeetCode 6.Z 字形变换
    LeetCode 4.寻找两个正序数组的中位数
    LeetCode 3. 无重复字符的最长子串
    JOI2020遗迹
    线性规划对偶
  • 原文地址:https://www.cnblogs.com/heyiming/p/11361666.html
Copyright © 2011-2022 走看看