All-in-one package for maptalks webgl layers

Overview

@maptalks/gl-layers

maptalks webgl 图层的汇总包,包含了@maptalks命名空间下webgl基础设施和所有webgl图层插件。

使用时无需再单独安装和引入其他webgl插件,而可以统一从此包中安装引用。

包含的插件

  • @maptalks/gl
  • @maptalks/vt
  • @maptalks/gltf-layer
  • @maptalks/3dtiles

汇总包格式

包含了ESM和umd两种格式,方便不同方式的引用。

安装

npm i maptalks
npm i @maptalks/gl-layers

#or

yarn add maptalks
yarn add @maptalks/gl-layers

#or

pnpm i maptalks
pnpm i @maptalks/gl-layers

用法

import * as maptalks from 'maptalks';
import { GroupGLLayer, VectorTileLayer, GLTFMarker, GLTFLayer } from '@maptalks/gl-layers';

const map = new maptalks.Map('map', {
    center: [0, 0],
    zoom: 2
});
const vtLayer = new VectorTileLayer('vt', {
    urlTemplate: 'http://tile.maptalks.com/test/planet-single/{z}/{x}/{y}.mvt',
    spatialReference: 'preset-vt-3857'
});

const groupLayer = new GroupGLLayer('group', [vt]).addTo(map);

CDN

也可以通过CDN引用umd格式的汇总包。

<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@maptalks/gl-layers/dist/maptalks-gl-layers.js"></script>
<script type="text/javascript">
    const map = new maptalks.Map('map', {
        center: [0, 0],
        zoom: 2
    });
    const vtLayer = maptalks.VectorTileLayer('vt', {
        urlTemplate: 'http://tile.maptalks.com/test/planet-single/{z}/{x}/{y}.mvt',
        spatialReference: 'preset-vt-3857'
    });

    const groupLayer = new maptalks.GroupGLLayer('group', [vt]).addTo(map);
</script>

gl格式解码插件

如果需要引入draco,ktx2等gl格式解码插件,和以前一样,引入汇总包后,引入解码插件即可:

import { Geo3DTilesLayer, GLTFLayer } from '@maptalks/gl-layers';
// 可选的draco插件
import '@maptalks/transcoders.draco';
// 可选的crn纹理解析插件
import '@maptalks/transcoders.crn';
// 可选的ktx2纹理解析插件
import '@maptalks/transcoders.ktx2';

或者umd方式:

<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@maptalks/gl-layers/dist/maptalks-gl-layers.js"></script>
<script type="text/javascript" src="https://unpkg.com/@maptalks/transcoders.draco/dist/transcoders.draco.js"></script>
<script type="text/javascript" src="https://unpkg.com/@maptalks/transcoders.crn/dist/transcoders.crn.js"></script>
<script type="text/javascript" src="https://unpkg.com/@maptalks/transcoders.ktx2/dist/transcoders.ktx2.js"></script>
You might also like...

curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot

Jan 1, 2023

[WIP] WebGL API implementation for Deno, built on GLFW using FFI.

Note I'm no longer working on this project because I have just realized macOS does not support OpenGL ES API, and adding Desktop GL backend to this mo

Jun 11, 2022

WebGL and GLSL projects 2022 🌬

Getting Started Node version used : 16.13.1 First install dependencies with: npm install # or yarn install Then, run the development server: npm run d

Dec 23, 2022

Space Invaders in your browser with 3D WebGL. Built with BabylonJS.

Space Invaders in your browser with 3D WebGL. Built with BabylonJS.

Space Invaders A fun re-imagining of the 1978 classic by Tomohiro Nishikado and Taito. Play it here: https://spaceinvaders.viperfish.com.au Play in th

Dec 26, 2022

This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page.

Linear Vaporwave Three.js scene This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page. Demo Head over

Dec 28, 2022

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a

Jan 7, 2023

How to use socket.io in Unity WebGL

Setup Socket Client for Unity WebGL This is simply a guide with some code samples to get you started and is NOT a Unity package/plugin that you can im

Mar 14, 2023

Zenload - "Load couple loaders and apply transform one-by-one

