Giter Site home page Giter Site logo

wandergis / arcgis-echarts3 Goto Github PK

View Code? Open in Web Editor NEW
355.0 355.0 147.0 1.86 MB

A plugin for ArcGIS JS API to load echarts3 map and Make big data visualization easier.

Home Page: http://wandergis.github.io/arcgis-echarts3/examples/

License: MIT License

JavaScript 100.00%

arcgis-echarts3's People

Contributors

hansz00 avatar wandergis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

arcgis-echarts3's Issues

Arcgis 穿透地图点击事件

你好:
源代码如下
n.style.height = e.height + "px",
n.style.width = e.width + "px",
n.style.top = 0,
n.style.left = 0,
---- e.__container.appendChild(n)
---- e.__container.children[0].appendChild(n),
this._init(e, t)
使用 e.__container.appendChild(n) 时 arcgis 地图图层内的点无法点击(无法触发点击事件),
使用 e.__container.children[0].appendChild(n) 时 arcgis地图图层内可以点击,但是 ECharts 无法触发鼠标移上去事件(ToolTips)

Cannot read property 'prototype' of undefined in Echarts3Layer

在执行

overlay.initECharts(chartsContainer)

时发现Echarts3Layer里initECharts中的o._ec.Geo为undefined
希望大神能指导一下。

完整源代码

<template>
  <div ref="map" class="map" id="mmap">
    <div ref="button"></div>
  </div>
</template>

