geojson文件默认已有的style会导致webGL渲染错误处理办法

geojson文件默认已有的style会导致webGL渲染错误处理办法

相关链接:

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

代码:

复制代码
export function showDraw(isFlyTo) {
  removeLayer()

  graphicLayer = new mars3d.layer.GeoJsonLayer({
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [121.453893, 29.888391],
          },
          properties: {
            gid: "1",
            code: "1718850737365",
            type: 'circleP',
            style: {
              radius: 1693.63
            }
          },
          id: "fid--45368680_1902ac1ce0f_-7fde",
        },
      ],
    },
    symbol: {
      styleOptions: {
        color: "#FF0000",
      },
    },
    flyTo: true
  });
  map.addLayer(graphicLayer);
}

效果:

报错:

Cesium.js:15236 An error occurred while rendering. Rendering has stopped.

DeveloperError: normalized result is not a number

Error

处理办法:

设置下 merge为true即可,

正确代码:

复制代码
export function showDraw(isFlyTo) {
  removeLayer()

  graphicLayer = new mars3d.layer.GeoJsonLayer({
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [121.453893, 29.888391],
          },
          properties: {
            gid: "1",
            code: "1718850737365",
            type: 'circleP',
            style: {
              radius: 1693.63
            }
          },
          id: "fid--45368680_1902ac1ce0f_-7fde",
        },
      ],
    },
    symbol: {
      merge: true,
      styleOptions: {
        color: "#FF0000",
      },
    },
    flyTo: true
  });
  map.addLayer(graphicLayer);
}

正常效果:

原因:

1.内置的style与symbol配置冲突,需要合并并覆盖json中已有的style

相关api:

Mars3D三维可视化平台 | 火星科技

相关推荐
军军君0120 分钟前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9221 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
打小就很皮...1 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
qq_177767372 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_949462102 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
wuhen_n2 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon2 小时前
理解vue中的ref
前端·javascript·vue.js
jin1233223 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_920931703 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
落霞的思绪4 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架