Zenload Load couple loaders and apply transforms one-by-one. Install npm i zenload -g How to use? With env vairable ZENLOAD: NODE_OPTIONS='"--loader

Jan 25, 2022

⛺️ Tipi is a homeserver for everyone! One command setup, one click installs for your favorites self-hosted apps. ✨

⛺️ Tipi is a homeserver for everyone! One command setup, one click installs for your favorites self-hosted apps. ✨

⛺️ Tipi — A personal homeserver for everyone ⚠️ Tipi is still at an early stage of development and issues are to be expected. Feel free to open an iss

Jan 4, 2023
Releases(v0.17.0)
  • v0.17.0(Dec 21, 2022)

    @maptalks/gl


    • 优化可视域分析的精度
    • 采用log depth改善深度检测的精度
    • 三维分析增加对透明度的支持, maptalks/issues#136
    • 避免重复调用transcoder插件造成的内存问题,maptalks/issues#170
    • 解决phong光照模型中的透明度
    • phong光照中ambientStrength改为environmentExposure
    • GroupGLLayer中只有定义了geometryEvents的图层才参与事件循环,maptalks/issues#203
    • 默认关闭taa抗锯齿
    • 升级fusion.gl和gltf-loader

    @maptalks/3dtiles


    • 解决i3dm中node.translation/scale/rotation的读取,maptalks/issues#168
    • b3dm模型增加透明度的支持,在service中用opacity(0-1)来控制
    • 解决node的matrices stack顺序,解决b3dm模型中有多children时的散架问题 maptalks/issues#164
    • 从service中移除了ambientLight参数,增加了environmentExposure来调节模型亮度
    • 增加对KHR_materials_unlit的支持
    • 默认的shader改为pbr

    @maptalks/vt


    • sceneConfig中增加minZoom和maxZoom支持, maptalks/issues#190
    • GLTF插件中增加Y轴到Z轴的转换,maptalks/issues#187
    • GLTF和native-point插件增加vertex placement的支持
    • icon插件dataConfig增加altitudeProperty支持
    • 所有插件dataConfig增加altitudeOffset支持
    • 解决icon透明度与其他图层不符的的问题,maptalks/issues#185
    • icon的最大尺寸改为2048,解决一些图标变形失真的问题,maptalks/issues#184
    • 解决线高亮的bug,maptalks/issues#183
    • PointLayer中尊重sceneConfig的默认值,maptalks/issues#182
    • VectorTileLayer.highlight方法增加对filter的支持,maptalks/issues#181
    • 关闭英特尔显卡文字渲染的workaround,maptalks/issues#175
    • 解决PointLayer上图层操作的若干bug,maptalks/issues#180, maptalks/issues#178
    • gltf插件改为存储相对instance center的相对坐标,解决某些情况下精度不够导致的模型变形的问题
    • 升级feature-filter到1.3.0版
    Source code(tar.gz)
    Source code(zip)
  • v0.16.0(Nov 2, 2022)

    @maptalks/gl

    • 增加对GLTF的khr_texture_transform扩展的支持
    • 解决雾,雨,雪的显示bug
    • 增加了 MaskLayerMixin,方便在其他图层中实现三维setMask功能
    • 解决highlight中设置visible后,无法恢复的bug
    • TerrainLayer中增加queryTerrain和queryTerrainByProjCoord方法,以及自动更新map中心点海拔的逻辑

    @maptalks/3dtiles

    • 解决b3dm中包含khr_texture_transform时的纹理绘制bug

    @maptalks/gl

    • Add support for GLTF's khr_texture_transform extension
    • Solve the display bug of fog, rain and snow.
    • Add MaskLayerMixin to facilitate the 3D setMask function in other layers.
    • Solve the bug that cannot be restored after setting visible in highlight.
    • Add queryTerrain and queryTerrainByProjCoord methods in TerrainLayer, and the logic of automatically updating map centroid elevation.

    @maptalks/3dtiles

    • Fix the texture drawing bug when b3dm contains khr_texture_transform
    Source code(tar.gz)
    Source code(zip)
  • v0.15.2(Oct 27, 2022)

  • v0.15.1(Oct 25, 2022)

  • v0.15.0(Oct 25, 2022)

    @maptalks/gl

    • GroupGLLayer限制为默认全局只能添加一个(否则需要设置options.single=false)
    • 解决TerrainLayer options包含函数时报错的bug
    • highlight功能增加显示或隐藏mesh的功能

    @maptalks/3dtiles

    • 增加 Geo3DTilesLayer.highlight 功能,当模型支持batchTable时,能高亮,开启泛光或显示隐藏对应batchId的构件
        map.on('click', e => {
            const hits = layer.identify(e.coordinate);
            if (hits.length) {
                layer.highlight({
                    id: hits[0].data.batchId,
                    color: '#f00',
                    opacity: 0.7,
                    // visible: false
                    // bloom: 1
                });    
            }
            
            console.log(hits);
        });
    

    @maptalks/vt

    • vt增加三维空间分析的支持
    • 解决用expression表达式定义placement时,碰撞检测未正常开启的bug
    • 解决markerRotation和textRotation的错误方向,maptalks/issues#151
    • 解决VectorTileLayer.options.fetchOptions的支持,maptalks/issues#157
    • line的blend src默认改为one,解决地图与容器的混色问题

    @maptalks/gl

    • GroupGLLayer is restricted to add only one globally by default (otherwise you need to set options.single=false)
    • Solve the bug when TerrainLayer options contains function parameter.
    • highlight function adds the ability to show or hide the mesh

    @maptalks/3dtiles

    • Add Geo3DTilesLayer.highlight function, when the model supports batchTable, it can highlight, turn on bloom or show/hide parts with given batchId
        map.on('click', e => {
            const hits = layer.identify(e.coordinate);
            if (hits.length) {
                layer.highlight({
                    id: hits[0].data.batchId,
                    color: '#f00',
                    // visible: false
                    // bloom: 1
                });    
            }
            
            console.log(hits);
        });
    

    @maptalks/vt

    • vt add support for 3d spatial analysis
    • Solve the bug that collision detection is not enabled properly when defining placement with expression
    • Resolve wrong orientation of markerRotation and textRotation, maptalks/issues#151
    • Resolve VectorTileLayer.options.fetchOptions support, maptalks/issues#157
    • line's blend src default changed to one, resolve map and container blending issue
    Source code(tar.gz)
    Source code(zip)
  • v0.14.0(Oct 14, 2022)

    @maptalks/vt

    • 解决3d-extrusion渲染插件的生成的侧面纹理的位置问题
    • 3d-extrusion渲染插件dataConfig中增加textureYOrigin设置,可选的值有bottom或top(默认),用于设置侧面纹理对齐顶部还是对齐底部

    @maptalks/gl

    • 解决phong着色器里的color0 bug
    • 修正地形因为精度不够在高级别上的抖动问题
    • mapbox类型地形数据不再自动添加accessToken参数,可以在terrain设置中用requireSkuToken控制是否自动添加sku token(默认开启), maptalks/issues#150

    @maptalks/3dtiles

    • 解决 box boundingVolume 是否在camera frustum的判定bug
    • 不再绘制error过大的mesh
    • 解决模型color0属性的解析,maptalks/issues#152
    • 解决gltf中node矩阵的顺序bug
    Source code(tar.gz)
    Source code(zip)
  • v0.13.0(Oct 2, 2022)

    本版本只支持maptalks核心库 1.0.0-rc.12 及以上版本

    @maptalks/gl

    • GroupGLLayer增加地形支持,目前只支持mapbox地形(terrain格式与天地图格式在下个版本中添加),设置地形方法如下:
         const skinLayers = [
                new maptalks.TileLayer('base', {
                    maxAvailableZoom : 20,
                    spatialReference: {
                      projection: 'EPSG:3857'
                    },
                    urlTemplate: 'https://khms{s}.googleapis.com/kh?v=923&hl=en&x={x}&y={y}&z={z}',
                    subdomains: ['1','2','3']
                  })
            ];
         const terrain = {
               type: 'mapbox',
                tileSize: 512,
                spatialReference: 'preset-vt-3857',
                requireSkuToken: true, //可选的,是否生成sku token,会自动在url参数后增加一个sku参数,访问mapbox官方数据源时必须提供
                urlTemplate: 'https://{s}.tiles.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=[your token]',
                subdomains:['a', 'b', 'c', 'd']
            };
           const group = new maptalks.GroupGLLayer('group', skinLayers, {
                terrain
            });
    
    • 解决 text 和 icon 的highlight绘制问题
    • FBORayPicking中返回坐标与海拔高度
    • 解决一个blitFBO的resize bug
    • 增加terrain相关的单元测试

    @maptalks/vt

    • 解决worker缓存导致的异常内存占用
    • VectorTileLayer.options.features 默认设为false,该设置只影响identify是否能返回feature数据
    • 提升关闭features时,大数据量瓦片的传输性能与内存效率
    • 解决隐藏的图层仍然可以identify的bug, maptalks/issues#129
    • identify返回的feature统一为GeoJSON规范对象,maptalks/issues#101
    • 解决PointLayer的marker大小无法超过255的问题,maptalks/issues#95
    • markerPlacement和textPlacement增加vertex-first和vertex-last的支持,maptalks/issues#107
    • 在identify结果的coordinate属性中返回经纬度与海拔高度,maptalks/issues#105
    • VectorTileLayer上增加options.debugTileData设置,方便调试瓦片数据,maptalks/issues#121
    • 解决大量marker绘制时边缘的漏光现象
    • icon的blendSrc改为默认为1
    • 默认关闭icon和text的碰撞检测
    • feature-filter升级,function-type中增加 contains 函数的支持,maptalks/issues#111
    • tube插件的样式中增加emissiveFactor属性

    @maptalks/3dtiles

    • Geo3DTilesLayer增加 showService 与 hideService方法,用于显示与隐藏指定的3dtiles tileset
    • identify方法返回坐标与海拔高度

    @maptalks/gltf

    • 解决MultiGLTFMarker的抖动问题, maptalks/issues#24
    • GLTF模型增加以米为内部坐标系单位的支持
    Source code(tar.gz)
    Source code(zip)
  • v0.12.4(Aug 15, 2022)

    @maptalks/gl

    Fixes

    • 因为shader缓存会导致依赖上下文的regl动态值出错,删去Shader缓存
    • Because shader cache will lead to wrong value in regl's dynamic variable, remove shader cache

    @maptalks/vt

    Fixes

    • 开启tile stencil时,将绘制过的stencil值设为0,解决数据重叠时的z-fighting
    • When enabling tile stencil, set fragment's stencil to 0 to solve overlapping feature's z-fighting
    Source code(tar.gz)
    Source code(zip)
  • v0.12.3(Aug 15, 2022)

    @maptalks/analysis

    • 解决CutAnalysis中的一个bug
    • Fix a bug in CutAnalysis
    • 解决存在多个Analysis,disable其中一个时的报错
    • Fix error when disabling a analysis when there are two or more analysises
    Source code(tar.gz)
    Source code(zip)
  • v0.12.2(Aug 15, 2022)

    @maptalks/vt

    Fixes

    • 解决从PointLayer删除Marker时的一个空指针异常,maptalks/issues#113
    • Fix a null pointer when removing a marker from PointLayer, maptalks/issues#113
    • customProperties在同一个Feature上被定义多次时,复制该Feature
    • clone Features when customProperties is set to one feature for multiple times
    • 生成icon纹理时,尊重icon图片本身的宽度和高度,maptalks/issues#106
    • respect icon image's own width and height when generating icon textures, maptalks/issues#106
    Source code(tar.gz)
    Source code(zip)
  • v0.12.1(Aug 15, 2022)

    @maptalks/vt

    Fixes

    • 解决VectorTileLayer的lit插件对dataConfig.defaultHeight的解析
    • Fix VectorTileLayer's lit render plugin's parsing of dataConfig.defaultHeight
    • 解决geojson数据坐标不合法时,LineStringLayer无法绘制的问题
    • Throw error when geojson's coordinates is not valid
    Source code(tar.gz)
    Source code(zip)
  • v0.12.0(Aug 9, 2022)

    @maptalks/vt

    Features

    • VectorTileLayer增加了Feature高亮功能,例子程序:
    • add feature highlighting to VectorTileLayer, example:
    // id is Feature.id
    layer.highlight([{ id: 0, color: '#f00', opacity: 0.7, bloom: 1}]);
    // cancel Feature's highlight
    layer.cancelHighlight([0]);
    // cancel all highlights
    layer.cancelAllHighlight();
    

    Fixes

    • 解决VectorTileLayer上icon图片模糊的问题

    • Fix blurry icon image on VectorTIleLayer

    • 解决缩放时,文字会突然出现挤作一团的问题

    • Fix crowed texts when zooming

    @maptalks/gl

    Features

    • 增加了限高分析
    • Add height limit analysis

    Fixes

    • 解决页面存在不同map时,shader缓存的报错
    • Fix shader cache's bug when there are multiple map instances on page
    Source code(tar.gz)
    Source code(zip)
  • v0.11.1(Aug 3, 2022)

    @maptalks/gl

    Features

    • 增加Shader缓存,提升矢量瓦片等频繁创建shader的图层性能
    • Add shader cache, improve performance of layers that creates shaders frequently, e.g. VectorTileLayer
    Source code(tar.gz)
    Source code(zip)
  • v0.11.0(Aug 3, 2022)

    @maptalks/vt

    Features

    • 简化了style和symbol的更新方法,去掉了updateSymbolByName, updateRenderStyleByName等
    • Simpler layer style update methods, remove updateSymbolByName, updateRenderStyleByName methods
    • 实现调用VectorTileLayer setStyle方法后,地图无刷新应用新样式
    • Implement seamless style updating when calling VectorTileLayer.seStyle

    FIxes

    • 解决mergeOnProperty值为expression的bug
    • Fix expression value on symbol.mergeOnProperty
    Source code(tar.gz)
    Source code(zip)
  • v0.10.7(Aug 1, 2022)

  • v0.10.6(Aug 1, 2022)

