Code Monkey home page Code Monkey logo

echarts-extension-amap's Introduction

NPM version Build Status NPM Downloads jsDelivr Downloads License

AMap extension for Apache ECharts

中文说明

Online example on CodePen

This is an AMap extension for Apache ECharts which is used to display visualizations such as Scatter, Lines, Heatmap, and Pie.

Examples

Scatter: examples/scatter.html

Preview-Scatter

Heatmap: examples/heatmap.html

Preview-Heatmap

Lines: examples/lines.html

Preview-Lines

Pie: examples/pie.html (Since v1.11.0)

Preview-Pie

Installation

npm install echarts-extension-amap --save

Import

Import packaged distribution file echarts-extension-amap.min.js and add AMap API script and ECharts script.

<!-- import JavaScript API of AMap, please replace the ak with your own key and specify the version and plugins you need -->
<!-- Plugin `AMap.CustomLayer` is required if you are using a version of library less than v1.9.0 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
<!-- import ECharts -->
<script src="/path/to/echarts.min.js"></script>
<!-- import echarts-extension-amap -->
<script src="dist/echarts-extension-amap.min.js"></script>

You can also import this extension by require or import if you are using webpack or any other bundler.

// use require
require('echarts');
require('echarts-extension-amap');

// use import
import * as echarts from 'echarts';
import 'echarts-extension-amap';

If importing dynamically the API script is needed, it's suggested to use amap-jsapi-loader or wrap a dynamic and asynchronized script loader manually through Promise.

Use CDN

jsDelivr

Use the latest version

https://cdn.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.min.js

Use a specific version

https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js

unpkg

Use the latest version

https://unpkg.com/echarts-extension-amap/dist/echarts-extension-amap.min.js

Use a specific version

https://unpkg.com/[email protected]/dist/echarts-extension-amap.min.js

This extension will register itself as a component of echarts after it is imported.

Apache ECharts 5 import on demand

Apache ECharts has provided us the new tree-shaking API since v5.0.1. This is how to use it in this extension:

// import scatter, effectScatter and amap extension component on demand
import * as echarts from 'echarts/core';
import {
  ScatterChart,
  ScatterSeriesOption,
  EffectScatterChart,
  EffectScatterSeriesOption
} from 'echarts/charts';
import {
  TooltipComponent,
  TitleComponentOption
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import {
  install as AMapComponent,
  AMapComponentOption
} from 'echarts-extension-amap/export';

// import the official type definition for AMap 2.0
import '@amap/amap-jsapi-types';

// compose required options
type ECOption = echarts.ComposeOption<
  | ScatterSeriesOption
  | EffectScatterSeriesOption
  | TitleComponentOption
  // unite AMapComponentOption with the initial options of AMap `AMap.MapOptions`
> & AMapComponentOption<AMap.MapOptions>;

// register renderers, components and charts
echarts.use([
  CanvasRenderer,
  TooltipComponent,
  AMapComponent,
  ScatterChart,
  EffectScatterChart
]);

// define ECharts option
const option: ECOption = {
  // AMap extension option
  amap: {
    // ...
  },
  title: {
    // ...
  },
  series: [
    {
      type: 'scatter',
      // Use AMap coordinate system
      coordinateSystem: 'amap',
      // ...
    }
  ]
  // ...
};

Usage

option = {
  // load amap component
  amap: {
    // enable 3D mode
    // Note that it's suggested to enable 3D mode to improve echarts rendering.
    viewMode: '3D',
    // initial options of AMap
    // See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
    // initial map center [lng, lat]
    center: [108.39, 39.9],
    // initial map zoom
    zoom: 4,
    // whether the map and echarts automatically handles browser window resize to update itself.
    resizeEnable: true,
    // customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
    mapStyle: 'amap://styles/dark',
    // whether echarts layer should be rendered when the map is moving. Default is true.
    // if false, it will only be re-rendered after the map `moveend`.
    // It's better to set this option to false if data is large.
    renderOnMoving: true,
    // the zIndex of echarts layer for AMap, default value is 2000.
    // deprecated since v1.9.0, use `echartsLayerInteractive` instead.
    echartsLayerZIndex: 2019,
    // whether echarts layer is interactive. Default value is true
    // supported since v1.9.0
    echartsLayerInteractive: true,
    // whether to enable large mode. Default value is false
    // supported since v1.9.0
    largeMode: false
    // Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
    // There are some bugs about it, we can use `amap.add` instead.
    // Refer to the codes at the bottom.

    // More initial options...
  },
  series: [
    {
      type: 'scatter',
      // use `amap` as the coordinate system
      coordinateSystem: 'amap',
      // data items [[lng, lat, value], [lng, lat, value], ...]
      data: [[120, 30, 8], [120.1, 30.2, 20]],
      encode: {
        // encode the third element of data item as the `value` dimension
        value: 2
      }
    }
  ]
};

// Get AMap extension component
var amapComponent = chart.getModel().getComponent('amap');
// Get the instance of AMap
var amap = amapComponent.getAMap();
// Add some controls provided by AMap.
amap.addControl(new AMap.Scale());
amap.addControl(new AMap.ToolBar());
// Add SatelliteLayer and RoadNetLayer to map
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
amap.add([satelliteLayer, roadNetLayer]);
// Add a marker to map
amap.add(new AMap.Marker({
  position: [115, 35]
}));
// Make the overlay layer of AMap interactive
amapComponent.setEChartsLayerInteractive(false);

echarts-extension-amap's People

Contributors

dependabot[bot] avatar plainheart avatar zhengquan45 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

echarts-extension-amap's Issues

高德地图版本判断方式有误

最新高德地图使用 v 字段标识版本,isAMap2X 函数可能存在问题,version 在多次加载时会被覆写

版本标识:
image

version 被覆写:
image

ionic项目,使用prod,release打包ios后报错getComponent("amap") undefined

使用版本: "echarts-extension-amap": "^1.9.1",
报错:
image
在localstorage中查看发现只加载了一部分
image

使用:
image

image

amap、echarts对象都可以获取的到,但是在setOption之后仍然获取amapComponent失败
在debug打包/safari调试时地图都可以正常显示

麻烦您帮忙看一下,实在是没有思路如何解决了🙏

在getmodel的componentMap中发现报了严格模式相关的错误,不知道是否是这个引起的问题
image

请教高德地图 loca.js ContourLayer的问题

问题描述

最近的项目需要实现等值面的效果,在全局数据的时候很好的实现了效果(只是表面看起来还行),但是当区域很小,数据同一时刻变化不大的时候就出现问题了
下图为全局数据的效果
image
image
下图为局部数据效果,如果按照echarts的visualmap的逻辑,应该是有个数值范围和颜色范围的映射的,但是高德并没有让我们填写这个数据,这就导致,当时间为00:00,数据基本上都为-2时的颜色和时间为04:00,数据都为2时的颜色是一样的,我不清楚该如何解决这个问题,我把type从等值面改为等值线能够明显看出每一时刻等值线的不同。
image
image

引入自己的key和自定义地图主题无效

大神你好,想问一下是不是只支持官方的主题色呀,我确定自己用的key可Id是对应正确的,本地也可以出来我设置的地图,但是在您这边例子里改变不了地图主题,是否与高德地图后面出的规定有关?->(自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode 一起使用),我本地需要key和密钥搭配使用,地图才会生效。您这的代码里哪里可以调用密钥吗?谢谢解答

引入后可正常使用,但经常报Cannot read property 'it' of undefined这个错,该怎么优化呢?

Uncaught TypeError: Cannot read property 'it' of undefined
at c.sD (maps?key=eb116aacb0c35f531e53497b5e69e6d0&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Geolocation,Geolocation,AMap.Geocoder,Geocoder,AMap.ToolBar,ToolBar,AMap.Scale,Scale,AMap.CustomLayer,CustomLayer,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:458)
at c.sD (maps?key=eb116aacb0c35f531e53497b5e69e6d0&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Geolocation,Geolocation,AMap.Geocoder,Geocoder,AMap.ToolBar,ToolBar,AMap.Scale,Scale,AMap.CustomLayer,CustomLayer,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:217)
at c.pc (maps?key=eb116aacb0c35f531e53497b5e69e6d0&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Geolocation,Geolocation,AMap.Geocoder,Geocoder,AMap.ToolBar,ToolBar,AMap.Scale,Scale,AMap.CustomLayer,CustomLayer,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:426)
at maps?key=eb116aacb0c35f531e53497b5e69e6d0&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Geolocation,Geolocation,AMap.Geocoder,Geocoder,AMap.ToolBar,ToolBar,AMap.Scale,Scale,AMap.CustomLayer,CustomLayer,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:72

数据量稍大,地图平移就不起作用,卡

vue3.0 + echarts5.0 + 高德v2.0

  1. 当effectScatter data数据量较少时,地图移动缩放都没问题,当数据量稍微大一点移动就不起作用。
  2. 尝试将高德api换成v1.4.15版本后就没有这个问题

地图样式设置无法生效,无法更改地图的样式

运行项目中examples\index.html文件。
发现修改mapStyle无法生效。
运行截图:
样式本应为黑色,但实际却是白色。
image

代码源文件:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="cleartype" content="on">
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="dns-prefetch" href="https://webapi.amap.com">
  <link rel="dns-prefetch" href="https://restapi.amap.com">
  <link rel="dns-prefetch" href="https://vdata.amap.com">
  <link rel="dns-prefetch" href="https://vdata01.amap.com">
  <link rel="dns-prefetch" href="https://vdata02.amap.com">
  <link rel="dns-prefetch" href="https://vdata03.amap.com">
  <link rel="dns-prefetch" href="https://vdata04.amap.com">
  <link rel="dns-prefetch" href="https://sdf.amap.com">
  <link rel="dns-prefetch" href="https://wprd01.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd02.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd03.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd04.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst01.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst02.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst03.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst04.is.autonavi.com">
  <title>an example for echarts-extension-amap</title>
  <!-- please replace {ak} with your ak & customize your plugins -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
  <!-- ECharts CDN -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <!-- echarts amap extension -->
  <!-- <script type="text/javascript" src="../dist/echarts-extension-amap.min.js"></script> -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js"></script>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html, body, #echarts-amap {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="echarts-amap"></div>
  <!-- data comes from Baidu Map, just for example -->
  <script type="text/javascript">
    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 (var 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;
    };

    var option = {
      // amap component option
      amap: {
        // enable 3D mode
        // Note that it's suggested to enable 3D mode to improve echarts rendering.
        viewMode: '3D',
        // initial options of AMap
        // See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
        // initial map center [lng, lat]
        center: [108.39, 39.9],
        // initial map zoom
        zoom: 4,
        // whether the map and echarts automatically handles browser window resize to update itself.
        resizeEnable: true,
        // customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
        mapStyle: "amap://styles/dark",
        // whether echarts layer should be rendered when the map is moving. Default is true.
        // if false, it will only be re-rendered after the map `moveend`.
        // It's better to set this option to false if data is large.
        renderOnMoving: true,
        // the zIndex of echarts layer for AMap, default value is 2000.
        echartsLayerZIndex: 2019
        // Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
        // There are some bugs about it, we can use `amap.add` instead.
        // Refer to the codes at the bottom.

        // More initial options...
      },
      tooltip : {
        trigger: 'item'
      },
      animation: true,
      series: [
        {
          name: 'PM2.5',
          type: "scatter",
          // use `amap` as the coordinate system
          coordinateSystem: "amap",
          // data items [[lng, lat, value], [lng, lat, value], ...]
          data: convertData(data),
          symbolSize: function (val) {
            return val[2] / 10;
          },
          encode: {
            value: 2
          },
          label: {
            formatter: '{b}',
            position: 'right',
            show: false
          },
          itemStyle: {
            normal: {
              color: '#00c1de'
            }
          },
          emphasis: {
            label: {
              show: true
            }
          }
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'amap',
          data: convertData(data.sort(function (a, b) {
            return b.value - a.value;
          }).slice(0, 6)),
          symbolSize: function (val) {
            return val[2] / 10;
          },
          encode: {
            value: 2
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            formatter: '{b}',
            position: 'right',
            show: true
          },
          itemStyle: {
            color: '#fff',
            shadowBlur: 10,
            shadowColor: '#333'
          },
          zlevel: 1
        }
      ]
    };
    // initialize echart
    var chart = echarts.init(document.getElementById("echarts-amap"));
    chart.setOption(option);
    // get amap instance
    var amap = chart.getModel().getComponent("amap").getAMap();
    // operations below are the same as amap
    amap.addControl(new AMap.Scale());
    amap.addControl(new AMap.ToolBar());
    // add layers
    // var satelliteLayer = new AMap.TileLayer.Satellite();
    // var roadNetLayer = new AMap.TileLayer.RoadNet();
    // amap.add([satelliteLayer, roadNetLayer]);
  </script>
</body>
</html>

如何地图之上创建一个geojson的地图轮廓

如何地图之上创建一个geojson的地图轮廓。我尝试性的在echart的option配置添加了 series: [
{
name: 'PM2.5',
type: "map",
mapType: 'SHAOWU', // 自定义扩展图表类型
// 使用高德地图坐标系
coordinateSystem: "amap",
}
SHAOWU是我自定义的县市的地图,发现无法生效,是不支持吗?
https://github.com/zhengquan45/shaowu

补充:我发现这个插件是建立在geo基础上的 也就是说geo这种地图坐标系所支持的图标绘制好像只有热力 气泡 散点 线型这四种 其他则无法支持,是这样吗

有vue的例子吗

现在这个插件能在vue下运行吗?我看例子是普通html的

高德地图Marker对象的事件无法触发。

echarts: v5.1.2
echarts-extension-amap: v1.10.0
AMap:v1.4.15

正常使用高德地图时,Marker实例绘制的DOM节点,层级高于图层,可以在浏览器中被检查器直接选中。使用echarts结合地图使用时,Maker实例的DOM节点被覆盖导致事件无法触发。

高德地图图层全屏遮挡原有组件

问题描述

按道理给个容器,地图就在容器里绘制,但是不知道为啥,地图直接充满全屏了,把header还有按钮文字都遮挡了

组件代码

<template>
    <div class="siteInfo">
        <el-container>
            <el-main>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="float: left"> <b>整体区域</b></span>
                        <el-image :src="colors">
                        </el-image>
                        <el-button @click="back">返回</el-button>
                    </div>
                    <div style="width: 100%;height:1000px;">
                        <!-- ECharts 地图容器 -->
                        <div id="echarts-amap" style="width: 100%;height: 100%;"></div>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>

显示效果

image

切换按钮页面丢失

我设置了三个按钮,对应三个地图组件,默认加载第一个地图组件,当我第一次切换按钮时,加载对应的地图组件,当我再次点击第一个按钮时,就不加载地图组件了,地图组件没有了,丢失了,请问是什么原因。

有匹配高德API 2.0的计划吗?

看示例都是匹配高德API 1.4.15,有匹配高德API2.0的计划吗?据说2.0改进还是比较大的。
直接引用试过,原来1.4.15正常的句子,2.0就出错了。
例如var opts={subdistrict:0,extensions:'base',level:'city'};var district=new AMap.DistrictSearch(opts);
这句在2.0下报错:对象不支持assign属性或方法
1.4.15正常,不通过这个模块直接使用高德API也正常

关于监听缩放移动事件

geobmap下可以使用事件georoambmaproam来监听地图缩放与拖拽移动事件下的参数,但是我试了amaproam只返回了这些信息:
image

是目前还没有针对更多参数监听例如缩放级别进行开发吗

示例文件里,置空 series 无法清除数据

在示例文件 index_zh_CN.html 末尾添加代码

setTimeout(function() {
    const opts = echarts.util.clone(option)
    opts.series = []
    chart.setOption(opts);
}, 3000)

无法清除地图上的点(echarts 官网中使用 bmap 是可以的)
只能通过

setTimeout(function() {
    const opts = echarts.util.clone(option)
    opts.series.forEach(s => {
        s.data = []
    })
    chart.setOption(opts);
}, 3000)

方式清除,这应该是一个 BUG

旋转 echarts 不会自动更新

旋转地图或者切换地图视角的时候,echarts其它系列的点不会自动更新。mapmove,zoom之类的可以自动更新。

使用定时器刷新数据后导致内存泄漏

使用echarts-extension-amap让echarts导入高德地图加geo覆盖物,设置了数据刷新会clear charts 重新setOption
下面为setOption的方法

setOptions(data, linesData, map, clear = true) {
      if (!this.chart) {
        return
      }
      const projectCoordList = data => {
        if (JSON.stringify(data) !== '{}') {
          return data.projectCoordList
            .map(({ center, name, value }) => {
              if (center) {
                center.push(value)
              }
              return { name, value: center }
            })
        }
      }
      const tenantCoordList = data => {
        if (JSON.stringify(data) !== '{}') {
          return data.tenantCoordList
            .filter(item => item.center)
            .map(({ center, name, value }) => {
              center.push(value)
              return { name, value: center }
            })
        }
      }
      const convertLinesData = data => {
        return data.linkCoordList
      }
      var maxValue
      var projectMaxValue
      if (JSON.stringify(data) !== '{}') {
        maxValue = Math.max(1, ...data.tenantCoordList.map(t => t.value))
        projectMaxValue = Math.max(1, ...data.projectCoordList.map(t => t.value))
      }
      const option = {
        backgroundColor: 'transparent',
        geo: {
          map,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true, // 是否允许缩放
          layoutCenter: ['50%', '50%'],
          layoutSize: '70%',
          itemStyle: {
            normal: {
              areaColor: 'rgba(51, 69, 89, .5)',
              borderColor: 'rgba(100, 149, 237, 1)'
            },
            emphasis: {
              areaColor: 'rgba(37, 43, 61, .5)'
            }
          }
        },
        amap: {
          center: [120.637376, 30.422934],
          resizeEnable: true,
          mapStyle: 'amap://styles/darkblue', // 地图样式白色
          // rotation: 10,
          renderOnMoving: true,
          echartsLayerInteractive: true,
          largeMode: false,
          returnMapCameraState: true,
          roam: true,
          zoom: 11, // 缩放
          viewMode: '3D' // 是否启用3d地图
          // pitch: 35, // 视角高度
          // skyColor: '#33216a'
        },
        animation: false,
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(12, 204, 104, 0.92)',
          borderColor: '#FFFFCC',
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: 'z-index:100',
          formatter: (params, ticket, callback) => {
            const name = params.name
            let value = params.value
            if (!name) {
              return ''
            }
            if (typeof value === 'object') {
              value = value[2]
            }
            if (isNaN(value)) {
              value = 0
            }
            if (value > 10000) {
              value = (value / 10000).toFixed(2)
              const res =
              "<span style='color:#fff;'>" + name + '</span><br/>数据:' + value + ' 万方'
              return res
            } else {
              value = this.formatNumber(value)
              const res =
              "<span style='color:#fff;'>" + name + '</span><br/>数据:' + value + ' 方'
              return res
            }
          }
        },
        series: [
          {
            name: 'lines1',
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: '#fff',
              symbolSize: 4
            },
            lineStyle: {
              normal: {
                color: '#eac736',
                width: 0,
                curveness: 0.2
              }
            },
            data: convertLinesData(data)
          },
          {
            name: 'lines2',
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol:
                'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705',
              symbolSize: 15
            },
            lineStyle: {
              normal: {
                color: '#eac736',
                width: 1,
                opacity: 0.4,
                curveness: 0.2
              }
            },
            data: convertLinesData(data)
          },
          {
            name: 'blueDot',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: tenantCoordList(data),
            // data: [
            // ],
            // data: convertScatterData(data.filter(t => t.type !== 'project')),
            // 非工程显示原型(搅拌站、公司),即蓝点
            symbolSize: (val) => {
              if (maxValue > 0) {
                return Math.max(10, (val[2] * 20) / maxValue)
              }
              return 10
              // return 20
            },
            // label: {
            //   normal: {
            //     formatter: function(params) {
            //       let name = params.name
            //       let value = params.value[2]
            //       console.log('con', typeof value)
            //       let res = name + '\n' + value + ' 方'
            //       return res
            //     },
            //     position: 'right',
            //     align: 'center',
            //     show: true
            //   },
            //   emphasis: {
            //     show: true
            //   }
            // },
            itemStyle: {
              normal: {
                color: '#05C3F9'
              }
            }
          },
          {
            name: 'projectGeo',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: projectCoordList(data),
            // data: convertScatterData(data.filter(t => t.type === 'project')),
            // 工程显示原型,即绿点
            symbolSize: val => {
              if (projectMaxValue > 0) {
                // return Math.max(15, (val[2] * 15) / projectMaxValue)
                return Math.max(10, (val[2] * 20) / projectMaxValue)
              }
              return 10
              // return 20
            },
            // label: {
            //   normal: {
            //     formatter: '{b}',
            //     position: 'right',
            //     show: true
            //   },
            //   emphasis: {
            //     show: true
            //   }
            // },
            itemStyle: {
              normal: {
                color: '#90EE90'
              }
            }
          }
        ]
      }
      axios
        .get('/geo-json/100000/330000/330400/330481.geoJson', { timeout: 60000 })
        .then(({ data }) => {
          const geojson = new AMap.GeoJSON({
            geoJSON: data,
            // 还可以自定义getMarker和getPolyline
            getPolygon: function(geojson, lnglats) {
            // 计算面积
              // var area = AMap.GeometryUtil.ringArea(lnglats[0])

              return new AMap.Polygon({
                path: lnglats,
                fillOpacity: 0.4,
                // fillOpacity: 1 - Math.sqrt(area / 8000000000), // 面积越大透明度越高
                strokeColor: '#008B8B',
                fillColor: '#4169FF'
              })
            }
          })
          const amap = this.chart.getModel().getComponent('amap').getAMap()
          amap.add(geojson)
          console.log('GeoJSON 数据加载完成')
        })
        .catch(error => {
          const message = parseRequestError(error)
          console.log('error', message)
        })
      console.log('clear', clear)
      if (clear) {
        this.chart.clear()
      }
      this.chart.setOption(option)
    },

