kikitte / mvtimageryprovider Goto Github PK
View Code? Open in Web Editor NEWA Mapbox style renderer for CesiumJS
License: MIT License
A Mapbox style renderer for CesiumJS
License: MIT License
1、MVTImageryProvider能在cesium中渲染矢量图的原理是将矢量数据通过MVTImageryProvider转换为栅格图,通过cesium的方法添加到地图展示,cesium最终加载的是栅格图.
2、我们项目中未来会做符号化相关的内容,所以我有一个关心点: 符号化相关的东西,比如绘制图形,添加符号等,这都是cesium 的api来实现,和MVTImageryProvider是无关的。
3、MVTImageryProvider不涉及符号化,且不会影响符号化相关的实现,从您的源码来看,也并不有提供其他数据操作的Api,其只是瓦片的展示。
以上我的描述是否正确,谢谢。
能否将mapbox更换成maplibre,mapbox的开源协议有限制。哦,好像得向Mapbox-vector-tiles-basic-js-renderer提问。
在使用时发现不能正常显示中文标注,不知是否配置正确。可以显示数字、英文,但是不显示中文字符,矢量瓦片服务互联网可以访问,配置如下
var style = {
version: 8,
name: "Light",
center: [106.387482, 29.787025, 17],
zoom: 0,
bearing: 0,
pitch: 0,
sources: {
layer_source: {
// scheme: "tms",
tiles: [
"http://zhsq.digitalcq.com/d2cpro/tileservice/dt_65poi_2sources_xianmian/{z}/{x}/{y}.mvt",
],
type: "vector",
},
},
glyphs: "http://zhsq.digitalcq.com/d2cpro/oms/static/fonts/font_1514359479/{fontstack}/{range}.pbf",
layers: [
{
id: "填充",
type: "fill",
source: "layer_source",
"source-layer": "dbsj_fwjz_csjz_jzjz_py",
minzoom: 0,
maxzoom: 18,
paint: {
"fill-color": "#66CCFF",
"fill-opacity": 0.7
},
},
{
"id": "注记",
"type": "symbol",
"minzoom": 0,
"source": "layer_source",
"source-layer": "dbsj_fwjz_csjz_jzjz_py",
"layout": {
"text-font": ["Open Sans Regular"],
"text-field": "{jzwmc}",
"text-max-width": 8,
"text-size": 12,
"text-allow-overlap": true
},
"paint": {
"text-color": "#ff0000",
"text-halo-width": 1,
"text-halo-color": "rgba(255,255,255,0.5)"
}
}
],
};
场景位置:
cesiumViewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(106.54, 29.59, 2000.0),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: 0.0
}
});
结果如截图,麻烦指教
您好,您的代码中mapbox-gl.js脚本库经过压缩了,调试和阅读源码比较困难。但是由于不熟悉mapbox,我没有找到未压缩的mapbox-gl.js,向您请教方法,期待您的回复。
根据addImageryProvider来添加图层,顺利上球
但是用visibility来控制图层显隐时,有时候隐藏图层后,cesium的球上还会有隐藏的图层的部分。
请问有什么比较好的解决方案吗?
你好!在如下的应用场景中,我需要对基于该插件的矢量图层渲染进行更新:
1、选中后,对选中的矢量图片进行高亮显示;
2、基于对style的表达式,在完成加载后,根据上下文环境更改style,并同步刷新矢量图层的样式。
但是,基于该插件所依赖的 Mapbox-vector-tiles-basic-js-renderer ,我无法使用 renderer.drawLayers(canvas, layers);renderer.render(); renderer.updateStyle(currentStyle); 等方法刷新图层渲染。
我需要怎样才能根据显示样式的变化重新渲染图层样式?
用了大神的这个Provider处理矢量瓦片,能满足我的要求,但是在使用中发现,部分样式不支持,应该是版本不够新,比如:layout.text-radial-offset 这个样式就不支持,另外还有“line-center”样式也不支持。能不能麻烦大神升级下?谢谢!
openmaptiles.org的数据源,注记为英文时可以正常显示,把text-field改为{name:zh}则全部无法显示,求助
requestTransformFn这是什么意思,有什么作用
您好,使用后发现以下问题:
图层显示顺序应根据style里的layers数组的顺序进行显示,组数index为0的图层显示在最下面,经测试symbol类型的图层无法显示在fill类型的图层下面,但是可以显示在line类型的图层下面,请问该问题如何解决,望回复!
can it provide fill-extrusion style?
我调用pickFeatures()想获取鼠标点击的元素的矢量信息,用于后期的操作,比如更换颜色。从我阅读源码猜测是用这个方法。
用cesium的api获取需取该方法需要的参数,如下:
function getApproximateZoomLevel() {
var cameraHeight = state.mapInstance.viewer.camera.positionCartographic.height;
var approximateZoomLevel = Math.log2(591657550.500000 / cameraHeight);
console.log('Approximate Zoom Level: ', approximateZoomLevel);
return approximateZoomLevel
}
state.mapInstance.viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
var cartesian = state.mapInstance.viewer.camera.pickEllipsoid(movement.position, state.mapInstance.viewer.scene.globe.ellipsoid);
if (cartesian) {
var cartographic = Cartographic.fromCartesian(cartesian);
var longitude = Math.toDegrees(cartographic.longitude);
var latitude = Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
console.log('Clicked XYZ: ', cartesian);
console.log('Clicked Longitude: ', longitude);
console.log('Clicked Latitude: ', latitude);
console.log('Clicked Height: ', height);
const info = state.pbfProvider.pickFeatures(cartesian?.x, cartesian?.y, getApproximateZoomLevel(), longitude, latitude);
console.log(info)
}
}, ScreenSpaceEventType.LEFT_CLICK);
但是这个方法总是返回Promise rejected,我想请问的是,我调用该方法传入的参数是否正确?对于这个报错我现在找不到问题的所在,请您帮我看下应该怎么处理。
请问mvtimageryprovider怎么添加请求头headers 中认证信息?
代码如下:
const provider = new MVTImageryProvider({
style: 'http://172.16.20.50:7010/sj_vector/v6/api/dataservice/10038.json?ak=mf72ff9295c740ec0f37e61433e8a3ad8d',
});
provider.readyPromise.then((res) => {
state.mapInstance.viewer.imageryLayers.addImageryProvider(provider as unknown as ImageryProvider);
state.mapInstance.cameraFlyTo({
lon: 107.31373900349, lat: 22.111544365839, height: 30000
})
});
示例的ceisum是1.63.1 在最新版本的ceisum中会没有任何的提示也不显示
How do you compile mapbox-gl.js, I cloned https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer and compiled it with webpack, but an error was reported, mapbox-gl.js under the dist directory of the source code Is also an error
provider.js:27 Uncaught (in promise) TypeError: f.coveringTiles is not a function
at Object.t.exports [as background] (provider.js:27)
at e.value (provider.js:23)
at e.value (provider.js:27)
at e.value (provider.js:23)
at e (provider.js:27)
at h (provider.js:27)
at provider.js:27
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.