• L7 Version: 1.3.2
• Platform:Browser Chrome @76.0.3809.132

PolygonLayer 的shape 方法代码 中this.set('shape',type)，把shape方法改写

shape(type) {
this.shape = type;
this.set('shape', type);
this.set('shapeType', 'polygon');
return this;
}

导致此方法只能执行一次，并且只能传入line,fill,extrude 三种shape，填写其他field映射都会导致draw时,getRender方法报错。

• L7 Version : 1.3.6:
• **Platform: macos chrome **:

在 vue 中使用：

    initL7() {
      let scene = new L7.Scene({
        id: "summary-map",
        zoom: 4,
        mapStyle: "amap://styles/grey"
      });
      scene.on("loaded", () => {
         ...
      });
      this.scene = scene;
    }

加了一个点图层和一个弧线图层，代码略，地图生成能正常显示

删除地图： this.scene.destroy();
报错：

L7-min.js:32 Uncaught TypeError: Cannot read property 'clear' of null
    at a.update (L7-min.js:32)
    at a.run (L7-min.js:32)

重新生成地图，地图可以正常生成：
在地图上移动鼠标，报错

L7-min.js:28 Uncaught TypeError: Cannot read property 'boundingSphere' of null
    at vn.Object.assign.intersectsObject (L7-min.js:28)
    at t (L7-min.js:28)
    at t (L7-min.js:28)
    at t (L7-min.js:28)
    at t (L7-min.js:28)
    at qi.render (L7-min.js:28)
    at l._update (L7-min.js:32)
    at l._pick (L7-min.js:32)
    at L7-min.js:32
    at Array.forEach (<anonymous>)

Platform:
MacOS

• Mini Showcase(like screenshots):
  

• 重现:
  https://l7.antv.vision/zh/examples/gallery/basic#normal

无法响应点击，重复刷新返回崩溃页面。

circle() 固定为30是否合理？是不是应该允许用户自定义？

This issue was generated by todo based on a TODO comment in 7786c64 when #40 was merged. cc @antvis.

This issue was generated by todo based on a TODO comment in 480e913. It's been assigned to @lzxue because they committed the code.

问题背景

用户在使用 L7 的 Scene/Layer API 时，由于参数配置项众多难免会误传。需要在运行时通过校验提前发现并给出友好的提示。

另外由于 L7 允许用户自定义 Layer、Layer 插件、后处理效果，规范化参数配置项也能提升易用性和质量。

这方面 Webpack 做的很好，使用 schema-utils 基于 JSON Schema 对 Plugin 和 Loader 进行校验。如果传入了错误的配置项，会给出友好的提示：

Invalid configuration object. MyPlugin has been initialised using a configuration object that does not match the API schema.
 - configuration.optionName should be a integer.

方案设计

需要考虑以下场景及注意事项：

• L7 内部 Scene、Layer、Layer 插件、后处理效果直接使用该服务，校验传入的配置项
• 对于用户自定义 Layer、插件、后处理效果提供简单友好方式接入，例如通过重载基类方法定义自定义组件配置项的 schema
• 校验失败立刻中断后续处理（Layer 初始化），并在控制台给出友好提示
• 校验时机除了初始化，在 Layer 属性更新时同样需要进行

在具体实现上，和 Webpack 一样，我们也选择 ajv 作为 JSON Schema 校验器。

JSON Schema 描述十分直观，例如描述 Layer 拾取高亮相关的配置项 Schema：

export default {
  properties: {
    // 开启拾取
    enablePicking: {
      type: 'boolean',
    },
    // 开启高亮
    enableHighlight: {
      type: 'boolean',
    },
    // 高亮颜色：例如 [0, 0, 1, 1] 或者 '#ffffff'
    highlightColor: {
      oneOf: [
        {
          type: 'array',
          items: {
            type: 'number',
            minimum: 0,
            maximum: 1,
          },
        },
        {
          type: 'string',
        },
      ],
    },
  },
};

API

通过 configService 引用，作为一个全局服务在全局容器中完成绑定。

同一类 Layer 只需要注册一个校验器：

registerLayerConfigSchemaValidator(layerName: string, schema: object): void;
validateLayerConfig(layerName: string, data: object): { valid: boolean; errorText: string; };

使用方法

主要考虑自定义场景下的使用方法，内置实现使用方法几乎一致。

Layer 子类配置项 Schema

Layer 子类（用户自定义 Layer 一样）可以通过重载 getConfigSchema() 方法定义自身的特有属性。例如 PolygonLayer 需要定义透明度：

protected getConfigSchema() {
  return {
    properties: {
      opacity: {
        type: 'number',
        minimum: 0,
        maximum: 1,
      },
    },
  };
}

TODO

待补充自定义 Layer 插件、后处理效果 使用方法。

如题

见图：

见代码：

import React, { useEffect } from 'react'
import * as L7 from '@antv/l7'

const L7Component = (props) => {
  return (
    <div id="map" style={props.needHeight ? {width: '100%', height: '100%'}: {width: '100%'}}>
    </div>
  )
}

export default L7Component

我明明只是引入L7，就直接报错了，是不是你们内部代码改错了？

• L7 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

版本：1.3.4，webpack+react构建

报错：

链接地址：https://www.guozhenqiang.top/dist/#/

• L7 Version: 1.3.5-beta.2
• Platform: mac / chrome
• Mini Showcase(like screenshots):
  

• CodePen Link:

目前地图的文本显示会进行文本的碰撞检测，智能展示部分文本。希望能提供配置项，让用户自行选择是否需要开启这个配置。因为有时候用户可能就像全量展示。

问题

在线复现 DEMO：
https://codesandbox.io/s/friendly-rain-toojv

尝试继承 BasePostProcessingPass 实现自定义后处理效果时报错：

Uncaught (in promise) TypeError: Class constructor BasePostProcessingPass cannot be invoked without 'new'
    at new DotScreenEffect (DotScreenEffect.js:45)
    at _createInstance (instantiation.js:21)
    at Object.resolveInstance (instantiation.js:41)
    at eval (resolver.js:72)
    at Object.resolve (resolver.js:96)
    at eval (container.js:319)
    at Container._get (container.js:310)
    at Container.getTagged (container.js:233)
    at Container.getNamed (container.js:236)
    at eval (inversify.config.js:147)
    at eval (MultiPassRendererPlugin.js:85)
    at Array.forEach (<anonymous>)
    at MultiPassRendererPlugin.createMultiPassRenderer (MultiPassRendererPlugin.js:83)
    at eval (MultiPassRendererPlugin.js:51)
    at Hook.eval [as call] (eval at create (HookCodeFactory.js:NaN), <anonymous>:35:16)
    at Hook.CALL_DELEGATE [as _call] (Hook.js:14)
    at PointLayer.init (BaseLayer.js:162)
    at eval (LayerService.js:43)
    at Array.forEach (<anonymous>)
    at LayerService.initLayers (LayerService.js:41)
    at Scene.render (SceneService.js:162)

原因是 babel.config.js 中 browsers 被忽略，导致生成 lib/es 代码中 class extends 等语法未被转译：

// babel.config.js
presets: [
  [
    '@babel/env',
    {
      targets: {
        browsers: 'Last 2 Chrome versions, Firefox ESR',
      },
    },
  ],
]

在 babel.config.js 中设置 targets.browsers 在后续会被移除：
https://babeljs.io/docs/en/babel-preset-env#targetsbrowsers

Note: this will be removed in later version in favor of just setting "targets" to a query directly.

修复方案

在 package.json 中写 browserslist，这也是 antd 等项目的做法：

"browserslist": [
  "last 2 version",
  "Firefox ESR"
]

同时需要安装 core-js，设置 useBuiltIns 为 usage：
https://babeljs.io/docs/en/babel-preset-env#usebuiltins

