mars3d
This commit is contained in:
parent
c50cd6656d
commit
e19b401ae5
|
|
@ -6,7 +6,7 @@
|
|||
<script>
|
||||
// import * as mars3d from "mars3d";
|
||||
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 point3 = mars3d.PointUtil.getOnLinePointByLen(
|
||||
mars3d.LngLatPoint.toCartesian(point1),
|
||||
|
|
@ -21,158 +21,152 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
// const scriptInfo = document.createElement("script");
|
||||
// scriptInfo.setAttribute("data-callType", "callScript");
|
||||
// scriptInfo.src = "http://mars3d.cn/lib/Cesium/Cesium.js";
|
||||
// document.head.appendChild(scriptInfo);
|
||||
const scriptInfo = document.createElement("script");
|
||||
scriptInfo.setAttribute("data-callType", "callScript");
|
||||
scriptInfo.src = "http://mars3d.cn/lib/Cesium/Cesium.js";
|
||||
document.head.appendChild(scriptInfo);
|
||||
},
|
||||
mounted() {
|
||||
var mapOptions = {
|
||||
basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
|
||||
};
|
||||
// var map = new mars3d.Map("mars3dContainer", mapOptions); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
|
||||
const map = new mars3d.Map("mars3dContainer", {
|
||||
scene: {
|
||||
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
|
||||
}
|
||||
]
|
||||
})
|
||||
const map = new mars3d.Map("mars3dContainer", {
|
||||
scene: {
|
||||
center: { lat: 30.054604, lng: 108.885436, alt: 100, heading: 316, pitch: 10},
|
||||
},
|
||||
})
|
||||
map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
|
||||
let tilesetLayer = new mars3d.layer.TilesetLayer({
|
||||
name:'',
|
||||
type: "3dtiles",
|
||||
name:'超低排放',
|
||||
url: "/3dtiles/tileset.json",
|
||||
popup: "all",
|
||||
scale: 1,
|
||||
// rotation: {x:0, y:1,z: 0 }, // 模型的旋转角度，这里以Z轴为例，表示沿Z轴旋转45度
|
||||
highlight: { type: "click", color: "#00ffff" },
|
||||
flyTo: true, //视角切换到模型所在位置
|
||||
heading: 0, // 航向角，围绕Z轴旋转
|
||||
pitch: -5, // 俯仰角，向上调整
|
||||
roll: 10 // 翻滚角，围绕Y轴旋转
|
||||
});
|
||||
map.addLayer(tilesetLayer);
|
||||
tilesetLayer.readyPromise.then(() => {
|
||||
// 加载完成
|
||||
console.log("模型加载完成", tilesetLayer)
|
||||
|
||||
localforage.setItem(storageName, url) // 记录历史值
|
||||
eventTarget.fire("tilesetLayerLoad", { layer: tilesetLayer })
|
||||
})
|
||||
.catch((e) => {
|
||||
// 加载失败
|
||||
console.log("模型加载失败", e)
|
||||
})
|
||||
|
||||
// 加载完成事件
|
||||
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"
|
||||
map.on(mars3d.EventType.click, function (event) {
|
||||
let feature = event.pickedObject;
|
||||
//下面只是演示解释底层实现，在平台中直接通过event.graphic.attr可以获取属性
|
||||
console.log("feature", feature);
|
||||
console.log("Cesium.Cesium3DTileFeature", Cesium.Cesium3DTileFeature);
|
||||
console.log(feature instanceof Cesium.Cesium3DTileFeature)
|
||||
if (feature instanceof Cesium.Cesium3DTileFeature) {
|
||||
// let propertyNames = feature.getPropertyNames();
|
||||
// let length = propertyNames.length;
|
||||
// for (var i = 0; i < length; ++i) {
|
||||
// let propertyName = propertyNames[i];
|
||||
// console.log(propertyName + ': ' + feature.getProperty(propertyName));
|
||||
// }
|
||||
}
|
||||
},
|
||||
flyTo:true,
|
||||
attr: { remark: "test" }
|
||||
})
|
||||
|
||||
|
||||
// 为了演示graphic上绑定方式
|
||||
var graphic = new mars3d.graphic.BoxEntity({
|
||||
position: new mars3d.LngLatPoint(30.054604, 108.885436, 1),
|
||||
style: {
|
||||
dimensions: new Cesium.Cartesian3(2000.0, 2000.0, 2000.0),
|
||||
fill: true,
|
||||
color: "#00ff00",
|
||||
opacity: 0.9,
|
||||
label: {
|
||||
text: "graphic绑定的演示",
|
||||
font_size: 25,
|
||||
font_family: "楷体",
|
||||
color: "#003da6",
|
||||
outline: true,
|
||||
outlineColor: "#bfbfbf",
|
||||
outlineWidth: 2,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||||
})
|
||||
// 创建图层
|
||||
let GraphicLayer = 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, 200000),
|
||||
// 高度
|
||||
},
|
||||
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 })
|
||||
})
|
||||
}
|
||||
})
|
||||
map.graphicLayer.addGraphic(graphic)
|
||||
|
||||
layerWall.addGraphic(wallGraphic)
|
||||
map.addLayer(layerWall)
|
||||
},
|
||||
bindLayerPopup();
|
||||
// const graphic2 = new mars3d.graphic.BillboardEntity({
|
||||
// position: [117.084699, 31.65172, 6],
|
||||
// style: {
|
||||
// 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: {
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
map.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue