OpenSource
/
dc-sdk
peilaus alkaen https://github.com/dvt3d/dc-sdk
Tarkkaile 4
Äänestä 0
Fork 0
Koodi Ongelmat 0 Julkaisut 92 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
524 Commitit
6 Branchit
Puu: 73e05e2c6a
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '73e05e2c6a'
${ noResults }
dc-sdk/examples/echarts/pm.html

pm.html 15KB
Raaka Blame Historia

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. 

  4. <head>

  5.   <meta charset="utf-8">

  6.   <meta name="viewport" content="width=device-width,initial-scale=1.0">

  7.   <title>dc-example</title>

  8.   <script src='/libs/dc-sdk/dc.min.js'></script>

  9.   <script src='../echarts.min.js'></script>

  10.   <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>

  11.   <link href='../index.css' type='text/css' rel='stylesheet'>

  12. </head>

  13. 

  14. <body>

  15. 

  16. <div id="viewer-container" class="viewer-container"></div>

  17. 

  18. <script>

  19.   let viewer = undefined

  20. 

  21.   function initViewer() {

  22.     viewer = new DC.Viewer('viewer-container')

  23.     let baseLayer = DC.ImageryLayerFactory.createImageryLayer(DC.ImageryType.AMAP,{

  24.       crs:'WGS84'

  25.     })

  26.     viewer.addBaseLayer( baseLayer,{

  27.       brightness : 0.1

  28.     })

  29.     let layer = new DC.ChartLayer('layer',viewer)

  30.     layer.setOption(getOption())

  31.     viewer.addLayer(layer)

  32.     viewer.flyToPosition("115.79782534952115,31.47385026585756,4856091.799441838,0,-90")

  33.   }

  34. 

  35.   function getOption(){

  36.     let data = [

  37.       {name: '海门', value: 9},

  38.       {name: '鄂尔多斯', value: 12},

  39.       {name: '招远', value: 12},

  40.       {name: '舟山', value: 12},

  41.       {name: '齐齐哈尔', value: 14},

  42.       {name: '盐城', value: 15},

  43.       {name: '赤峰', value: 16},

  44.       {name: '青岛', value: 18},

  45.       {name: '乳山', value: 18},

  46.       {name: '金昌', value: 19},

  47.       {name: '泉州', value: 21},

  48.       {name: '莱西', value: 21},

  49.       {name: '日照', value: 21},

  50.       {name: '胶南', value: 22},

  51.       {name: '南通', value: 23},

  52.       {name: '拉萨', value: 24},

  53.       {name: '云浮', value: 24},

  54.       {name: '梅州', value: 25},

  55.       {name: '文登', value: 25},

  56.       {name: '上海', value: 25},

  57.       {name: '攀枝花', value: 25},

  58.       {name: '威海', value: 25},

  59.       {name: '承德', value: 25},

  60.       {name: '厦门', value: 26},

  61.       {name: '汕尾', value: 26},

  62.       {name: '潮州', value: 26},

  63.       {name: '丹东', value: 27},

  64.       {name: '太仓', value: 27},

  65.       {name: '曲靖', value: 27},

  66.       {name: '烟台', value: 28},

  67.       {name: '福州', value: 29},

  68.       {name: '瓦房店', value: 30},

  69.       {name: '即墨', value: 30},

  70.       {name: '抚顺', value: 31},

  71.       {name: '玉溪', value: 31},

  72.       {name: '张家口', value: 31},

  73.       {name: '阳泉', value: 31},

  74.       {name: '莱州', value: 32},

  75.       {name: '湖州', value: 32},

  76.       {name: '汕头', value: 32},

  77.       {name: '昆山', value: 33},

  78.       {name: '宁波', value: 33},

  79.       {name: '湛江', value: 33},

  80.       {name: '揭阳', value: 34},

  81.       {name: '荣成', value: 34},

  82.       {name: '连云港', value: 35},

  83.       {name: '葫芦岛', value: 35},

  84.       {name: '常熟', value: 36},

  85.       {name: '东莞', value: 36},

  86.       {name: '河源', value: 36},

  87.       {name: '淮安', value: 36},

  88.       {name: '泰州', value: 36},

  89.       {name: '南宁', value: 37},

  90.       {name: '营口', value: 37},

  91.       {name: '惠州', value: 37},

  92.       {name: '江阴', value: 37},

  93.       {name: '蓬莱', value: 37},

  94.       {name: '韶关', value: 38},

  95.       {name: '嘉峪关', value: 38},

  96.       {name: '广州', value: 38},

  97.       {name: '延安', value: 38},

  98.       {name: '太原', value: 39},

  99.       {name: '清远', value: 39},

  100.       {name: '中山', value: 39},

  101.       {name: '昆明', value: 39},

  102.       {name: '寿光', value: 40},

  103.       {name: '盘锦', value: 40},

  104.       {name: '长治', value: 41},

  105.       {name: '深圳', value: 41},

  106.       {name: '珠海', value: 42},

  107.       {name: '宿迁', value: 43},

  108.       {name: '咸阳', value: 43},

  109.       {name: '铜川', value: 44},

  110.       {name: '平度', value: 44},

  111.       {name: '佛山', value: 44},

  112.       {name: '海口', value: 44},

  113.       {name: '江门', value: 45},

  114.       {name: '章丘', value: 45},

  115.       {name: '肇庆', value: 46},

  116.       {name: '大连', value: 47},

  117.       {name: '临汾', value: 47},

  118.       {name: '吴江', value: 47},

  119.       {name: '石嘴山', value: 49},

  120.       {name: '沈阳', value: 50},

  121.       {name: '苏州', value: 50},

  122.       {name: '茂名', value: 50},

  123.       {name: '嘉兴', value: 51},

  124.       {name: '长春', value: 51},

  125.       {name: '胶州', value: 52},

  126.       {name: '银川', value: 52},

  127.       {name: '张家港', value: 52},

  128.       {name: '三门峡', value: 53},

  129.       {name: '锦州', value: 54},

  130.       {name: '南昌', value: 54},

  131.       {name: '柳州', value: 54},

  132.       {name: '三亚', value: 54},

  133.       {name: '自贡', value: 56},

  134.       {name: '吉林', value: 56},

  135.       {name: '阳江', value: 57},

  136.       {name: '泸州', value: 57},

  137.       {name: '西宁', value: 57},

  138.       {name: '宜宾', value: 58},

  139.       {name: '呼和浩特', value: 58},

  140.       {name: '成都', value: 58},

  141.       {name: '大同', value: 58},

  142.       {name: '镇江', value: 59},

  143.       {name: '桂林', value: 59},

  144.       {name: '张家界', value: 59},

  145.       {name: '宜兴', value: 59},

  146.       {name: '北海', value: 60},

  147.       {name: '西安', value: 61},

  148.       {name: '金坛', value: 62},

  149.       {name: '东营', value: 62},

  150.       {name: '牡丹江', value: 63},

  151.       {name: '遵义', value: 63},

  152.       {name: '绍兴', value: 63},

  153.       {name: '扬州', value: 64},

  154.       {name: '常州', value: 64},

  155.       {name: '潍坊', value: 65},

  156.       {name: '重庆', value: 66},

  157.       {name: '台州', value: 67},

  158.       {name: '南京', value: 67},

  159.       {name: '滨州', value: 70},

  160.       {name: '贵阳', value: 71},

  161.       {name: '无锡', value: 71},

  162.       {name: '本溪', value: 71},

  163.       {name: '克拉玛依', value: 72},

  164.       {name: '渭南', value: 72},

  165.       {name: '马鞍山', value: 72},

  166.       {name: '宝鸡', value: 72},

  167.       {name: '焦作', value: 75},

  168.       {name: '句容', value: 75},

  169.       {name: '北京', value: 79},

  170.       {name: '徐州', value: 79},

  171.       {name: '衡水', value: 80},

  172.       {name: '包头', value: 80},

  173.       {name: '绵阳', value: 80},

  174.       {name: '乌鲁木齐', value: 84},

  175.       {name: '枣庄', value: 84},

  176.       {name: '杭州', value: 84},

  177.       {name: '淄博', value: 85},

  178.       {name: '鞍山', value: 86},

  179.       {name: '溧阳', value: 86},

  180.       {name: '库尔勒', value: 86},

  181.       {name: '安阳', value: 90},

  182.       {name: '开封', value: 90},

  183.       {name: '济南', value: 92},

  184.       {name: '德阳', value: 93},

  185.       {name: '温州', value: 95},

  186.       {name: '九江', value: 96},

  187.       {name: '邯郸', value: 98},

  188.       {name: '临安', value: 99},

  189.       {name: '兰州', value: 99},

  190.       {name: '沧州', value: 100},

  191.       {name: '临沂', value: 103},

  192.       {name: '南充', value: 104},

  193.       {name: '天津', value: 105},

  194.       {name: '富阳', value: 106},

  195.       {name: '泰安', value: 112},

  196.       {name: '诸暨', value: 112},

  197.       {name: '郑州', value: 113},

  198.       {name: '哈尔滨', value: 114},

  199.       {name: '聊城', value: 116},

  200.       {name: '芜湖', value: 117},

  201.       {name: '唐山', value: 119},

  202.       {name: '平顶山', value: 119},

  203.       {name: '邢台', value: 119},

  204.       {name: '德州', value: 120},

  205.       {name: '济宁', value: 120},

  206.       {name: '荆州', value: 127},

  207.       {name: '宜昌', value: 130},

  208.       {name: '义乌', value: 132},

  209.       {name: '丽水', value: 133},

  210.       {name: '洛阳', value: 134},

  211.       {name: '秦皇岛', value: 136},

  212.       {name: '株洲', value: 143},

  213.       {name: '石家庄', value: 147},

  214.       {name: '莱芜', value: 148},

  215.       {name: '常德', value: 152},

  216.       {name: '保定', value: 153},

  217.       {name: '湘潭', value: 154},

  218.       {name: '金华', value: 157},

  219.       {name: '岳阳', value: 169},

  220.       {name: '长沙', value: 175},

  221.       {name: '衢州', value: 177},

  222.       {name: '廊坊', value: 193},

  223.       {name: '菏泽', value: 194},

  224.       {name: '合肥', value: 229},

  225.       {name: '武汉', value: 273},

  226.       {name: '大庆', value: 279}

  227.     ];

  228.     let geoCoordMap = {

  229.       '海门':[121.15,31.89],

  230.       '鄂尔多斯':[109.781327,39.608266],

  231.       '招远':[120.38,37.35],

  232.       '舟山':[122.207216,29.985295],

  233.       '齐齐哈尔':[123.97,47.33],

  234.       '盐城':[120.13,33.38],

  235.       '赤峰':[118.87,42.28],

  236.       '青岛':[120.33,36.07],

  237.       '乳山':[121.52,36.89],

  238.       '金昌':[102.188043,38.520089],

  239.       '泉州':[118.58,24.93],

  240.       '莱西':[120.53,36.86],

  241.       '日照':[119.46,35.42],

  242.       '胶南':[119.97,35.88],

  243.       '南通':[121.05,32.08],

  244.       '拉萨':[91.11,29.97],

  245.       '云浮':[112.02,22.93],

  246.       '梅州':[116.1,24.55],

  247.       '文登':[122.05,37.2],

  248.       '上海':[121.48,31.22],

  249.       '攀枝花':[101.718637,26.582347],

  250.       '威海':[122.1,37.5],

  251.       '承德':[117.93,40.97],

  252.       '厦门':[118.1,24.46],

  253.       '汕尾':[115.375279,22.786211],

  254.       '潮州':[116.63,23.68],

  255.       '丹东':[124.37,40.13],

  256.       '太仓':[121.1,31.45],

  257.       '曲靖':[103.79,25.51],

  258.       '烟台':[121.39,37.52],

  259.       '福州':[119.3,26.08],

  260.       '瓦房店':[121.979603,39.627114],

  261.       '即墨':[120.45,36.38],

  262.       '抚顺':[123.97,41.97],

  263.       '玉溪':[102.52,24.35],

  264.       '张家口':[114.87,40.82],

  265.       '阳泉':[113.57,37.85],

  266.       '莱州':[119.942327,37.177017],

  267.       '湖州':[120.1,30.86],

  268.       '汕头':[116.69,23.39],

  269.       '昆山':[120.95,31.39],

  270.       '宁波':[121.56,29.86],

  271.       '湛江':[110.359377,21.270708],

  272.       '揭阳':[116.35,23.55],

  273.       '荣成':[122.41,37.16],

  274.       '连云港':[119.16,34.59],

  275.       '葫芦岛':[120.836932,40.711052],

  276.       '常熟':[120.74,31.64],

  277.       '东莞':[113.75,23.04],

  278.       '河源':[114.68,23.73],

  279.       '淮安':[119.15,33.5],

  280.       '泰州':[119.9,32.49],

  281.       '南宁':[108.33,22.84],

  282.       '营口':[122.18,40.65],

  283.       '惠州':[114.4,23.09],

  284.       '江阴':[120.26,31.91],

  285.       '蓬莱':[120.75,37.8],

  286.       '韶关':[113.62,24.84],

  287.       '嘉峪关':[98.289152,39.77313],

  288.       '广州':[113.23,23.16],

  289.       '延安':[109.47,36.6],

  290.       '太原':[112.53,37.87],

  291.       '清远':[113.01,23.7],

  292.       '中山':[113.38,22.52],

  293.       '昆明':[102.73,25.04],

  294.       '寿光':[118.73,36.86],

  295.       '盘锦':[122.070714,41.119997],

  296.       '长治':[113.08,36.18],

  297.       '深圳':[114.07,22.62],

  298.       '珠海':[113.52,22.3],

  299.       '宿迁':[118.3,33.96],

  300.       '咸阳':[108.72,34.36],

  301.       '铜川':[109.11,35.09],

  302.       '平度':[119.97,36.77],

  303.       '佛山':[113.11,23.05],

  304.       '海口':[110.35,20.02],

  305.       '江门':[113.06,22.61],

  306.       '章丘':[117.53,36.72],

  307.       '肇庆':[112.44,23.05],

  308.       '大连':[121.62,38.92],

  309.       '临汾':[111.5,36.08],

  310.       '吴江':[120.63,31.16],

  311.       '石嘴山':[106.39,39.04],

  312.       '沈阳':[123.38,41.8],

  313.       '苏州':[120.62,31.32],

  314.       '茂名':[110.88,21.68],

  315.       '嘉兴':[120.76,30.77],

  316.       '长春':[125.35,43.88],

  317.       '胶州':[120.03336,36.264622],

  318.       '银川':[106.27,38.47],

  319.       '张家港':[120.555821,31.875428],

  320.       '三门峡':[111.19,34.76],

  321.       '锦州':[121.15,41.13],

  322.       '南昌':[115.89,28.68],

  323.       '柳州':[109.4,24.33],

  324.       '三亚':[109.511909,18.252847],

  325.       '自贡':[104.778442,29.33903],

  326.       '吉林':[126.57,43.87],

  327.       '阳江':[111.95,21.85],

  328.       '泸州':[105.39,28.91],

  329.       '西宁':[101.74,36.56],

  330.       '宜宾':[104.56,29.77],

  331.       '呼和浩特':[111.65,40.82],

  332.       '成都':[104.06,30.67],

  333.       '大同':[113.3,40.12],

  334.       '镇江':[119.44,32.2],

  335.       '桂林':[110.28,25.29],

  336.       '张家界':[110.479191,29.117096],

  337.       '宜兴':[119.82,31.36],

  338.       '北海':[109.12,21.49],

  339.       '西安':[108.95,34.27],

  340.       '金坛':[119.56,31.74],

  341.       '东营':[118.49,37.46],

  342.       '牡丹江':[129.58,44.6],

  343.       '遵义':[106.9,27.7],

  344.       '绍兴':[120.58,30.01],

  345.       '扬州':[119.42,32.39],

  346.       '常州':[119.95,31.79],

  347.       '潍坊':[119.1,36.62],

  348.       '重庆':[106.54,29.59],

  349.       '台州':[121.420757,28.656386],

  350.       '南京':[118.78,32.04],

  351.       '滨州':[118.03,37.36],

  352.       '贵阳':[106.71,26.57],

  353.       '无锡':[120.29,31.59],

  354.       '本溪':[123.73,41.3],

  355.       '克拉玛依':[84.77,45.59],

  356.       '渭南':[109.5,34.52],

  357.       '马鞍山':[118.48,31.56],

  358.       '宝鸡':[107.15,34.38],

  359.       '焦作':[113.21,35.24],

  360.       '句容':[119.16,31.95],

  361.       '北京':[116.46,39.92],

  362.       '徐州':[117.2,34.26],

  363.       '衡水':[115.72,37.72],

  364.       '包头':[110,40.58],

  365.       '绵阳':[104.73,31.48],

  366.       '乌鲁木齐':[87.68,43.77],

  367.       '枣庄':[117.57,34.86],

  368.       '杭州':[120.19,30.26],

  369.       '淄博':[118.05,36.78],

  370.       '鞍山':[122.85,41.12],

  371.       '溧阳':[119.48,31.43],

  372.       '库尔勒':[86.06,41.68],

  373.       '安阳':[114.35,36.1],

  374.       '开封':[114.35,34.79],

  375.       '济南':[117,36.65],

  376.       '德阳':[104.37,31.13],

  377.       '温州':[120.65,28.01],

  378.       '九江':[115.97,29.71],

  379.       '邯郸':[114.47,36.6],

  380.       '临安':[119.72,30.23],

  381.       '兰州':[103.73,36.03],

  382.       '沧州':[116.83,38.33],

  383.       '临沂':[118.35,35.05],

  384.       '南充':[106.110698,30.837793],

  385.       '天津':[117.2,39.13],

  386.       '富阳':[119.95,30.07],

  387.       '泰安':[117.13,36.18],

  388.       '诸暨':[120.23,29.71],

  389.       '郑州':[113.65,34.76],

  390.       '哈尔滨':[126.63,45.75],

  391.       '聊城':[115.97,36.45],

  392.       '芜湖':[118.38,31.33],

  393.       '唐山':[118.02,39.63],

  394.       '平顶山':[113.29,33.75],

  395.       '邢台':[114.48,37.05],

  396.       '德州':[116.29,37.45],

  397.       '济宁':[116.59,35.38],

  398.       '荆州':[112.239741,30.335165],

  399.       '宜昌':[111.3,30.7],

  400.       '义乌':[120.06,29.32],

  401.       '丽水':[119.92,28.45],

  402.       '洛阳':[112.44,34.7],

  403.       '秦皇岛':[119.57,39.95],

  404.       '株洲':[113.16,27.83],

  405.       '石家庄':[114.48,38.03],

  406.       '莱芜':[117.67,36.19],

  407.       '常德':[111.69,29.05],

  408.       '保定':[115.48,38.85],

  409.       '湘潭':[112.91,27.87],

  410.       '金华':[119.64,29.12],

  411.       '岳阳':[113.09,29.37],

  412.       '长沙':[113,28.21],

  413.       '衢州':[118.88,28.97],

  414.       '廊坊':[116.7,39.53],

  415.       '菏泽':[115.480656,35.23375],

  416.       '合肥':[117.27,31.86],

  417.       '武汉':[114.31,30.52],

  418.       '大庆':[125.03,46.58]

  419.     };

  420.     let convertData = function (data) {

  421.       let res = [];

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

  423.         let geoCoord = geoCoordMap[data[i].name];

  424.         if (geoCoord) {

  425.           res.push({

  426.             name: data[i].name,

  427.             value: geoCoord.concat(data[i].value)

  428.           });

  429.         }

  430.       }

  431.       return res;

  432.     };

  433.     return  {

  434.       series : [

  435.         {

  436.           name: 'pm2.5',

  437.           type: 'scatter',

  438.           coordinateSystem: 'GLMap',

  439.           data: convertData(data),

  440.           symbolSize: function (val) {

  441.             return val[2] / 10;

  442.           },

  443.           label: {

  444.             normal: {

  445.               formatter: '{b}',

  446.               position: 'right',

  447.               show: false

  448.             },

  449.             emphasis: {

  450.               show: true

  451.             }

  452.           },

  453.           itemStyle: {

  454.             normal: {

  455.               color: '#ddb926'

  456.             }

  457.           }

  458.         },

  459.         {

  460.           name: 'Top 5',

  461.           type: 'effectScatter',

  462.           coordinateSystem: 'GLMap',

  463.           data: convertData(data.sort(function (a, b) {

  464.             return b.value - a.value;

  465.           }).slice(0, 6)),

  466.           symbolSize: function (val) {

  467.             return val[2] / 10;

  468.           },

  469.           showEffectOn: 'render',

  470.           rippleEffect: {

  471.             brushType: 'stroke'

  472.           },

  473.           hoverAnimation: true,

  474.           label: {

  475.             normal: {

  476.               formatter: '{b}',

  477.               position: 'right',

  478.               show: true

  479.             }

  480.           },

  481.           itemStyle: {

  482.             normal: {

  483.               color: '#f4e925',

  484.               shadowBlur: 10,

  485.               shadowColor: '#333'

  486.             }

  487.           },

  488.           zlevel: 1

  489.         }

  490.       ]

  491.     };

  492. 

  493. 

  494.   }

  495.   DC.ready({

  496.     baseUrl:'../libs/dc-sdk/resources/',

  497.     echarts: window.echarts

  498.   }).then(initViewer)

  499. </script>

  500. </body>

  501. </html>