简单看了一下示例和代码，目前是通过请求json(geojson)数据然后进行可视化渲染的。
这种方式可能无法做到真正的“大数据”，因为大量的数据如果通过http的单个请求，可能会超过10M或者更大。
如果能够支持原生MVT数据标准的大数据可视化，可视化的内容可以配置property字段，就可以做到分层级的大数据可视化了。
希望考虑。感谢！

• L7 Version:
  1.4.9
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:
  https://codesandbox.io/s/l7demodebug-cu7mh?fontsize=14&hidenavigation=1&theme=dark

一个元素时不能响应事件

• L7 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

1. demos/01_circle.html 里脚本名字有误，导致非windows平台会出现404

<script src="../build/l7.js"></script>

2. demos/01_point_circle.html 里代码直接有误

 $.get('https://gw.alipayobjects.com/os/rmsportal/epnZEheZeDgsiSjSPcCv.json', data => {
    console.log(data);
    const circleLayer = = scene.PointLayer({
      zIndex: 0,
    })
    .source(data,{
       isCluster:true
    })

    const circleLayer = = scene.PointLayer

3.整个项目我刚才打包编译了一下，在sourcemap里只看到三个文件（不知是不是我运行的命令有问题,还是怎们的 ? build-dev : dist)

导致debug的时候非常困难，单个js脚本太大，浏览器容易死掉，希望可以对src整个目录下的文件进行调试,例如这样子的:

4.在源码里看到了mapbox的相关MapProvider，能否提供一个简单的例子？

我使用PointLayer进行点数据进行展示，发现shape()如果使用了“image:local”自定义图片标注的话，鼠标事件（click，dblclick等等）全都失效。如果不使用“image:local”，鼠标事件能正常。

scene.image.addImage('local','https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
var pl = scene.PointLayer({visable:false,zIndex: 0})
.source(data.list,{
parser: {
type: 'json',
x: 'longitude',
y: 'latitude',
}
}).size(30).shape('image:local').color('#FFF').render();
pl.on('click',function(feature){
console.log(feature);
})

L7版本是1.3.4

请问现在L7有正式版了吗？试用修改了几个在线的例子，发现文档不太好用。Scene方法中的getLayers()和getLayers到底有什么区别，用removeLayer方法移除getLayers()获取的Layer图层没有移除掉。目前也没有类似clear的方法。

比起G2，我可以把L7放入自己的项目中吗？还是还能当玩具玩玩，等正式版发布？

点亮城市例子中，建筑物的动画如何进行精细化控制（时间，层数）？建筑物放大到一定程度，出现了过多的窗户，如何控制到一定显示比例以后，不在绘制新的窗户。谢谢

点数据支持数据聚合
可以通过Source设置聚合配置项

source(data,{
 cluster: {
     radius: 40,  // 聚合半径
     maxZoom: 20, // 聚合最大缩放等级
     field: 'count', // 聚合字段
     method: 'sum', // 聚合方法 支持通用方法回调函数
 
 }
})

layer 渲染层根据缩放，平移获取新的聚合数据渲染

• L7 Version: 2.0.beta
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:
  点图层中点密集后高亮的颜色？
  或者怎么取消高亮？统一纯色点渲染
  enableHighlight: false,无效

文件不存在。。https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.3.1/dist/l7.min.js

• L7 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

是否有考虑抽离核心渲染器，支持各个地图类库的 CanvasLayer？目前如果直接创建 dom 元素的方式会直接覆盖掉原始地图图层，我看到 next 分支相关的新架构貌似目前还没有计划抽离这一块。

问题背景

在 L7 中使用地图底图存在三种场景：

1. 地图底图驱动 L7。根据用户传入的地图类型参数实例化，事件监听注册在地图上。
2. L7 驱动地图底图。用户负责实例化地图，事件监听注册在 L7 上，调用地图方同步方法。
3. 不使用地图底图。事件监听注册在 L7 上。

在第一种场景中，由于地图实例化由 L7 完成，因此 L7 可以提供统一的参数接口（直接传入场景中），兼容各个地图方差异，用户在不同地图间切换时仅需要修改地图类型。
而第二种场景更适合集成 L7 进已有的地图应用，该场景下用户负责实例化地图、监听 L7 视口改变事件，调用地图方提供的 API 完成底图的同步，同步效果好坏由地图方实现效果决定。

目前 L7 仅支持第一种场景，用户通过地图类型选择使用高德或者 Mapbox，地图参数通过场景传入：

import { Scene } from '@antv/l7';

const scene = new Scene({
  type: 'mapbox', // 高德传入 amap
  style: 'light',
  center: [ 121.412224, 31.26192438 ],
  // ...省略其他地图参数
});

不难发现目前的 API 存在一个明显的问题，@antv/l7 直接依赖各个地图实现，在运行时需要根据用户传入的地图类型完成实例化，依赖全部支持地图方，无法利用 TreeShaking。

新版 API

支持以上三种使用场景，尽可能保持 API 的易用稳定，按需引用。

地图底图驱动 L7

相比目前的 API，改动有两点：

• 不同地图不能通过字符串区分（去掉 type 参数），用户选择使用 L7 提供的地图实例化方法
• 地图参数传入地图而非场景中，不同地图依然保持统一的参数

import { Scene } from '@antv/l7';
import { Mapbox, AMap, GoogleMap } from '@antv/l7-maps';

const scene = new Scene({
  map: new Mapbox({
    style: 'light',
    center: [ 121.412224, 31.26192438 ],
    // ...省略其他地图参数
  }),
  // ...省略其他场景参数 
});

由于不同地图构造函数从 @antv/l7-maps 中获取，可以进行 TreeShaking，保证选择高德的用户不会引入 Mapbox 依赖。

目前 deck.gl 也提供了这种使用方法：
https://deck.gl/#/documentation/getting-started/using-with-base-map

L7 驱动地图底图

该场景下 L7 不需要考虑地图的存在，和第三种不使用地图的场景本质上是一致的。仅需要提供视口变化回调函数，传入当前地图参数。如何使用这些参数同步地图完全由用户决定：

import { Scene } from '@antv/l7';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'pg.xx';
// 用户负责初始化地图实例
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  // ...省略其他地图参数
});

