mapbox cesium
Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)
在Cesium中，加载影像图层主要通过ImageryLayer、ImageryProvider和ImageryLayerCollection三个类来实现；首先我们先来认识下这三个类 # 一、ImageryLayer类 在Cesium中，使用`ImageryLayer`对象来表示一个影像图层。`Ima ......
Cesium加载geojson数据
**GeoJSON格式** GeoJSON是一种常用的基于JavaScript对象表示法（JSON）的地理数据交换格式。GeoJSON支持诸如点、线、面和多边形等地理要素的表示，并且可以和矢量数据结构相互转换。 在Cesium中，使用`Cesium.GeoJsonDataSource.load()` ......
Cesium将相机定位到指定的位置
使用`Cesium的viewer.camera.flyTo`方法将相机定位到指定的位置，并设置相机的方向和倾斜角。 ```js viewer.camera.flyTo({ //摄像机在 WGS84(世界)中的最终位置坐标或从自上而下的视图中可以看到的矩形 destination: Cesium.Ca ......
Cesium 更改默认的鼠标操作
```js // 将原来鼠标中键倾斜视图修改为鼠标右键触发 viewer.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG, ]; // 将原来鼠标右键放大缩放修改为鼠标滚轮滚 ......
Cesium结合GIS天地图 加载倾斜摄影3dtile + vue3
## 实现思路 将倾斜摄影OSGB数据转换为3dtile(转换方式很多，可以利用第三方工具cesiumlab) 利用Cesium加载GIS地图,我这里使用的是天地图，可以加载其他地图都行 加载3dtile数据到地图中展示 ## 安装插件 ``` npm install cesium ``` ## 加 ......
Vue项目初次加载cesium | 配置
1. 首先配置`CESIUM_BASE_URL`全局变量 ``` window.CESIUM_BASE_URL = import.meta.env.BASE_URL + "Cesium/"; ``` 2. 把`node_modules\cesium\Build\Cesium`这个文件夹复制到`pub ......
Cesium：四种拾取pick
##三种坐标拾取 ###viewer.scene.camera.pickEllipsoid() 拾取椭球面坐标 handler.setInputAction(function (event) { let position = viewer.scene.camera.pickEllipsoid(eve ......
Cesium：坐标系
Cesium中有两种坐标系，WGS84地理坐标系和笛卡尔空间坐标系。 WGS84地理坐标系包括：WGS84经纬度坐标系（没有实际的对象）和 WGS84弧度坐标系（Cartographic）； 笛卡尔空间坐标系包括 笛卡尔空间直角坐标系（Cartesian3）、平面坐标系（Cartesian2），4D ......
Cesium：设置加载时的初始视角
先选好位置，并调整好视角，然后按 F12 打开控制台分别输入： viewer.camera.position viewer.camera.heading viewer.camera.pitch viewer.camera.roll 来分别获取你选好的位置的坐标，视角等信息，然后利用 viewer.c ......
Cesium 点在当前视角下可见
const viewer = new Cesium.Viewer("cesiumContainer"); //1.计算屏幕坐标 let position = Cesium.Cartesian3.fromDegrees(-60, 30, 0); let chanedc = Cesium.SceneTr ......
Mapbox系列之矢量切片工具Tippecanoe安装使用 | Windows&Docker
Windows系统下安装docker步骤参考这篇文章 Windows下安装Docker详细过程及问题解决 拉取morlov/tippecanoe镜像 docker pull morlov/tippecanoe 执行以下命令，运行容器，进入交互模式 docker run --rm -it -v $HO ......
Cesium将经纬度转为屏幕坐标系并判断是否在当前视角可见
//1.计算屏幕坐标 let position = Cesium.Cartesiian3.fromDegrees(jd, wd, 0); let chanedc = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, posit ......
Cesium中的QuadtreePrimitive.js类
QuadtreePrimitive顾名思义就是四叉树Primitive的意思。已知的是它在Globe的_surface属性中有了使用。 首先来看构造函数： function QuadtreePrimitive(options) { //>>includeStart('debug', pragmas. ......
Cesium中的Globe.js
Globe顾名思义就是地球的意思吧。 先看构造函数： function Globe(ellipsoid) { ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84); var terrainProvider = new EllipsoidTerrai ......
Cesium 卷帘分析
仓库里更新了卷帘功能，简单记录一下。 卷帘功能如下图所示，将地球分为左右两块，通过中间的卷帘进行滑动，可以有效地进行左右对比，针对序列数据有良好的展示效果。 如下接口，Cesium 本身就支持我们针对地球左右两侧显示不同的图层。 故我们只需要对加载的图层设置 SplitDirection 属性就可以 ......
mapbox监视zoom的事件
在 Mapbox 中，您可以使用 map.on('zoomend', callback) 监听地图缩放结束事件，然后执行自定义的回调函数，以便在每次地图缩放结束时更新应用程序。 例如，可以在回调函数中获取当前地图的缩放级别，并执行所需的操作。以下是一些示例代码： // 创建一个 Mapbox 地图实 ......
cesium-4-属性变换和事件操作
1、属性变换 使用Cesium.CallbackProperty类，构造函数中需要两个参数 一个为调用函数， 一个为boolean，判断前面这个函数是否需要不断的调用（false即属性不固定），还是只是只调用一次（true即属性固定） 代码： ...这个extrudedHeight是创建entity ......
cesium-3-sdtiles
1、倾斜摄影 加载3dtiles代码 var tile1 = new Cesium.Cesium3DTileset({ url: "../data/lesson-015/test3dtiles/tileset.json", maximumScreenSpaceError: 1, //这个参数越大，在 ......
mapbox怎么控制地图的旋转行为
可以在 Mapbox GL JS 中使用 scrollZoom, dragRotate, touchRotate 属性来控制地图的旋转行为。 scrollZoom: 是否支持滚轮缩放，默认为 true。 dragRotate: 是否支持平移拖拽旋转地图，默认为 true。 touchRotate: ......
mapbox如何监视地图的样式更换
在 Mapbox GL JS 中，可以使用 styledata 事件监听器来监视地图的样式更换，包括更换底图、修改图层样式等操作。 当样式更换时，styledata 事件被触发，您可以使用 map.getStyle().sources 获取当前样式中所有的源，使用 map.getStyle().la ......
Mapbox Style 规范(转载)
Mapbox （ 中文官网 ）致力于打造全球最漂亮的个性化地图。 这里记录下其 Web 端 API Mapbox GL JS 的地图样式规范 Style 的各个配置项： 必填项会加上 * ，方便根据目录进行查看 1. version * version：版本号（必填，且值必须为 8） "versio ......
mapbox加载geojson报错error: Style is not done loading
Mapbox 加载 GeoJSON 地图时，遇到 error: Style is not done loading 错误通常是由于地图样式文件没有加载完成引起的。具体来说，可能是因为 Mapbox 样式文件中包含了某些需要加载的图片或者矢量图层，而这些图片或矢量图层尚未完全加载完成，导致无法渲染地图 ......
cesium-2-entity
1、四层结构 viewer --> datasources(DataSourceCollection类型) --> datasource --> entities(EntityCollection类型) --> entity 需要学习的方向是：只需要注意每个层与层之间的关系和entity实例如何创建 ......
mapbox如何调整图层层级关系
在 Mapbox GL JS 中，您可以使用 moveLayer 方法来调整图层的层级关系。其语法如下： map.moveLayer('layerID', 'beforeID'); 其中，layerID 是您要调整的图层的 ID，beforeID 是该图层所要移动到的目标图层的 ID，表示将该图层放 ......
mapbox显示隐藏图层
在 Mapbox 中，如果您想要显示或隐藏一个图层，可以使用 setLayoutProperty() 方法，通过设置该图层的 visibility 属性来实现。 setLayoutProperty() 方法可以修改地图上指定图层的样式属性。对于 visibility 属性，您可以将其设置为 'vis ......
mapbox怎么获取图层列表
要在 Mapbox 中获取图层列表，可以使用 Mapbox GL JS 库中的 getStyle() 方法获取当前地图样式的信息，其中包括所有有关的图层信息，然后通过遍历图层数组获取所有的图层名称。 下面是一个示例代码，展示如何获取 Mapbox 地图中的所有图层名称： mapboxgl.acces ......
mapbox和cesium的区别
Mapbox 和 Cesium 是两个不同的地图开发平台，它们之间有以下区别： 技术架构： Mapbox 是基于矢量地图渲染技术和 WebGL 技术开发的，支持2D和3D渲染。它提供了开发地图应用程序和可视化数据的各种 API、SDK、地图样式和图层等工具。 Cesium 是一个基于 WebGL 技 ......
cesium-1-加载影像数据和影像数据基础知识
1、影像数据的图层类有哪些 viewer --> imageryLayers（ImageryLayerCollection类型）--> ImageryLayer类型 --> ImageryProvider抽象类 viewer下有ImageryLayerCollection类型的imageryLaye ......
Cesium之Web Workers
1. 引言 多线程是编程中常用的方法，例如，在桌面程序中，主线程一般是UI线程，负责UI绘制与用户交互，而运算处理往往是交给背后的工作线程，这样可以有效避免交互时的卡顿感 浏览器是多进程的，每打开一个网页，都会开启一个渲染进程，渲染进程包含： GUI渲染线程 (有且只有一个) JS引擎线程 (有且只 ......