webgl 实例（web前端开发如何提高自己）

本文目录

• web前端开发如何提高自己
• SuperMap iClient3D for WebGL教程-Skyline天际线分析

web前端开发如何提高自己

1.跟着教程做实例项目，lynda, pluralsight, tutsplus,
2.不断积累小项目的经验，参考Codepen.io, codrops上的各种好玩的代码
3.积累代码量，写自己的个人项目， 等你有了10万+行JS代码的时候，你已经是个准大牛了。
要想走的更远，攀的更高，则需要更扎实的基础，将计算机学科其他知识用JS去实现
1.学习更多语言，C++，Python，GO，Rust，Clojure等，了解其他语言，才更能知道JS自身的缺陷。
2.补习CS基础知识，以及线性代数(这个比高数重要)
3.把CS里的几大方向的知识在前端用JS实现(图形学，编译原理，机器视觉，机器学习，等等)
其实到后面，学习CS的理论才是重点，前端还是后端JS还是C++已经不重要了，融会贯通，做到可以根据业务需求随意切换语言和工具链。
那么JS能在浏览器做什么?
1. 操作系统
Virtual x86 (x86构架系统模拟器，直接在浏览器跑windows 98系统!!)
Emulators written in JavaScript 各种模拟器
Writing an x86 emulator in JavaScript
Javascript PC Emulator js版的Linux系统
2. 学好编译原理，造自己的语言,
即使不需要造自己的语言，要实现各种转义和预处理工具例如babel，webpack，post-css，less，都需要用到编译原理的知识。
3.图形学Computer Graphics: 基于WebGL的游戏和3d程序这些自然不用说， 能直接就用2d
canvas直接写一个rasterizer光栅器，用canvas写raytracer以及实现perspective贴图等等，这些才是非常有趣和富有挑战的，说明你对底层的图形学知识已经非常了解
4.机器视觉Computer Vision: 人脸检测，物体检测，追踪，SFM，SLAM这些都非常有趣，也有js版的opencv：jsfeat
5.机器学习Machine learning
6.基于FAST 特征点检测，ORB特征点匹配，计算homography， 透视投影canvas不支持projection
transform，只能直接用矩阵转换然后线性插值，再优化一下，运行速度可以接受。
所以前端还是有很多东西可以学的，基础扎实才能走的更远。

SuperMap iClient3D for WebGL教程-Skyline天际线分析

天际线，天际线又称城市轮廓或全景，是指天空与观察点周围的表面以及要素相分离的界线。天际线分析功能可根据观察点，生成当前场景窗口中建筑物顶端边缘与天空的分离线，主要用于城市建筑规划等场景中
###iClient3D for WebGL提取天际线
1.创建天际线分析，可设定相关展示属性参数

// 创建天际线分析对象
var skyline = new Cesium.Skyline(scene);
//设置颜色
skyline.color =Cesium.Color.CYAN;
// 设置天际线的显示模式,DisplayMode.LINE表示天际线的线模式，DisplayMode.FACE表示天际线的面模式
//默认为线模式
skyline.displayStyle=Cesium.Skyline.displayMode.LINE

2.设置观测点参数并执行（以场景当前位置为例，可按照需求进行设定）

// 获取场景的当前相机位置
var cartographic = scene.camera.positionCartographic;
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
//天际线分析的视口位置设置成当前相机位置
skyline.viewPosition = ;
// 设置俯仰，单位：度，取值范围为0-90
skyline.pitch = Cesium.Math.toDegrees(scene.camera.pitch);
// 获取或设置相机与正北方向的夹角。单位：度，取值范围0-360
skyline.direction = Cesium.Math.toDegrees(scene.camera.heading);
// 天际线分析半径设置为10000米，单位：米。默认值为-1.0，表示无穷远
skyline.radius = 10000;
// 执行天际线分析
skyline.build();

这样我们就能在场景中看到一条天际线了

***隐藏网址***

天际线分析应用

#####1.提取限高体
addLimitbody()模拟新建建筑物在不影响天际线时的高度范围
positon:指定限高体位置信息，由经度、纬度的数组表示
name:指定限高体名称,用于移除限高体对象removeLimitbody(name) 的指定

//添加限高体对象
  skyline.addLimitbody({
       position: positionarray,
       name: "limitBody"
              });

#####2.获取障碍物对象
getObjectIds() ，返回一个k-v对象，key为S3M图层ID，value为对象IDS数组，你可以判定哪些建筑影响了城市的天际线，做相应的调整；
#####3.获取二三维天际线结果
getSkyline2D()&getSkyline3D()
在官方示例里面，提取二维天际线以及拉伸闭合体以及体现这两种，接下来我们看看通过echarts图表将两者结合使用的例子

//获取二维天际线对象
var object = skyline.getSkyline2D();
//获取三维天际线对象
var locations=skyline.getSkyline3D();
//用echarts绘制二维天际线
var myChart = echarts.init(document.getElementById("map"));
var option = {
backgroundColor: "rgba(73,139,156,0.9)",
title: {
text: "二维天际线"
},

tooltip: {
trigger: "axis"
},

calculable: true,
xAxis: [
{
type: "category",
boundaryGap: false,
data: object.x,
show: false
}
],

yAxis: [
{
type: "value",
min: 0,
max: 1
}
],

series: [
{
name: "",
type: "line",
data: object.y
}
]
};
myChart.setOption(option);
// 监听click事件，获取相应的点并绘制在场景中
myChart.on(’click’,function(params){
viewer.entities.removeAll()
viewer.entities.add({
position:Cesium.Cartesian3.fromDegrees(locations.x),
billboard: {
// horizontalOrigin:Cesium.HorizontalOrigin.LEFT,
image: ’./images/map.png’,
pixelOffset: new Cesium.Cartesian2(0, -32),
}
})
})
}