const scene = new Scene({
  // 驱动地图进行缩放、平移、旋转操作
  onMapChange: ({ lng, lat, zoom, bearing, pitch }) => {
    // Mapbox API
    map.jumpTo({
      center: [lng, lat],
      zoom,
      bearing,
      pitch,
    });
  },
  // ...省略其他场景参数 
});

用户不需要使用 @antv/l7-layers。

deck.gl 中驱动 Mapbox 的例子：
https://github.com/uber/deck.gl/blob/7.3-release/examples/get-started/pure-js/mapbox/app.js#L37-L43

不使用地图底图

并不是不使用地图参数，而是指不使用第三方地图。L7 在内部实现了基础的地图相机：

import { Scene } from '@antv/l7';
import { L7Map } from '@antv/l7-maps';

const scene = new Scene({
  map: new L7Map({
    center: [ 121.412224, 31.26192438 ],
    zoom: 15,
    // ...省略其他地图参数
  }),
  // ...省略其他场景参数 
});

deck.gl 中也提供了这种使用方式：
https://deck.gl/#/documentation/getting-started/using-standalone

非地图场景

以上讨论均基于地图场景，或者说场景都在地图坐标系下。如果考虑非地图场景使用其他坐标系，例如 graph.gl 在常规笛卡尔坐标系中渲染点、线，设置坐标系 API 还需要进一步讨论。

• L7 Version:1.3.2
• Platform: Browser Chrome @76.0.3809.132
• CodePen Link:

data 数据为json
[{ "label": "A1", "cat": "疯子", "lng": 102.5377969, "lat": 48.4715354, "to_lng": 92.59428911, "to_lat": 52.4991738,x "points": [ [121.34349799968906, 31.512055999985392], [121.3622599998125, 31.506785999770123], [121.49426699962251, 31.417845999789357], [121.52123199989882, 31.394787999681277], [121.60304099969844, 31.37265800032847], [121.72251299966202, 31.303514000016172], [121.74374799977883, 31.283202000228304], [121.80981499979465, 31.196909000060938], [121.94679500025403, 31.065888000016056], [121.97755499992343, 31.016104000118997], [121.99093300039206, 30.968427000089903], ], "value": 33, "createDate": "2019/8/15 20:12" }]
数据源配置(二级，数组，三级数组都试过)
layer.source(data,{ parser:{ type:'json', coordinates:'points' } })
代码 PolygonLayer 图形 怎么配置都无法显示。 是否必须使用geojson？
scene.PolygonLayer().source(data,{parser:{type:'json',coordinates:'points'}}) .shape('fill').color("#fff").active(true).style({opacity: 1}).render()

明白数据流转模式，也理解概念，现正在做可视化平台，集成L7地图渲染，常用json数据模式

• L7 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

npm install时报错：Appears to be a git repo or submodule.

https://stackoverflow.com/questions/27356915/how-to-update-npm-modules-ignoring-a-git-repo/40891438

我想添加一个 marker

目前项目已升级 TS 3.7-beta 版本，应用 babel 插件 @babel/plugin-proposal-optional-chaining，但 Prettier 尚未发布 1.19 版本导致 lint 出错。

ISSUE: prettier/prettier#6595

因此目前需要使用 yarn commit --no-verify 暂时跳过 lint & prettier。

• L7 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

chrome 75.0.3770.142 浏览器预览L7的样例都会报这个错误，同时示例图加载不出来

L7 Version: 2.0.beta
Platform:
Mini Showcase(like screenshots):
CodePen Link:
在scene的loaded事件中添加Layers控件报错, 代码如下,.打印layer显示mapService为undefind.请问应该如何解决,是否需要在其他事件中添加,谢谢

import {Scene, PolygonLayer} from '@antv/l7';
import {Zoom, Layers} from '@antv/l7-component';
import React, {Component} from 'react';
import {Button} from 'antd';

export default class AMap extends Component {
  componentWillUnmount() {
    this.scene.destroy();
  }

  componentDidMount() {
    const scene = new Scene({
      center: [120.19382669582967, 30.258134],
      id: 'map',
      pitch: 0,
      style: 'dark',
      type: 'mapbox',
      zoom: 3,
      token: 'pk.eyJ1IjoibWFsaW5saW4iLCJhIjoiY2pxMjRsbmsyMGR6NDQzbjJiZ2poanplbiJ9.PWThqRNZfSImQHrgIDXaPg', // 高德或者 Mapbox 的 token
    });
    fetch(
      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
    ).then(res => res.json())
    .then(data => {
      const layer = new PolygonLayer({});
      layer
      .source(data)
      .size('name', [0, 10000, 50000, 30000, 100000])
      .color('name', [
        '#2E8AE6',
        '#69D1AB',
        '#DAF291',
        '#FFD591',
        '#FF7A45',
        '#CF1D49',
      ])
      .shape('fill')
      .style({
        opacity: 0.8,
      });
      scene.addLayer(layer);
      scene.render();
      scene.on('loaded', () => {
        // 添加缩放控件
        const zoomControl = new Zoom({
          position: 'topright',
        });
        // 
        const overlayers = {
          "点图层": layer,
        };
        const layersControl = new Layers({
          overlayers
        });
        scene.addControl(layersControl);
        scene.addControl(zoomControl);
      });
    });
    this.scene = scene;
  }

  change = () => {
    const {scene} = this;
    scene.setMapStyle('mapbox://styles/mapbox/satellite-v9')
  }

  render() {
    return (
      <div
        id="map"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        }}
      >
      <Button style={{zIndex: 10000}} onClick={this.change}>切换底图</Button>
      </div>
    );
  }
}

我想问下能否离线使用，因为我们的生产环境是内网

有几个 ts 错误。

• L7 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

