mars3d
This commit is contained in:
parent
c50cd6656d
commit
e19b401ae5
|
|
@ -6,7 +6,7 @@
|
||||||
<script>
|
<script>
|
||||||
// import * as mars3d from "mars3d";
|
// import * as mars3d from "mars3d";
|
||||||
const Cesium = mars3d.Cesium;
|
const Cesium = mars3d.Cesium;
|
||||||
const point1 = [116.027404,36.414659,42]
|
const point1 = [117.083458,31.655321,42]
|
||||||
const point2 = [116.027392, 36.413562, 42]
|
const point2 = [116.027392, 36.413562, 42]
|
||||||
const point3 = mars3d.PointUtil.getOnLinePointByLen(
|
const point3 = mars3d.PointUtil.getOnLinePointByLen(
|
||||||
mars3d.LngLatPoint.toCartesian(point1),
|
mars3d.LngLatPoint.toCartesian(point1),
|
||||||
|
|
@ -21,158 +21,152 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// const scriptInfo = document.createElement("script");
|
const scriptInfo = document.createElement("script");
|
||||||
// scriptInfo.setAttribute("data-callType", "callScript");
|
scriptInfo.setAttribute("data-callType", "callScript");
|
||||||
// scriptInfo.src = "http://mars3d.cn/lib/Cesium/Cesium.js";
|
scriptInfo.src = "http://mars3d.cn/lib/Cesium/Cesium.js";
|
||||||
// document.head.appendChild(scriptInfo);
|
document.head.appendChild(scriptInfo);
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
var mapOptions = {
|
const map = new mars3d.Map("mars3dContainer", {
|
||||||
basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
|
scene: {
|
||||||
};
|
center: { lat: 30.054604, lng: 108.885436, alt: 100, heading: 316, pitch: 10},
|
||||||
// var map = new mars3d.Map("mars3dContainer", mapOptions); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
|
},
|
||||||
const map = new mars3d.Map("mars3dContainer", {
|
})
|
||||||
scene: {
|
map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
|
||||||
center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
|
|
||||||
showSun: true,
|
|
||||||
showMoon: true,
|
|
||||||
showSkyBox: true,
|
|
||||||
showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
|
|
||||||
fog: true,
|
|
||||||
fxaa: true,
|
|
||||||
globe: {
|
|
||||||
|
|
||||||
depthTestAgainstTerrain: false,
|
|
||||||
baseColor: "#546a53"
|
|
||||||
},
|
|
||||||
cameraController: {
|
|
||||||
zoomFactor: 3.0,
|
|
||||||
minimumZoomDistance: 1,
|
|
||||||
maximumZoomDistance: 50000000,
|
|
||||||
enableRotate: true,
|
|
||||||
enableZoom: true
|
|
||||||
},
|
|
||||||
mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
|
|
||||||
mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL// 2D下左右一直可以滚动重复世界地图
|
|
||||||
},
|
|
||||||
control: {
|
|
||||||
baseLayerPicker: true, // basemaps底图切换按钮
|
|
||||||
homeButton: true, // 视角复位按钮
|
|
||||||
sceneModePicker: true, // 二三维切换按钮
|
|
||||||
navigationHelpButton: true, // 帮助按钮
|
|
||||||
fullscreenButton: true, // 全屏按钮
|
|
||||||
contextmenu: { hasDefault: true } // 右键菜单
|
|
||||||
},
|
|
||||||
terrain: {
|
|
||||||
url: "//data.mars3d.cn/terrain",
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
basemaps: [
|
|
||||||
{
|
|
||||||
name: "天地图影像",
|
|
||||||
// icon: "img/basemaps/tdt_img.png",
|
|
||||||
type: "tdt",
|
|
||||||
layer: "img_d",
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
let tilesetLayer = new mars3d.layer.TilesetLayer({
|
let tilesetLayer = new mars3d.layer.TilesetLayer({
|
||||||
name:'',
|
type: "3dtiles",
|
||||||
|
name:'超低排放',
|
||||||
url: "/3dtiles/tileset.json",
|
url: "/3dtiles/tileset.json",
|
||||||
popup: "all",
|
popup: "all",
|
||||||
|
scale: 1,
|
||||||
|
// rotation: {x:0, y:1,z: 0 }, // 模型的旋转角度，这里以Z轴为例，表示沿Z轴旋转45度
|
||||||
|
highlight: { type: "click", color: "#00ffff" },
|
||||||
flyTo: true, //视角切换到模型所在位置
|
flyTo: true, //视角切换到模型所在位置
|
||||||
|
heading: 0, // 航向角，围绕Z轴旋转
|
||||||
|
pitch: -5, // 俯仰角，向上调整
|
||||||
|
roll: 10 // 翻滚角，围绕Y轴旋转
|
||||||
});
|
});
|
||||||
map.addLayer(tilesetLayer);
|
map.addLayer(tilesetLayer);
|
||||||
tilesetLayer.readyPromise.then(() => {
|
map.on(mars3d.EventType.click, function (event) {
|
||||||
// 加载完成
|
let feature = event.pickedObject;
|
||||||
console.log("模型加载完成", tilesetLayer)
|
//下面只是演示解释底层实现，在平台中直接通过event.graphic.attr可以获取属性
|
||||||
|
console.log("feature", feature);
|
||||||
localforage.setItem(storageName, url) // 记录历史值
|
console.log("Cesium.Cesium3DTileFeature", Cesium.Cesium3DTileFeature);
|
||||||
eventTarget.fire("tilesetLayerLoad", { layer: tilesetLayer })
|
console.log(feature instanceof Cesium.Cesium3DTileFeature)
|
||||||
})
|
if (feature instanceof Cesium.Cesium3DTileFeature) {
|
||||||
.catch((e) => {
|
// let propertyNames = feature.getPropertyNames();
|
||||||
// 加载失败
|
// let length = propertyNames.length;
|
||||||
console.log("模型加载失败", e)
|
// for (var i = 0; i < length; ++i) {
|
||||||
})
|
// let propertyName = propertyNames[i];
|
||||||
|
// console.log(propertyName + ': ' + feature.getProperty(propertyName));
|
||||||
// 加载完成事件
|
// }
|
||||||
tilesetLayer.on(mars3d.EventType.updatePosition, function (event) {
|
|
||||||
eventTarget.fire("changePoition", {
|
|
||||||
center: tilesetLayer.center,
|
|
||||||
rotation: tilesetLayer.rotation
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// 创建图层
|
|
||||||
let layerWall = new mars3d.layer.GraphicLayer({
|
|
||||||
name: "墙",
|
|
||||||
show: true,
|
|
||||||
// 属性
|
|
||||||
strokestyle: "#3388ff",
|
|
||||||
strokewidth: 2,
|
|
||||||
fill: true,
|
|
||||||
fillcolor: "#00ffff",
|
|
||||||
opacity: 0.5,
|
|
||||||
// 样式
|
|
||||||
style: {
|
|
||||||
// 可见范围
|
|
||||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000),
|
|
||||||
// 高度
|
|
||||||
},
|
|
||||||
|
|
||||||
semicolon: true
|
|
||||||
})
|
|
||||||
// 矢量对象
|
|
||||||
let wallGraphic = new mars3d.graphic.WallEntity({
|
|
||||||
positions: [point1, point2],
|
|
||||||
// @param [options.allowDrillPick] - 是否允许鼠标穿透拾取
|
|
||||||
allowDrillPick: true,
|
|
||||||
style: {
|
|
||||||
// 可见范围
|
|
||||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000),
|
|
||||||
// 文字墙高度
|
|
||||||
diffHeight:15 ,
|
|
||||||
materialType: mars3d.MaterialType.Text,
|
|
||||||
materialOptions: {
|
|
||||||
text: "显示文本",
|
|
||||||
font_family: "楷体",
|
|
||||||
color: "#00ffff"
|
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
flyTo:true,
|
// 创建图层
|
||||||
attr: { remark: "test" }
|
let GraphicLayer = new mars3d.layer.GraphicLayer({
|
||||||
})
|
name: "墙",
|
||||||
|
show: true,
|
||||||
|
// 属性
|
||||||
// 为了演示graphic上绑定方式
|
strokestyle: "#3388ff",
|
||||||
var graphic = new mars3d.graphic.BoxEntity({
|
strokewidth: 2,
|
||||||
position: new mars3d.LngLatPoint(30.054604, 108.885436, 1),
|
fill: true,
|
||||||
style: {
|
fillcolor: "#00ffff",
|
||||||
dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
|
opacity: 0.5,
|
||||||
fill: true,
|
// 样式
|
||||||
color: "#00ff00",
|
style: {
|
||||||
opacity: 0.9,
|
// 可见范围
|
||||||
label: {
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
|
||||||
text: "graphic绑定的演示",
|
// 高度
|
||||||
font_size: 25,
|
|
||||||
font_family: "楷体",
|
|
||||||
color: "#003da6",
|
|
||||||
outline: true,
|
|
||||||
outlineColor: "#bfbfbf",
|
|
||||||
outlineWidth: 2,
|
|
||||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
||||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
|
||||||
},
|
},
|
||||||
semicolon: true
|
semicolon: true
|
||||||
|
})
|
||||||
|
map.addLayer(GraphicLayer);
|
||||||
|
// 矢量对象
|
||||||
|
let wallGraphic = new mars3d.graphic.WallEntity({
|
||||||
|
positions: [point1, point2],
|
||||||
|
// @param [options.allowDrillPick] - 是否允许鼠标穿透拾取
|
||||||
|
allowDrillPick: true,
|
||||||
|
style: {
|
||||||
|
// 可见范围
|
||||||
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000),
|
||||||
|
// 文字墙高度
|
||||||
|
diffHeight:15 ,
|
||||||
|
materialType: mars3d.MaterialType.Text,
|
||||||
|
materialOptions: {
|
||||||
|
text: "显示文本",
|
||||||
|
font_family: "楷体",
|
||||||
|
color: "#00ffff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
flyTo:true,
|
||||||
|
attr: { remark: "test" }
|
||||||
|
})
|
||||||
|
GraphicLayer.addGraphic(wallGraphic);
|
||||||
|
// 创建标注图片的图形对象[获取设备，并将设备id放入attr中，点击图标时，可获得设备id，根据设备id查询设备相关信息]
|
||||||
|
const graphic = new mars3d.graphic.FontBillboardEntity({
|
||||||
|
position: new mars3d.LngLatPoint(117.084699, 31.65172, 6),
|
||||||
|
style: {
|
||||||
|
image: "img/enp_blue/ball.png",
|
||||||
|
color: "#00ffff",
|
||||||
|
cale: 0.5,
|
||||||
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
label: {
|
||||||
|
text: "设备名称",
|
||||||
|
font_size: 20,
|
||||||
|
color: "#ff0000",
|
||||||
|
pixelOffsetY: -120,
|
||||||
|
distanceDisplayCondition: true,
|
||||||
|
distanceDisplayCondition_far: 50000,
|
||||||
|
distanceDisplayCondition_near: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
attr: { remark: "设备id" }
|
||||||
|
})
|
||||||
|
// 绑定Popup
|
||||||
|
// const inthtml = `<table style="width: auto;">
|
||||||
|
// <tr>
|
||||||
|
// <th scope="col" colspan="2" style="text-align:center;font-size:15px;">我是graphic上绑定的Popup </th>
|
||||||
|
// </tr>
|
||||||
|
// <tr>
|
||||||
|
// <td>提示：</td>
|
||||||
|
// <td>这只是测试信息，可以任意html</td>
|
||||||
|
// </tr>
|
||||||
|
// </table>`
|
||||||
|
// graphic.bindPopup(inthtml).openPopup()
|
||||||
|
GraphicLayer.addGraphic(graphic);
|
||||||
|
// GraphicLayer.on(mars3d.EventType.click, function (event) {
|
||||||
|
// console.log("监听layer，单击了矢量对象", event)
|
||||||
|
// })
|
||||||
|
function bindLayerPopup() {
|
||||||
|
GraphicLayer.bindPopup(function (event) {
|
||||||
|
console.log("监听layer，绑定popup", event)
|
||||||
|
const attr = event.graphic.attr || {}
|
||||||
|
attr["类型"] = event.graphic.type
|
||||||
|
attr["来源"] = "我是layer上绑定的Popup"
|
||||||
|
attr["备注"] = "我支持鼠标交互"
|
||||||
|
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr })
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
bindLayerPopup();
|
||||||
map.graphicLayer.addGraphic(graphic)
|
// const graphic2 = new mars3d.graphic.BillboardEntity({
|
||||||
|
// position: [117.084699, 31.65172, 6],
|
||||||
layerWall.addGraphic(wallGraphic)
|
// style: {
|
||||||
map.addLayer(layerWall)
|
// image: "img/enp_blue/ball.png",
|
||||||
},
|
// scale: 1.0,
|
||||||
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
// clampToGround: true
|
||||||
|
// },
|
||||||
|
// attr: { remark: "示例1" }
|
||||||
|
// })
|
||||||
|
// GraphicLayer.addGraphic(graphic2);
|
||||||
|
},
|
||||||
mothods: {
|
mothods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
map.destroy()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue