new mars3d.layer.GeoJsonLayer({实现图标点billboard贴模型聚合效果

这篇具有很好参考价值的文章主要介绍了new mars3d.layer.GeoJsonLayer({实现图标点billboard贴模型聚合效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

说明:

1.【mars3d】的依赖库cesium本身是不支持贴地/贴模型操作的

2.sdk内部异步计算了数据的贴地/高度值之后,更新到图层上实现贴地/贴模型效果的

3.相关的示例链接:

1.功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

4.相关的计算贴地/贴模型的参数:

1.PointUtil - V3.7.0 - Mars3D API文档

关键代码参考:

function addLayer() {

  const tiles3dLayer = new mars3d.layer.TilesetLayer({

    name: "合肥市建筑物",

    url: "//data.mars3d.cn/3dtiles/jzw-hefei/tileset.json",

    maximumScreenSpaceError: 1,

    marsJzwStyle: true, // 打开建筑物特效(内置Shader代码)

    popup: [

      { field: "objectid", name: "编号" },

      { field: "name", name: "名称" },

      { field: "height", name: "楼高", unit: "米" }

    ],

    center: { lat: 31.841018, lng: 117.252932, alt: 1346, heading: 38, pitch: -26 },

    flyTo: true

  })

  map.addLayer(tiles3dLayer)

   geoJsonLayer = new mars3d.layer.GeoJsonLayer({

    name: "体育设施点",

    url: "//data.mars3d.cn/file/geojson/hfty-point.json",

    clustering: {

      enabled: true,

      pixelRange: 20

    },

    symbol: {

      type: "billboardP",

      styleOptions: {

        image: "img/marker/mark-red.png",

        verticalOrigin: Cesium.VerticalOrigin.BOTTOM

      }

    },

    popup: "all",

    flyTo: true

  })

  map.addLayer(geoJsonLayer)

  geoJsonLayer.on("clustering", function (event) {

    // console.log("新增聚合对象", event)

    const billboard = event.cluster.billboard

    billboard.position = mars3d.PointUtil.getSurfacePosition(map.scene, billboard.position)

  })

}

相关效果:

new mars3d.layer.GeoJsonLayer({实现图标点billboard贴模型聚合效果,Mars3d,app,vue,前端,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-803317.html

到了这里,关于new mars3d.layer.GeoJsonLayer({实现图标点billboard贴模型聚合效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • new mars3d.graphic.RectangleCombine({生成演示数据代码pt1与pt2详解

    new mars3d.graphic.RectangleCombine({生成演示数据代码pt1与pt2详解

    示例链接: 1.new mars3d.graphic.RectangleCombine({功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 2.new mars3d.graphic.RectangleEntity({功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 相关的api文档说明: 1.mars3d.PointUtil.getPositionByDirectionAndLen(根据观察点的方向角度和距离,计算目标点坐标

    2024年01月23日
    浏览(10)
  • Mars3d采用ellipsoid球实现模拟地球旋转效果

    Mars3d采用ellipsoid球实现模拟地球旋转效果

    1.Mars3d采用ellipsoid球实现模拟地球旋转效果 2.开始自选装之后,模型一直闪烁 http://mars3d.cn/editor-vue.html?id=graphic/entity/ellipsoid 3.相关代码:   4.采用属性机制即可实现球体模拟地球旋转的效果: 采用属性机制即可

    2024年02月16日
    浏览(31)
  • Mars3d实现【按当前相机视域页在地球上投射视频】功能

    Mars3d实现【按当前相机视域页在地球上投射视频】功能

    通过mars3d实现按当前相机视域页在地球上投射视频进行视频投射效果: 相关代码: 相关示例链接: http://mars3d.cn/editor-es5.html?id=graphic/video/video-edit 关键代码核心参考说明: 1.获得当前相机的视域边界位置,进行坐标转换后,转为new mars3d.graphic.VideoPrimitive({对象进行加载。 2

    2024年02月21日
    浏览(8)
  • Mars3D使用教程

    Mars3D使用教程

    1、使用npm安装依赖库 //安装mars3d主库 ​ //安装mars3d插件(按需安装) ​ //安装copy-webpack-plugin 插件在第3步中使用,根据webpack版本安装,不匹配的版本可能出错,版本需要5.0 “copy-webpack-plugin”: “^5.0.0”, 2.在main.js全局导入 或者 在使用mars3d的文件中导入(这一步可以跳过,

    2024年02月02日
    浏览(11)
  • 【mars3d】Vue3项目集成mard3d实现gis空间地理系统

    【mars3d】Vue3项目集成mard3d实现gis空间地理系统

    最近公司的业务逻辑需要使用到gis空间地理系统,最开始使用的是Cesium.js.涉及东西很多,对新手不是太友好,传送门: https://cesium.com/platform/cesiumjs/ . 业务要使用到很多特效,刚接触到Cesium,很多效果实现起来很鸡肋,mars3d则很适合新手.文档与示例也很全,现在记录一下vue3项目如何集

    2024年02月13日
    浏览(11)
  • mars3d绘制区域范围(面+边框)

    mars3d绘制区域范围(面+边框)

    1、图例(绿色面区域+白色边框)  2、代码 1)、绘制区域ts文件 解释: 1、new mars3d.layer.GeoJsonLayer      生成矢量图层 2、styleField       \\\"levels\\\" 是在json文件中区分不同级别景区的标志,值为1、2、3等 3、styleFieldOptions       根据styleField获取到的值进行区分,划分不同颜色的

    2024年02月15日
    浏览(10)
  • Vue2项目使用mars3d

    或参考webpack.config.js写法进行修改

    2024年02月14日
    浏览(28)
  • vue3 mars3d 天地图

                    npm i mars3d                  npm i mars3d-heatmap (热力图,需要的话安装)                 npm i -D copy-webpack-plugin                 增加mars3d目录配置,修改vue.config.js中configureWebpack里的内容如下:  使用: 最后附上天地图mapUrl地址

    2024年02月15日
    浏览(13)
  • Mars3D/Cesium + VUE3

    不定期更新 参考官网: http://mars3d.cn/dev/guide/start/import.html#_3-3-vite-%E6%8A%80%E6%9C%AF%E6%A0%88%E6%97%B6-%E7%9A%84%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE%E4%BF%AE%E6%94%B9 :已亲测vite框架,可以运行,具体见下main 1、插件 vite-plugin-mars3d vite中需要

    2024年02月14日
    浏览(13)
  • Mars3D Studio 的使用方法

    Mars3D Studio 的使用方法

    mars3d Studio 是 mars3d 研发团队于近期研发上线的一款 场景可视化编辑平台。拥有资源存档、团队协作、定制材质等丰富的功能。可以实现零代码构建一个可视化三维场景。 (1)数据上传:目前支持 tif 影像上传、 3dtitles 、 gltf 小模型上传以及矢量数据( shp、gesojson、kml ) 下

    2023年04月16日
    浏览(8)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包