基本的思路如下:
最后推荐大家去看一本叫《跨终端Web》的书籍。
有几种方法:
Openlayers 4的插入图片对象方式有了一些改变,之前版本的bounds属性,已经没有了。但是思路是一样的,定义一个指定的区域,将图片贴进去,最后加入到图层中。代码如下:
var imageExtent = [12981061.897802796-500, 4876961.53119492-500, 12981061.897802796+500, 4876961.53119492+500];
var image = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: './img/radar.png',
crossOrigin: '',
projection: 'EPSG:27700',
imageExtent: imageExtent
})
});
map.addLayer(image);
其中map是定义好的ol的对象。
var map = new ol.Map({
target: 'map',
...});
根据官方示例代码:
tileset = new Cesium.Cesium3DTileset({ url: tileset_url});
tileset.readyPromise.then(function(tileset) {
viewer.scene.primitives.add(tileset);
default_HeadingPitchRange = new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
viewer.zoomTo(tileset, default_HeadingPitchRange);
}).otherwise(function(error) {
console.log(error);
});
重点设置tileset_url即可,这是3D Tiles数据的路径,服务器是node的话,直接放入express支持的文件夹中,然后填写这个路径即可。
实际上2楼的方法并不是一种好的方法,毕竟那是去修改源代码,目前我采用的方法是:
tileset = new Cesium.Cesium3DTileset({ url: tileset_url});
tileset.readyPromise.then(function(tileset) {
viewer.scene.primitives.add(tileset);
default_HeadingPitchRange = new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
viewer.zoomTo(tileset, default_HeadingPitchRange);
// overwrite homebutton
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
e.cancel = true;
viewer.zoomTo(tileset, default_HeadingPitchRange);
});
}).otherwise(function(error) {
console.log(error);
});
注意看// overwrite homebutton
相当于我重载了homebutton点击之后的响应函数,比如我的三维地球空间中,有一个3D Tiles的目标,我让我的点击事件每次都聚焦这个目标。
网上一些博客提到的一些方法是修改源代码:
Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);//homebutton默认跳转位置
https://www.cnblogs.com/mazhenyu/p/8315842.html
上述博客提到的位置我没有找到,我使用的Cesium版本是1.4.5,位置是在: \Cesium-1.45\Source\Scene\Camera.js 256行左右。