坐标系现在是geo,用来和amap进行对比的,发现geo为坐标系并不会出现内存泄漏现象,使用amap才会,请问怎么解决这个问题,是否有相关api

地图展示ecahrt 饼图,饼图位置一直在地图左上角

地图展示ecahrt 饼图,饼图位置一直在地图左上角,代码如下:
{ id: 'stationPie' + index, center: item.coord, color: ['#5ad4cf', '#ffd258'], // 饼图每个扇形的颜色 coordinateSystem: 'amap', data: [ { name:'上车人数', value: item.up }, { name: '下车人数', value: item.down }, ], itemStyle: { normal: { borderColor: '#ffffff', borderWidth: 0.3 } }, name: item.name, radius: '24px', type: 'pie', zlevel: 5 }

vue项目打包后丢失地图

我在vue-cli3项目本地编译可以加载地图,但打包后地图不能加载,跟我在本地注释调echarts-extension-amap的效果一样,呈现空白

如何跟随地图重绘?

image

如图 在拖动过程中做了防抖处理 当拖动未结束就不重新渲染 但这个效果不怎么好看啊

在 echarts-amap 中实现了

var layer = echart
.getModel()
.getComponent('amap')
.getLayer()
layer.render = function() {
echart.setOption({ series })
}
监听图层的渲染 使echarts跟随其渲染,

20万数据负载缩放慢

大规模Echarts中的webgl数据散点缩放时地图更新视野特别卡,是为什么?作者设计view的时候有没有遇到过这个问题或者考虑到,还是我哪里设置错误?数据级别会达到60万

清空绘图实例时,提示Cannot read property 'getAMap'

下面是我对js文件的导入:

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=****"></script>
<!-- 引入 ECharts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- 引入ECharts黑色风格-->
<script type="text/javascript" src="js/dark.js"></script>
<!-- 引入高德地图扩展 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js"></script>

下面是我程序中的相关调用:

    // 展示确诊视图
    function showConfirm(){
        alert("showConfirm");
        console.log(confirmOption);
        myChart.clear();
        myChart.setOption(confirmOption);
    }
    // 展示lagging视图
    function showLagging(){
        alert("show lagging");
        console.log(laggingOption);
        myChart.clear();
        myChart.setOption(laggingOption);
    }

下图是我浏览器端报的错误:
image

关于地图初次载入时的背景色

大佬你好,我想咨询一下在地图初次载入时,会有一个灰白色的背景闪一下就会刷掉,但是对应暗色地图时观感不太好:
image
载入后是这样的:
image

请问这个背景色有没有办法进行修改,我翻了高德地图的文档暂时没有收获😔

关于速度

Amap加载地图偏慢,哪怕已经加载过,瓦片之类的在缓冲文件夹都有缓存,加载加载还是慢,请问是否有什么方法可以改进下?

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.