Owner
Fu Zhen
Fu Zhen
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This Photoshop script exports all top-level layers and groups to cropped PNG and JPEG files and creates a file usable in Tumult Hype 4 based on your Photoshop document.

Export To Hype (Photoshop Edition) This Photoshop script exports all top-level layers and groups to cropped PNG and JPEG files and creates a file usab

Max Ziebell 6 Nov 9, 2022
Download all Moodle files with one click. This is a Chrome extension built to save time and effort from downloading files manually one by one!

Moodle Downloader Extension Moodle downloader extension for Chrome. The extension is tested with both the TUM moodle and the official moodle demo. Not

Zhongpin Wang 8 Nov 15, 2022
A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

Welcome to the Generative GIF Engine v2.0.4 ?? [8 minute read] This python and node app generates layered-based gifs to create NFT gif art! It is fast

Jalagar 112 Jan 2, 2023
A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

Welcome to the Generative Animated Engine v3.0.1 ?? [8 minute read] This repo used to be called jalagar/Generative_Gif_Engine but because it now suppo

Jalagar 47 May 24, 2022
Package fetcher is a bot messenger which gather npm packages by uploading either a json file (package.json) or a picture representing package.json. To continue...

package-fetcher Ce projet contient un boilerplate pour un bot messenger et l'executable Windows ngrok qui va permettre de créer un tunnel https pour c

AILI Fida Aliotti Christino 2 Mar 29, 2022
A devtool improve your pakage manager use experience no more care about what package manager is this repo use; one line, try all.

pi A devtool improve your pakage manager use experience no more care about what package manager is this repo use; one line, try all. Stargazers over t

tick 11 Nov 1, 2022
All-in-one solution for configuring ESLint in all of your projects

✨ All-in-one solution for configuring ESLint in all of your projects ✨ ⚠️ May not work in your project. This is related to eslint module resolution pr

Eslint Kit 53 Nov 28, 2022
Unlocks all brainly answers and bypasses one answer per day limit. Gives infinite free answers & unlocks all textbooks 🔐 ∞

Brainly-LockPick ?? Unlocks all brainly answers and bypasses one answer per day limit. Gives infinite free answers & unlocks textbooks ?? ∞ Note: refr

null 7 Dec 9, 2022