<script>
// import './src/arcgis-echarts3/dist/main.js'
import { loadModules } from 'esri-loader';
import echarts from './src/arcgis-echarts3/libs/echarts.js'
import ELayer from './src/arcgis-echarts3/src/Echarts3Layer0.js'
export default {
  name: 'home-button',
  mounted: function () {
    loadModules(['dojo/_base/declare', 'dojo/_base/lang',  'esri/geometry/Point','esri/geometry/ScreenPoint', 'esri/map'])
    .then(([declare, lang, Point, ScreenPoint, Map]) => {
        var map = new Map("mmap", {
          basemap: 'dark-gray',
          center: [122.45, 37.75],
          zoom: 5
        })
        var Echarts3Layer = ELayer(declare, lang, Point, ScreenPoint)
        var overlay = new Echarts3Layer(map, echarts)
        console.log('over', overlay)
        var chartsContainer = overlay.getEchartsContainer()
        // 这里未获取到输出,原因是o._ec.Geo === undefined
        console.log('myChart', overlay.initECharts(chartsContainer))
        var myChart = overlay.initECharts(chartsContainer)
        map.on('load', function () {
          var data = [
            {name: '海门', value: 9},
            {name: '鄂尔多斯', value: 12},
            {name: '招远', value: 12},
            {name: '舟山', value: 12},
            {name: '齐齐哈尔', value: 14},
            {name: '盐城', value: 15},
            {name: '赤峰', value: 16},
            {name: '青岛', value: 18},
            {name: '乳山', value: 18},
            {name: '金昌', value: 19},
            {name: '泉州', value: 21},
            {name: '莱西', value: 21},
            {name: '日照', value: 21},
            {name: '胶南', value: 22},
            {name: '南通', value: 23},
            {name: '拉萨', value: 24},
            {name: '云浮', value: 24},
            {name: '梅州', value: 25},
            {name: '文登', value: 25},
            {name: '上海', value: 25},
            {name: '攀枝花', value: 25},
            {name: '威海', value: 25},
            {name: '承德', value: 25},
            {name: '厦门', value: 26},
            {name: '汕尾', value: 26},
            {name: '潮州', value: 26},
            {name: '丹东', value: 27},
            {name: '太仓', value: 27},
            {name: '曲靖', value: 27},
            {name: '烟台', value: 28},
            {name: '福州', value: 29},
            {name: '瓦房店', value: 30},
            {name: '即墨', value: 30},
            {name: '抚顺', value: 31},
            {name: '玉溪', value: 31},
            {name: '张家口', value: 31},
            {name: '阳泉', value: 31},
            {name: '莱州', value: 32},
            {name: '湖州', value: 32},
            {name: '汕头', value: 32},
            {name: '昆山', value: 33},
            {name: '宁波', value: 33},
            {name: '湛江', value: 33},
            {name: '揭阳', value: 34},
            {name: '荣成', value: 34},
            {name: '连云港', value: 35},
            {name: '葫芦岛', value: 35},
            {name: '常熟', value: 36},
            {name: '东莞', value: 36},
            {name: '河源', value: 36},
            {name: '淮安', value: 36},
            {name: '泰州', value: 36},
            {name: '南宁', value: 37},
            {name: '营口', value: 37},
            {name: '惠州', value: 37},
            {name: '江阴', value: 37},
            {name: '蓬莱', value: 37},
            {name: '韶关', value: 38},
            {name: '嘉峪关', value: 38},
            {name: '广州', value: 38},
            {name: '延安', value: 38},
            {name: '太原', value: 39},
            {name: '清远', value: 39},
            {name: '中山', value: 39},
            {name: '昆明', value: 39},
            {name: '寿光', value: 40},
            {name: '盘锦', value: 40},
            {name: '长治', value: 41},
            {name: '深圳', value: 41},
            {name: '珠海', value: 42},
            {name: '宿迁', value: 43},
            {name: '咸阳', value: 43},
            {name: '铜川', value: 44},
            {name: '平度', value: 44},
            {name: '佛山', value: 44},
            {name: '海口', value: 44},
            {name: '江门', value: 45},
            {name: '章丘', value: 45},
            {name: '肇庆', value: 46},
            {name: '大连', value: 47},
            {name: '临汾', value: 47},
            {name: '吴江', value: 47},
            {name: '石嘴山', value: 49},
            {name: '沈阳', value: 50},
            {name: '苏州', value: 50},
            {name: '茂名', value: 50},
            {name: '嘉兴', value: 51},
            {name: '长春', value: 51},
            {name: '胶州', value: 52},
            {name: '银川', value: 52},
            {name: '张家港', value: 52},
            {name: '三门峡', value: 53},
            {name: '锦州', value: 54},
            {name: '南昌', value: 54},
            {name: '柳州', value: 54},
            {name: '三亚', value: 54},
            {name: '自贡', value: 56},
            {name: '吉林', value: 56},
            {name: '阳江', value: 57},
            {name: '泸州', value: 57},
            {name: '西宁', value: 57},
            {name: '宜宾', value: 58},
            {name: '呼和浩特', value: 58},
            {name: '成都', value: 58},
            {name: '大同', value: 58},
            {name: '镇江', value: 59},
            {name: '桂林', value: 59},
            {name: '张家界', value: 59},
            {name: '宜兴', value: 59},
            {name: '北海', value: 60},
            {name: '西安', value: 61},
            {name: '金坛', value: 62},
            {name: '东营', value: 62},
            {name: '牡丹江', value: 63},
            {name: '遵义', value: 63},
            {name: '绍兴', value: 63},
            {name: '扬州', value: 64},
            {name: '常州', value: 64},
            {name: '潍坊', value: 65},
            {name: '重庆', value: 66},
            {name: '台州', value: 67},
            {name: '南京', value: 67},
            {name: '滨州', value: 70},
            {name: '贵阳', value: 71},
            {name: '无锡', value: 71},
            {name: '本溪', value: 71},
            {name: '克拉玛依', value: 72},
            {name: '渭南', value: 72},
            {name: '马鞍山', value: 72},
            {name: '宝鸡', value: 72},
            {name: '焦作', value: 75},
            {name: '句容', value: 75},
            {name: '北京', value: 79},
            {name: '徐州', value: 79},
            {name: '衡水', value: 80},
            {name: '包头', value: 80},
            {name: '绵阳', value: 80},
            {name: '乌鲁木齐', value: 84},
            {name: '枣庄', value: 84},
            {name: '杭州', value: 84},
            {name: '淄博', value: 85},
            {name: '鞍山', value: 86},
            {name: '溧阳', value: 86},
            {name: '库尔勒', value: 86},
            {name: '安阳', value: 90},
            {name: '开封', value: 90},
            {name: '济南', value: 92},
            {name: '德阳', value: 93},
            {name: '温州', value: 95},
            {name: '九江', value: 96},
            {name: '邯郸', value: 98},
            {name: '临安', value: 99},
            {name: '兰州', value: 99},
            {name: '沧州', value: 100},
            {name: '临沂', value: 103},
            {name: '南充', value: 104},
            {name: '天津', value: 105},
            {name: '富阳', value: 106},
            {name: '泰安', value: 112},
            {name: '诸暨', value: 112},
            {name: '郑州', value: 113},
            {name: '哈尔滨', value: 114},
            {name: '聊城', value: 116},
            {name: '芜湖', value: 117},
            {name: '唐山', value: 119},
            {name: '平顶山', value: 119},
            {name: '邢台', value: 119},
            {name: '德州', value: 120},
            {name: '济宁', value: 120},
            {name: '荆州', value: 127},
            {name: '宜昌', value: 130},
            {name: '义乌', value: 132},
            {name: '丽水', value: 133},
            {name: '洛阳', value: 134},
            {name: '秦皇岛', value: 136},
            {name: '株洲', value: 143},
            {name: '石家庄', value: 147},
            {name: '莱芜', value: 148},
            {name: '常德', value: 152},
            {name: '保定', value: 153},
            {name: '湘潭', value: 154},
            {name: '金华', value: 157},
            {name: '岳阳', value: 169},
            {name: '长沙', value: 175},
            {name: '衢州', value: 177},
            {name: '廊坊', value: 193},
            {name: '菏泽', value: 194},
            {name: '合肥', value: 229},
            {name: '武汉', value: 273},
            {name: '大庆', value: 279}
          ]
          var geoCoordMap = {
            '海门': [121.15, 31.89],
            '鄂尔多斯': [109.781327, 39.608266],
            '招远': [120.38, 37.35],
            '舟山': [122.207216, 29.985295],
            '齐齐哈尔': [123.97, 47.33],
            '盐城': [120.13, 33.38],
            '赤峰': [118.87, 42.28],
            '青岛': [120.33, 36.07],
            '乳山': [121.52, 36.89],
            '金昌': [102.188043, 38.520089],
            '泉州': [118.58, 24.93],
            '莱西': [120.53, 36.86],
            '日照': [119.46, 35.42],
            '胶南': [119.97, 35.88],
            '南通': [121.05, 32.08],
            '拉萨': [91.11, 29.97],
            '云浮': [112.02, 22.93],
            '梅州': [116.1, 24.55],
            '文登': [122.05, 37.2],
            '上海': [121.48, 31.22],
            '攀枝花': [101.718637, 26.582347],
            '威海': [122.1, 37.5],
            '承德': [117.93, 40.97],
            '厦门': [118.1, 24.46],
            '汕尾': [115.375279, 22.786211],
            '潮州': [116.63, 23.68],
            '丹东': [124.37, 40.13],
            '太仓': [121.1, 31.45],
            '曲靖': [103.79, 25.51],
            '烟台': [121.39, 37.52],
            '福州': [119.3, 26.08],
            '瓦房店': [121.979603, 39.627114],
            '即墨': [120.45, 36.38],
            '抚顺': [123.97, 41.97],
            '玉溪': [102.52, 24.35],
            '张家口': [114.87, 40.82],
            '阳泉': [113.57, 37.85],
            '莱州': [119.942327, 37.177017],
            '湖州': [120.1, 30.86],
            '汕头': [116.69, 23.39],
            '昆山': [120.95, 31.39],
            '宁波': [121.56, 29.86],
            '湛江': [110.359377, 21.270708],
            '揭阳': [116.35, 23.55],
            '荣成': [122.41, 37.16],
            '连云港': [119.16, 34.59],
            '葫芦岛': [120.836932, 40.711052],
            '常熟': [120.74, 31.64],
            '东莞': [113.75, 23.04],
            '河源': [114.68, 23.73],
            '淮安': [119.15, 33.5],
            '泰州': [119.9, 32.49],
            '南宁': [108.33, 22.84],
            '营口': [122.18, 40.65],
            '惠州': [114.4, 23.09],
            '江阴': [120.26, 31.91],
            '蓬莱': [120.75, 37.8],
            '韶关': [113.62, 24.84],
            '嘉峪关': [98.289152, 39.77313],
            '广州': [113.23, 23.16],
            '延安': [109.47, 36.6],
            '太原': [112.53, 37.87],
            '清远': [113.01, 23.7],
            '中山': [113.38, 22.52],
            '昆明': [102.73, 25.04],
            '寿光': [118.73, 36.86],
            '盘锦': [122.070714, 41.119997],
            '长治': [113.08, 36.18],
            '深圳': [114.07, 22.62],
            '珠海': [113.52, 22.3],
            '宿迁': [118.3, 33.96],
            '咸阳': [108.72, 34.36],
            '铜川': [109.11, 35.09],
            '平度': [119.97, 36.77],
            '佛山': [113.11, 23.05],
            '海口': [110.35, 20.02],
            '江门': [113.06, 22.61],
            '章丘': [117.53, 36.72],
            '肇庆': [112.44, 23.05],
            '大连': [121.62, 38.92],
            '临汾': [111.5, 36.08],
            '吴江': [120.63, 31.16],
            '石嘴山': [106.39, 39.04],
            '沈阳': [123.38, 41.8],
            '苏州': [120.62, 31.32],
            '茂名': [110.88, 21.68],
            '嘉兴': [120.76, 30.77],
            '长春': [125.35, 43.88],
            '胶州': [120.03336, 36.264622],
            '银川': [106.27, 38.47],
            '张家港': [120.555821, 31.875428],
            '三门峡': [111.19, 34.76],
            '锦州': [121.15, 41.13],
            '南昌': [115.89, 28.68],
            '柳州': [109.4, 24.33],
            '三亚': [109.511909, 18.252847],
            '自贡': [104.778442, 29.33903],
            '吉林': [126.57, 43.87],
            '阳江': [111.95, 21.85],
            '泸州': [105.39, 28.91],
            '西宁': [101.74, 36.56],
            '宜宾': [104.56, 29.77],
            '呼和浩特': [111.65, 40.82],
            '成都': [104.06, 30.67],
            '大同': [113.3, 40.12],
            '镇江': [119.44, 32.2],
            '桂林': [110.28, 25.29],
            '张家界': [110.479191, 29.117096],
            '宜兴': [119.82, 31.36],
            '北海': [109.12, 21.49],
            '西安': [108.95, 34.27],
            '金坛': [119.56, 31.74],
            '东营': [118.49, 37.46],
            '牡丹江': [129.58, 44.6],
            '遵义': [106.9, 27.7],
            '绍兴': [120.58, 30.01],
            '扬州': [119.42, 32.39],
            '常州': [119.95, 31.79],
            '潍坊': [119.1, 36.62],
            '重庆': [106.54, 29.59],
            '台州': [121.420757, 28.656386],
            '南京': [118.78, 32.04],
            '滨州': [118.03, 37.36],
            '贵阳': [106.71, 26.57],
            '无锡': [120.29, 31.59],
            '本溪': [123.73, 41.3],
            '克拉玛依': [84.77, 45.59],
            '渭南': [109.5, 34.52],
            '马鞍山': [118.48, 31.56],
            '宝鸡': [107.15, 34.38],
            '焦作': [113.21, 35.24],
            '句容': [119.16, 31.95],
            '北京': [116.46, 39.92],
            '徐州': [117.2, 34.26],
            '衡水': [115.72, 37.72],
            '包头': [110, 40.58],
            '绵阳': [104.73, 31.48],
            '乌鲁木齐': [87.68, 43.77],
            '枣庄': [117.57, 34.86],
            '杭州': [120.19, 30.26],
            '淄博': [118.05, 36.78],
            '鞍山': [122.85, 41.12],
            '溧阳': [119.48, 31.43],
            '库尔勒': [86.06, 41.68],
            '安阳': [114.35, 36.1],
            '开封': [114.35, 34.79],
            '济南': [117, 36.65],
            '德阳': [104.37, 31.13],
            '温州': [120.65, 28.01],
            '九江': [115.97, 29.71],
            '邯郸': [114.47, 36.6],
            '临安': [119.72, 30.23],
            '兰州': [103.73, 36.03],
            '沧州': [116.83, 38.33],
            '临沂': [118.35, 35.05],
            '南充': [106.110698, 30.837793],
            '天津': [117.2, 39.13],
            '富阳': [119.95, 30.07],
            '泰安': [117.13, 36.18],
            '诸暨': [120.23, 29.71],
            '郑州': [113.65, 34.76],
            '哈尔滨': [126.63, 45.75],
            '聊城': [115.97, 36.45],
            '芜湖': [118.38, 31.33],
            '唐山': [118.02, 39.63],
            '平顶山': [113.29, 33.75],
            '邢台': [114.48, 37.05],
            '德州': [116.29, 37.45],
            '济宁': [116.59, 35.38],
            '荆州': [112.239741, 30.335165],
            '宜昌': [111.3, 30.7],
            '义乌': [120.06, 29.32],
            '丽水': [119.92, 28.45],
            '洛阳': [112.44, 34.7],
            '秦皇岛': [119.57, 39.95],
            '株洲': [113.16, 27.83],
            '石家庄': [114.48, 38.03],
            '莱芜': [117.67, 36.19],
            '常德': [111.69, 29.05],
            '保定': [115.48, 38.85],
            '湘潭': [112.91, 27.87],
            '金华': [119.64, 29.12],
            '岳阳': [113.09, 29.37],
            '长沙': [113, 28.21],
            '衢州': [118.88, 28.97],
            '廊坊': [116.7, 39.53],
            '菏泽': [115.480656, 35.23375],
            '合肥': [117.27, 31.86],
            '武汉': [114.31, 30.52],
            '大庆': [125.03, 46.58]
          }
          var convertData = function (data) {
            var res = []
            for (let i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name]
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
                })
              }
            }
            return res
          }
          option = {
              // backgroundColor: '#404a59',
              title: {
                text: 'ArcGIS扩展Echarts3之全国主要城市空气质量',
                subtext: 'Data from PM25.in,Develop By WanderGIS',
                sublink: 'https://github.com/wandergis/arcgis-echarts3',
                left: 'center',
                textStyle: {
                  color: '#fff'
                }
              },
              tooltip : {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                y: 'bottom',
                x:'right',
                data:['pm2.5'],
                textStyle: {
                  color: '#fff'
                }
              },
              geo: {
                map: '',
                label: {
                  emphasis: {
                    show: false
                  }
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                  },
                  emphasis: {
                    areaColor: '#2a333d'
                  }
                }
              },
              series : [
                {
                  name: 'pm2.5',
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  data: convertData(data),
                  symbolSize: function (val) {
                    return val[2] / 10
                  },
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: false
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#ddb926'
                    }
                  }
                },
                {
                  name: 'Top 5',
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: convertData(data.sort(function (a, b) {
                    return b.value - a.value
                  }).slice(0, 6)),
                  symbolSize: function (val) {
                    return val[2] / 10
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke'
                  },
                  hoverAnimation: true,
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#f4e925',
                      shadowBlur: 10,
                      shadowColor: '#333'
                    }
                  },
                  zlevel: 1
                }
              ]
          }
          overlay.setOption(option)
          console.log('overlay', overlay)
        })
    })
  }
}
</script>

<style>
.map {
  height: 500px;
}
.HomeButton {
  position: relative;
  top: 125px;
  left: 20px;
  z-index: 50;
}
</style>

在使用源码gulp封装后

按照gulpfile.js中的配置封装后生成的main.js和原本已生成的main.js存在出入,替换原main.js后地图内的echarts插件不可用这是为什么呢,我的gulp版本是3.9.1

页面无法加载进来

将工程导入到本地,运行index.html文件无法显示,请问需要修改什么吗?

您好,想请教一下如何对现有代码进行维护

目前arcgis-echarts3停留的版本还比较古老,该项目也有很长时间木有更新啦,想请教下个人如何更新main.js内的echarts源代码,小辈也想发布项目定时更新ec3源代码为他人提供帮助

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.