antvis / l7 Goto Github PK
View Code? Open in Web Editor NEW🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.
Home Page: https://l7.antv.antgroup.com
License: MIT License
🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.
Home Page: https://l7.antv.antgroup.com
License: MIT License
我在 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版本太低导致的)
请解决一下 谢谢
在 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>)
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数据模式
点亮城市例子中,建筑物的动画如何进行精细化控制(时间,层数)?建筑物放大到一定程度,出现了过多的窗户,如何控制到一定显示比例以后,不在绘制新的窗户。谢谢
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)
demo有bug
分级统计图山东那边还有个别地区鼠标经过会把热量显示取消
用户在使用 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.
需要考虑以下场景及注意事项:
在具体实现上,和 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',
},
],
},
},
};
通过 configService
引用,作为一个全局服务在全局容器中完成绑定。
同一类 Layer 只需要注册一个校验器:
registerLayerConfigSchemaValidator(layerName: string, schema: object): void;
validateLayerConfig(layerName: string, data: object): { valid: boolean; errorText: string; };
主要考虑自定义场景下的使用方法,内置实现使用方法几乎一致。
Layer 子类(用户自定义 Layer 一样)可以通过重载 getConfigSchema()
方法定义自身的特有属性。例如 PolygonLayer
需要定义透明度:
protected getConfigSchema() {
return {
properties: {
opacity: {
type: 'number',
minimum: 0,
maximum: 1,
},
},
};
}
待补充自定义 Layer 插件、后处理效果 使用方法。
官网上的热力图例子 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:
在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>
);
}
}
简单看了一下示例和代码,目前是通过请求json(geojson)数据然后进行可视化渲染的。
这种方式可能无法做到真正的“大数据”,因为大量的数据如果通过http的单个请求,可能会超过10M或者更大。
如果能够支持原生MVT数据标准的大数据可视化,可视化的内容可以配置property字段,就可以做到分层级的大数据可视化了。
希望考虑。感谢!
需要在 CONTRIBUTING.md
中补充 Windows 环境下开发项目的内容。
yarn install
安装依赖,完成 workspace 链接node-gyp
编译本地依赖,这一步是 Windows 下出现问题最多的。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. 重启
我使用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 Version: 2.0.beta
Platform:
Mini Showcase(like screenshots):
CodePen Link:
请问采用mapbox作为底图, 能否实现底图的切换, 例如从mapbox的街道图切换至卫星图, 谢谢
如果直接使用高德 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));
}
}
在线复现 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
Platform:
MacOS
无法响应点击,重复刷新返回崩溃页面。
在 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,改动有两点:
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 不需要考虑地图的存在,和第三种不使用地图的场景本质上是一致的。仅需要提供视口变化回调函数,传入当前地图参数。如何使用这些参数同步地图完全由用户决定:
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 还需要进一步讨论。
目前项目已升级 TS 3.7-beta 版本,应用 babel 插件 @babel/plugin-proposal-optional-chaining
,但 Prettier 尚未发布 1.19 版本导致 lint 出错。
ISSUE: prettier/prettier#6595
因此目前需要使用 yarn commit --no-verify
暂时跳过 lint & prettier。
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
我想问下能否离线使用,因为我们的生产环境是内网
https://antv.alipay.com/zh-cn/l7/1.x/demo/bubble/point_image.html
这个例子上如何给自定义的图片添加事件支持。
不加图片的时候layer是可以点击的~ 。
目前下了本地代码运行不起来。
版本:1.3.4,webpack+react构建
报错:
链接地址:https://www.guozhenqiang.top/dist/#/
是否有考虑抽离核心渲染器,支持各个地图类库的 CanvasLayer?目前如果直接创建 dom 元素的方式会直接覆盖掉原始地图图层,我看到 next 分支相关的新架构貌似目前还没有计划抽离这一块。
我想添加一个 marker
如题。
我用pgis转线的geojson数据放到示例中,并没有动态效果,因为坐标中没有第三个值吗?
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方法报错。
点数据支持数据聚合
可以通过Source设置聚合配置项
source(data,{
cluster: {
radius: 40, // 聚合半径
maxZoom: 20, // 聚合最大缩放等级
field: 'count', // 聚合字段
method: 'sum', // 聚合方法 支持通用方法回调函数
}
})
layer 渲染层根据缩放,平移获取新的聚合数据渲染
请问现在L7有正式版了吗?试用修改了几个在线的例子,发现文档不太好用。Scene方法中的getLayers()和getLayers到底有什么区别,用removeLayer方法移除getLayers()获取的Layer图层没有移除掉。目前也没有类似clear的方法。
比起G2,我可以把L7放入自己的项目中吗?还是还能当玩具玩玩,等正式版发布?
一个元素时不能响应事件
circle()
固定为30是否合理?是不是应该允许用户自定义?
<script src="../build/l7.js"></script>
$.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,能否提供一个简单的例子?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.