我在 scene.PointLayer()绘制.shape('image:local')这个图标作为地图上的点，但是绘制的时候报这个错误Failed to execute 'uniform4fv' on 'WebGLRenderingContext': No function was found that matched the signature provided。求解决。
我是在angular里实现的antv，angular 使用的是7.0
我的高德地图的版本是1.4.8
我用的antv自带的l7 v1.0.0 （我怀疑是npm中antV的L7版本太低导致的）
请解决一下 谢谢

问题

如果直接使用高德 P20 坐标系，在非**区域高缩放等级下会出现抖动问题：

解决方法

参考 deck.gl 针对墨卡托坐标系使用的偏移坐标系，我们也可以设计一个 P20 偏移坐标系，在缩放等级超过 12 时进行切换：

// l7-maps/amap
if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
  this.coordinateSystemService.setCoordinateSystem(
    CoordinateSystem.P20_OFFSET,
  );
} else {
  this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.P20);
}

偏移坐标系具体原理详见 「解决高缩放等级下的抖动问题」：

vec4 project_position(vec4 position) {
  if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET
    || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
    float X = position.x - u_ViewportCenter.x;
    float Y = position.y - u_ViewportCenter.y;
    return project_offset(vec4(X, Y, position.z, position.w));
  }
}

最终效果

我用pgis转线的geojson数据放到示例中，并没有动态效果，因为坐标中没有第三个值吗？

demo有bug
分级统计图山东那边还有个别地区鼠标经过会把热量显示取消

This issue was generated by todo based on a TODO comment in 31c98a7 when #72 was merged. cc @antvis.

https://antv.alipay.com/zh-cn/l7/1.x/demo/bubble/point_image.html

这个例子上如何给自定义的图片添加事件支持。

不加图片的时候layer是可以点击的～ 。
目前下了本地代码运行不起来。

需要在 CONTRIBUTING.md 中补充 Windows 环境下开发项目的内容。

1. 由于使用了 Yarn workspace，首先需要安装 Yarn：https://yarnpkg.com/en/docs/install#windows-stable
2. yarn install 安装依赖，完成 workspace 链接
3. 测试方案依赖 headless-gl，因此需要 node-gyp 编译本地依赖，这一步是 Windows 下出现问题最多的。
   a. 首先以管理员身份启动 PowerShell

b. 运行 npm install --global --production windows-build-tools，安装 Microsoft's windows-build-tools 。这一步会安装 Python 2.7

c. 参考，需要下载 Visual C++ Build Tools 并安装。Win7 以下安装 2013，Win10 及以上安装 2015
d. 重启

如题。

官网上的热力图例子 https://l7.antv.vision/zh/examples/heatmap/heatmap ，3d热力的效果不是很好，能否改进。

比如我只想显示 (23°N,110°E) 与 (24°N,111°E) 之间的区域，有什么方法可以设置其它区域隐藏？

L7 Version: 2.0.beta
Platform:
Mini Showcase(like screenshots):
CodePen Link:
请问采用mapbox作为底图, 能否实现底图的切换, 例如从mapbox的街道图切换至卫星图, 谢谢

http://antv.alipay.com/zh-cn/l7/1.x/demo/gallery/taxi.html

• L7 Version: 2.0.0-beta.20
• Platform: mac + Angular 6

Angular 6 以 npm 包的形式引用 2.0.0-beta.20 版本，编译后控制台输出错误。

zone.js:682 Unhandled Promise rejection: regeneratorRuntime is not defined ; Zone: ; Task: Promise.then ; Value: ReferenceError: regeneratorRuntime is not defined
at Scene.render (SceneService.js:218)
at Scene.addLayer (SceneService.js:213)
at Scene.addLayer (index.js:52)

在使用官方文档给出的示例代码测试时，新建图层报如下错误

• L7 Version:1.4.1
• Platform:MacOS 0.15.1/Chrome 78.0.3904.108/node v12.12.0/vue 2.5.2/webpack 3.6.0
• Mini Showcase(like screenshots):