graphicLayer.startDraw({指定type为curve曲线时,无法实现和示例一样的曲线效果的排查思路参考:
相关代码:
graphicLayer.startDraw({type: "curve",style: {color: "#ff0000",width: 3,},});
相关效果:
示例效果:
问题排查思路:
本地问题代码说明:
1.颜色出来了,证明代码是走通的。
本地开发版本与官网示例版本对比说明:
1.本地的版本时3.7.9,官网时3.7.10,差了版本,升级版本后清空缓存再试试之后,发现依然不行
2.然后对比了turf库的版本,依然保持与官网示例一致的。@turf/turf@6.5.0"
3.排除版本问题后,拉了一份官网的最简项目模板再次测试。
官网的仓库的开源地址:Mars3D 三维可视化平台 | 火星科技 | 地图开发
拉最简项目模板代码的命令:
git clone https://gitee.com/marsgis/mars3d-vue-template.git
4.拉一份在最简项目模板发现无法复现问题,效果正常
在最后的解决方法是: 本地的项目中turf库未正确引入,
安装了但是用的时候没引成功没生效导致的效果不一样
导致的本地的曲线绘制效果与示例的曲线绘制效果不同。
1.在App.vue文件中参考开发教程的顺序重新引用了truf库,由此效果正常了。
graphicLayer.startDraw({type: "curve",style: {color: "#33e8df",width: 3,},});
2.补充说明:相关依赖js文件的引入顺序参考官网的开发教程
例如: turf库引了之后在引mars3d才可以,需要测试这个引入顺序才行,参考这个顺序使用。
<!--引入cesium基础lib-->
<script>// window.CESIUM_BASE_URL = "https://unpkg.com/mars3d-cesium@latest/Build/Cesium/" //非必须,如jsp、asp.net等非html框架报错时建议取消注释
</script>
<link href="https://unpkg.com/mars3d-cesium@latest/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d-cesium@latest/Build/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script><!--引入mars3d库lib-->
<link href="https://unpkg.com/mars3d@latest/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d@latest/dist/mars3d.js" type="text/javascript" ></script><!--引入mars3d库插件lib(按需引入)-->
<script src="https://unpkg.com/mars3d-space@latest/dist/mars3d-space.js" type="text/javascript" ></script>