Save
Saving
  • 瞿一航

    在 Altizure 官网,您可以下载“专业模型”,并且使用“Altizure桌面端”,转换成多种三维数据格式。本篇教程将引导您如何将altizure专业模型转换成3dtiles格式,然后在cesium中做初步的展示。

    数据格式转换

    首先打开altizure桌面端,设置输入路径(下载好的实景三维数据位置),输出路径,然后点击ok开始转换。
    1bf11d49-b4ff-43b0-bb69-1402b3ecb5e7-image.png
    转换完成的3dtiles,可以直接在cesium调用:
    09d16165-3ee4-45f7-861b-212d407e54c9-image.png

    创建cesium项目,加载模型

    cesium调用3dtiles基本步骤:

    • 初始化viewer
    • 加载3dtiles(配置tileset.json路径)
    • 加载完成,视角移动到模型区域范围内
    • 如果模型出现y-z轴反转的情况,应用模型旋转

    这里有一份最基本的cesium加载3dtiles案例,引用cesium 1.62版本。下载解压后,将3dtiles所在文件夹复制到案例根目录,修改tileset.json路径,即可托管服务演示:https://pan.baidu.com/s/1GaVzzVmcVxn9Bd-h6pAq-A
    最基本的加载demo代码:

    <body>
      <div id="cesiumContainer"></div>
      <script>
        // initialize the viewer
        var viewer = new Cesium.Viewer('cesiumContainer', {
          shadows: false
        });
    
        // let the model not occluded by terrain
        viewer.scene.globe.depthTestAgainstTerrain = false;
    
        // load 3dtiles
        var tileset = new Cesium.Cesium3DTileset({
          url: './cyt_3dtiles_3/tileset.json'
        });
    
        // after loaded, zoom to the model extent
        tileset.readyPromise.then(function (tileset) {
          viewer.scene.primitives.add(tileset);
    
          viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
        }).otherwise(function (error) {
          console.log(error);
        });
    
    
      </script>
    </body>
    

    关于模型旋转,由于cesium内部模型矩阵是相对地球球心的,因此需要经过 平移模型到球心->旋转模型->平移回到原来位置 这样的步骤。
    绕X轴旋转模型90度代码:

          // rotate the model if necessary
          var rootTransform = tileset._root.transform;
          var rootTransformInv = Cesium.Matrix4.inverse(rootTransform, new Cesium.Matrix4());
          // write x, y, z rotate degrees here
          var rotateMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(90)))
          var modelMatrix = new Cesium.Matrix4()
          Cesium.Matrix4.multiply(rootTransform, rotateMatrix, modelMatrix)
          Cesium.Matrix4.multiply(modelMatrix, rootTransformInv, modelMatrix)
          tileset.modelMatrix = modelMatrix
    

    注意这段代码需要写在 tileset.readyPromise.then 里面。如果需要旋转其他角度,修改 Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(90)) 即可。

    cesium调用altizure模型:
    bc3d0334-4dfe-4dae-a9ba-c44dde2b6ced-image.png
    模型旋转后的效果:
    d590b63b-5796-4120-8f06-8b8c7301975f-image.png

    托管/发布cesium应用

    到这里,关于开发的部分已经讲述完成了。开发完成的cesium项目,还需要托管到服务器或者发布本地服务,才可以浏览我们开发出来的成果。
    经过测试,我们发现cesium在某些方法下不能正常发布,如(python -m SimpleHTTPServer)。验证后发现通过nginx或者iis托管cesium项目,用户是可以正常访问的。托管cesium的服务只需要基本的静态文件托管即可。

    posted in 网站使用 read more
  • 瞿一航

    Altizure星球导入KML教程

    Altizure星球现支持导入kml文件,批量绘制星球几何标注。在星球编辑界面,点击下方工具条 - 导入按钮,可将kml文件导入星球,以三维实体的形式呈现。
    目前支持5种画笔几何体的导入:

    • 标签
    • 光柱
    • 折线
    • 多面体
    • 管道

    对应的kml中的点、线、面要素。
    KML数据导入流程和shp大致相类似。可参照Altizure星球导入SHP教程

    文件类型对应

    星球几何体类型 KML 要素类别
    标签 (Annotation) 点要素 (Point)
    光柱 (Lightbeam) 点要素 (Point)
    折线 (Polyline) 线要素 (Polyline)
    多面体 (Polygon) 面要素 (Polygon)
    管道 (Polytube) 线要素 (Polyline)

    导入文件注意点:

    • 请上传.kml为后缀的文件;
    • kml字段名称与星球属性存在映射关系,应参照下文对应关系表。

    示范案例

    现有一份广州市内行动轨迹图,轨迹图中包含点和线要素,在QGIS中打开如图所示。我们希望将KML内的标注点和轨迹线导入星球。
    广州市内行动轨迹图.png

    将KML数据上传至星球
    kml导入.png

    上传完成,可以编辑KML数据属性与星球样式配置属性之间的对应关系。
    此处为关键步骤,通过字段匹配,可以通过原先的KML属性批量设置星球实体的样式,如:颜色、透明度、标签高度、多面体高度等。(具体可参照下文“属性对应关系表”)
    系统会预先将名称相同或相近的字段对应上。
    kml属性匹配.png
    导入的KML数据正在和星球后台同步:
    导入的KML数据正在和星球后台同步.png

    导入效果:
    导入结果.png

    样例数据

    样例数据下载地址:
    链接:https://pan.baidu.com/s/1WAcaisxJCPlYkKMtQ6FmqQ
    提取码:jlaa

    属性对应关系表

    星球中几何标注的类型、高度、样式等信息,可以通过设置和编辑kml文件属性表中的对应字段值来控制。如果不设置相应字段,星球会按照默认样式来绘制标注。

    标签

    标签对应kml中的点要素文件(point)

    字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 标签都填写annotation
    name Text(string) 名称 名称,如 new annotation
    visible integer 整体可见性 1代表可见,0代表隐藏
    icon Text(string) 标签图标 图标的英文名称,可以切换到星球英文版查看每种图标对应的英文名
    textColor Text(string) 标签颜色 标签的文字颜色,格式类似#FFFFFF
    pinLength Decimal number (real) 标注高度 如 23.60
    textAlign Text(string) 文字位置 center, left, right
    descriptio Text(string) 简介

    光柱

    标签对应kml中的点要素文件(point)

    kml中字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 光柱都填写lightbeam
    name Text(string) 名称 名称,如 new lightbeam
    visible integer 整体可见性 1代表可见,0代表隐藏
    labelsVisi integer 标签可见性 1代表可见,0代表隐藏
    textColor Text(string) 标签颜色 标签的文字颜色,格式类似#FFFFFF
    color Text(string) 形状颜色 整体形状的颜色,格式类似#FFFFFF
    radius Decimal number (real) 半径 如 5
    height Decimal number (real) 高度 如 40
    pinLength Decimal number (real) 标注高度 如 23.60
    opacity Decimal number (real) 透明度 0~1之间的浮点数
    textAlign Text(string) 文字位置 center, left, right
    descriptio Text(string) 简介

    折线

    折线对应kml中的多段线要素文件(polyline)

    kml中字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 折线都填写polyline
    name Text(string) 名称 名称,如 new polyline
    visible integer 整体可见性 1代表可见,0代表隐藏
    labelsVisi integer 标签可见性 1代表可见,0代表隐藏
    texture Text(string) 贴图 围墙:fence,箭头:arrow
    animation Text(string) 动画 水平流动:horizontal,垂直流动:vertical,无:none
    icon Text(string) 标签图标 图标的英文名称,可以切换到星球英文版查看每种图标对应的英文名
    textColor Text(string) 形状颜色 标签的文字颜色,格式类似#FFFFFF
    color Text(string) 形状颜色 整体形状的颜色,格式类似#FFFFFF
    pinLength Decimal number (real) 标注高度 如 23.60
    lineWidth Decimal number (real) 线段粗细 如 0.60
    fenceHeigh Decimal number (real) 围墙高度 如 7.60
    opacity Decimal number (real) 透明度 0~1之间的浮点数
    textAlign Text(string) 文字位置 center, left, right
    descriptio Text(string) 简介

    多面体

    多面体对应kml中的面要素文件(polygon)

    kml中字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 多面体都填写polygon
    name Text(string) 名称 名称,如 new volume
    visible integer 整体可见性 1代表可见,0代表隐藏
    labelsVisi integer 标签可见性 1代表可见,0代表隐藏
    color Text(string) 图形颜色 整体图形的颜色,格式类似#FFFFFF
    hasTopCove integer 顶盖可见性 1代表可见,0代表隐藏
    hasBottomC integer 底面可见性 1代表可见,0代表隐藏
    top Decimal number (real) 顶盖高度 如 40
    bottom Decimal number (real) 底面高度 如 5
    pinLength Decimal number (real) 标注高度 如 23.60
    opacity Decimal number (real) 透明度 0~1之间的浮点数
    descriptio Text(string) 简介

    管道

    管道对应kml中的线要素文件(polyline)

    kml中字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 管道都填写polytube
    name Text(string) 名称 名称,如 new tube
    lineWidth Decimal number (real) 管道宽度 设置管道粗细,以米为单位
    texture Text(string) 贴图 围墙:fence,箭头:arrow
    animation Text(string) 动画 水平流动:horizontal,垂直流动:vertical,无:none
    color Text(string) 图形颜色 整体图形的颜色,格式类似#FFFFFF
    visible integer 整体可见性 1代表可见,0代表隐藏
    labelsVisi integer 标签可见性 1代表可见,0代表隐藏
    opacity Decimal number (real) 透明度 0~1之间的浮点数
    icon Text(string) 标签图标 图标的英文名称,可以切换到星球英文版查看每种图标对应的英文名
    textColor Text(string) 标签颜色 标签的文字颜色,格式类似#FFFFFF
    pinLength Decimal number (real) 标注高度 如 23.60
    textAlign Text(string) 文字位置 center, left, right
    descriptio Text(string) 简介

    posted in 星球 read more
  • 瞿一航

    Altizure星球导入SHP教程

    Altizure星球现支持导入shapefile文件,批量绘制星球几何标注。在星球编辑界面,点击下方工具条 - 导入SHP按钮,可将shp文件导入星球,以三维实体的形式呈现。
    目前支持5种画笔几何体的导入:

    • 标签
    • 光柱
    • 折线
    • 多面体
    • 管道

    对应的shp中的点、线、面要素文件。

    文件类型对应

    星球几何体类型 SHP 要素类别
    标签 (Annotation) 点要素 (Point)
    光柱 (Lightbeam) 点要素 (Point)
    折线 (Polyline) 线要素 (Polyline)
    多面体 (Polygon) 面要素 (Polygon)
    管道 (Polytube) 线要素 (Polyline)

    导入文件注意点:

    • 请上传shp文件组压缩成的zip文件;
    • 压缩文件中同组shp应至少包含.shp, .shx, .dbf;
    • 一个文件压缩包中可以包含多个shp文件组;
    • 导入的shp要在qgis或者arcmap里面能正常打开;
    • shp导入前需要设定明确的坐标系;
    • 为避免中文乱码问题,建议使用 QGIS 或 ArcGIS Desktop 10.2.1 以上版本编辑生成的 UTF-8 编码 shp 文件。可参考shapefile与字符集编码设置
    • 如遇到乱码问题,可参考下文Q&A问题一:遇到乱码怎么解决;
    • 如果星球设置了任意坐标系,则shp文件需要定义坐标系为Web Mercator (EPSG: 3857)才可正确导入。
    • shp字段名称与星球属性存在映射关系,应参照下文对应关系表。

    示范案例

    现有一份广州市行政区划图,在QGIS中打开如图所示。我们希望以面要素的形式导入星球。
    行政区划图.png

    右键图层,打开图层属性表,可以看到每个区已经有一些数据。
    打开属性表.png

    现有的数据:
    现有的数据.png
    可以看到,现有数据中已经有"name"字段,这也正是我们想要标记在区域上的,因此不用做改变。
    这时我们希望对每个行政区域面使用我们设定的颜色。参照上文的属性对应关系表中的“多面体”表,可知,应新增color字段来赋予颜色
    新增字段.png
    color字段的属性值需要填写能被JavaScript识别的颜色字符串,如 red, #ff0000, rgb(255,0,0)
    color字段设置.png
    将编辑好的文件组创建压缩包。
    创建压缩包.png

    将压缩包上传至星球
    上传至星球.png

    上传完成,可以配置我们的shp数据与星球样式配置属性之间的对应关系。
    此处为关键步骤,通过字段匹配,可以通过原先的SHP属性批量设置星球实体的样式,如:颜色、透明度、标签高度、多面体高度等。(具体可参照下文“属性对应关系表”)
    系统会预先将名称相同或相近的字段对应上。
    星球样式与SHP属性表中字段做匹配.png
    导入的SHP数据正在和星球后台同步:
    导入的SHP数据正在和星球后台同步.png

    导入效果:
    导入效果.png

    样例数据

    样例数据下载地址:
    链接:https://pan.baidu.com/s/1qOLXI-VAai5D_PtyDK7Mdg
    提取码:yasp

    Q&A

    问题一:

    • 我导入的中文信息出现乱码,怎么解决?
    • ArcGIS Desktop 10.2.1 之前版本中文字符串使用的是GBK编码,需要通过QGIS转换成UTF8编码数据才能在星球里正确导入。具体操作如下:
      在QGIS里打开一份样例地块数据,我们可以看到,属性表里出现了乱码。
      table乱码.png
      右键图层,点击 Properties 查看属性
      打开图层属性.png
      在属性source标签下,设置元数据编码 (Data source encoding) 为 GBK
      设置源数据编码为GBK.png
      然后关闭属性对话框,右键导出图层
      导出图层.png
      在导出图层对话框设置导出编码为utf-8,至此完成shp字符编码转换的工作。
      导出utf8.png

    问题二:

    • 导入的shp数据高度没有导入进来,是什么原因?
    • 如果需要导入的数据包含高程信息,需要shp数据本身包含高度。
      创建shp时需要勾选 contain Z values:
      导入高度.png
      从Excel等数据源导入时,需要将Z Field对应选上高程数据所在字段:
      导入高度2.png

    属性对应关系表

    星球中几何标注的类型、高度、样式等信息,可以通过设置和编辑shp文件属性表中的对应字段值来控制。如果不设置相应字段,星球会按照默认样式来绘制标注。

    标签

    标签对应shp中的点要素文件(point)

    字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 标签都填写annotation
    name Text(string) 名称 名称,如 new annotation
    visible integer 整体可见性 1代表可见,0代表隐藏
    icon Text(string) 标签图标 图标的英文名称,可以切换到星球英文版查看每种图标对应的英文名
    textColor Text(string) 标签颜色 标签的文字颜色,格式类似#FFFFFF
    pinLength Decimal number (real) 标注高度 如 23.60
    textAlign Text(string) 文字位置 center, left, right
    descriptio Text(string) 简介

    光柱

    标签对应shp中的点要素文件(point)

    shp中字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 光柱都填写lightbeam
    name Text(string) 名称 名称,如 new lightbeam
    visible integer 整体可见性 1代表可见,0代表隐藏
    labelsVisi integer 标签可见性 1代表可见,0代表隐藏
    textColor Text(string) 标签颜色 标签的文字颜色,格式类似#FFFFFF
    color Text(string) 形状颜色 整体形状的颜色,格式类似#FFFFFF
    radius Decimal number (real) 半径 如 5
    height Decimal number (real) 高度 如 40
    pinLength Decimal number (real) 标注高度 如 23.60
    opacity Decimal number (real) 透明度 0~1之间的浮点数
    textAlign Text(string) 文字位置 center, left, right
    descriptio Text(string) 简介

    折线

    折线对应shp中的多段线要素文件(polyline)

    shp中字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 折线都填写polyline
    name Text(string) 名称 名称,如 new polyline
    visible integer 整体可见性 1代表可见,0代表隐藏
    labelsVisi integer 标签可见性 1代表可见,0代表隐藏
    texture Text(string) 贴图 围墙:fence,箭头:arrow
    animation Text(string) 动画 水平流动:horizontal,垂直流动:vertical,无:none
    icon Text(string) 标签图标 图标的英文名称,可以切换到星球英文版查看每种图标对应的英文名
    textColor Text(string) 形状颜色 标签的文字颜色,格式类似#FFFFFF
    color Text(string) 形状颜色 整体形状的颜色,格式类似#FFFFFF
    pinLength Decimal number (real) 标注高度 如 23.60
    lineWidth Decimal number (real) 线段粗细 如 0.60
    fenceHeigh Decimal number (real) 围墙高度 如 7.60
    opacity Decimal number (real) 透明度 0~1之间的浮点数
    textAlign Text(string) 文字位置 center, left, right
    descriptio Text(string) 简介

    多面体

    多面体对应shp中的面要素文件(polygon)

    shp中字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 多面体都填写polygon
    name Text(string) 名称 名称,如 new volume
    visible integer 整体可见性 1代表可见,0代表隐藏
    labelsVisi integer 标签可见性 1代表可见,0代表隐藏
    color Text(string) 图形颜色 整体图形的颜色,格式类似#FFFFFF
    hasTopCove integer 顶盖可见性 1代表可见,0代表隐藏
    hasBottomC integer 底面可见性 1代表可见,0代表隐藏
    top Decimal number (real) 顶盖高度 如 40
    bottom Decimal number (real) 底面高度 如 5
    pinLength Decimal number (real) 标注高度 如 23.60
    opacity Decimal number (real) 透明度 0~1之间的浮点数
    descriptio Text(string) 简介

    管道

    管道对应shp中的线要素文件(polyline)

    shp中字段名 数据格式 对应星球标注属性 是否必须 备注
    type Text(string) 类别 管道都填写polytube
    name Text(string) 名称 名称,如 new tube
    lineWidth Decimal number (real) 管道宽度 设置管道粗细,以米为单位
    texture Text(string) 贴图 围墙:fence,箭头:arrow
    animation Text(string) 动画 水平流动:horizontal,垂直流动:vertical,无:none
    color Text(string) 图形颜色 整体图形的颜色,格式类似#FFFFFF
    visible integer 整体可见性 1代表可见,0代表隐藏
    labelsVisi integer 标签可见性 1代表可见,0代表隐藏
    opacity Decimal number (real) 透明度 0~1之间的浮点数
    icon Text(string) 标签图标 图标的英文名称,可以切换到星球英文版查看每种图标对应的英文名
    textColor Text(string) 标签颜色 标签的文字颜色,格式类似#FFFFFF
    pinLength Decimal number (real) 标注高度 如 23.60
    textAlign Text(string) 文字位置 center, left, right
    descriptio Text(string) 简介

    posted in 星球 read more