Skip to content

关于openlayer3 里面结合 当前官网的echartsLayer 发生的坐标问题 #130

@hsknemo

Description

@hsknemo

你好作者,我这边用openlayer3 结合 charts 时候发生了坐标问题

openlayers 版本 3
chart 版本 当前时间官网最新
坐标数据 坐标系 EPSG:4326

代码如下:
`

<title>ol3-Echarts</title> <style> html, body, #map { height: 100%; padding: 0; margin: 0; } .hmap-control-zoom { right: 30px; } </style>
<script src="https://unpkg.com/hmap-js/dist/hmap.js"></script> <script src="https://unpkg.com/jquery/dist/jquery.js"></script> <script src="https://unpkg.com/echarts/dist/echarts.js"></script> <script src="https://unpkg.com/ol3-echarts/dist/ol3Echarts.js"></script> <script> document.onreadystatechange = function () { if (document.readyState === 'complete') { var Maps = new HMap('map', { controls: { loading: true, zoomSlider: true, fullScreen: false }, options: { units: 'degree' }, view: { center: [121.4684258636191,31.235731714454257], projection: 'EPSG:4326', tileSize: 256, zoom: 5, // resolution }, });
  fetch('./新建文本文档.txt').then(res => res.json()).then(data => {
    console.log(data)
    let d = data.slice(0, 1000)
    // d.forEach(item => {
    //   item.x = parseInt(item.coord[0])
    //   item.y = parseInt(item.coord[1])
    //
    // })
    var data = [
      // {
      //   name:'2323',
      //   value: [121.46842534814978,31.23573218171289, 10]
      // },
      // {
      //   name: '66666',
      //   value: [121.46842508556256,31.23573183686057, 10]
      // }
    ];

    d.forEach(item => {
      item.coord.push(0)
      data.push({
        name:item.name,
        value: item.coord
      })
    })


    var option = {
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          coordinateSystem: 'geo',
          name: 'pm2.5',
          type: 'scatter',
          data: data,
          symbolSize: function (val) {
            return 20;
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#ddb926'
            }
          }
        }]
    };
    var echartslayer = new ol3Echarts(option);
    echartslayer.appendTo(Maps.getMap());

  })


}

}
</script>

`

代码中新建文本文档.txt 是我的一个点位坐标文件
发生的问题: 在大比例尺的时候 点位才散开, 其实我这个用openlayer 直接叠加的话 会在大比例尺就散开,不知为什么在这里发生了这样的问题
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions