Cannot read properties of undefined (reading 'transform') MapDraw.draw (MapDraw.js:210:32)

[suraj740]

i am using ol-echarts package here to draw the heatmap chart, but getting the folloeing error while using appendTo

MapDraw.js:210 Uncaught TypeError: Cannot read properties of undefined (reading 'transform')
    at MapDraw.draw (MapDraw.js:210:32)
    at ExtendedClass.render (MapView.js:70:17)
    at Task.progress (Chart.js:281:20)
    at doProgress (task.js:217:11)
    at Task.taskProto.perform (task.js:157:9)
    at eval (echarts.js:1451:30)
    at ExtendedClass.eval (Global.js:517:10)
    at Array.forEach (<anonymous>)
    at each (util.js:300:9)
    at ExtendedClass.eachSeries (Global.js:514:5)

[sakitam-fdd]

@suraj740 Can you give me a minimum example and ol version and echarts version you use?

[suraj740]

Hi @sakitam-fdd Here is the reproducible example, example

[sakitam-fdd]

@suraj740 https://sakitam-fdd.github.io/ol3Echarts/static/examples/point/heatmap.html

series.type must be 'heatmap'

data item must has coordinates eg: [114.113747, 22.285694, value]

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import EChartsLayer from "ol-echarts";

class OMap extends Map {}

var map = new OMap({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: "map",
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

// echarts.registerMap();

var option = {
  title: {
    text: 'Population Density of Hong Kong （2011）',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c} (p / km2)'
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  visualMap: {
    min: 800,
    max: 50000,
    text: ['High', 'Low'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['lightskyblue', 'yellow', 'orangered']
    }
  },
  series: [
    {
      name: '香港18区人口密度',
      type: 'heatmap',
      map: 'HK',
      label: {
        show: true
      },
      data: [
        [114.113747, 22.285694, 10000]
      ],
      // 自定义名称映射
      nameMap: {
        'Central and Western': '中西区',
        Eastern: '东区',
        Islands: '离岛',
        'Kowloon City': '九龙城',
        'Kwai Tsing': '葵青',
        'Kwun Tong': '观塘',
        North: '北区',
        'Sai Kung': '西贡',
        'Sha Tin': '沙田',
        'Sham Shui Po': '深水埗',
        Southern: '南区',
        'Tai Po': '大埔',
        'Tsuen Wan': '荃湾',
        'Tuen Mun': '屯门',
        'Wan Chai': '湾仔',
        'Wong Tai Sin': '黄大仙',
        'Yau Tsim Mong': '油尖旺',
        'Yuen Long': '元朗'
      }
    }
  ]
}

var echartslayer = new EChartsLayer(
  {},
  {
    convertTypes: [],
    forcedRerender: false,
    hideOnMoving: false,
    hideOnZooming: false,
    polyfillEvents: false,
    forcedPrecomposeRerender: true
  }
);
console.log(echartslayer)

echartslayer.setChartOptions(option)
echartslayer.appendTo(map);

[suraj740]

Thanks @sakitam-fdd , heatmap is already working for me .

But i want to use type: map not the heamap. How we can register custom map like how we do in echarts?.

[sakitam-fdd]

@suraj740 map type is not supported for the time being, but i can study it