|
|
@@ -9,14 +9,14 @@ import Popup from "@/components/Popup.vue";
|
|
|
export default {
|
|
|
name: "Map",
|
|
|
components: {
|
|
|
- Popup,
|
|
|
+ Popup
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
// viewer3DTiles实例《systemConfig.data3DTiles keys,tile》
|
|
|
viewer3DTiles: {},
|
|
|
// 3DTiles options集合《systemConfig.data3DTiles keys,options》
|
|
|
- keysByOptions: {},
|
|
|
+ keysByOptions: {}
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -40,13 +40,13 @@ export default {
|
|
|
}
|
|
|
fetch(oauthUrl + "/oauth/api/user/login", {
|
|
|
method: "POST",
|
|
|
- body: loginInfo,
|
|
|
+ body: loginInfo
|
|
|
})
|
|
|
- .then((resp) => resp.json())
|
|
|
- .then((data) => {
|
|
|
+ .then(resp => resp.json())
|
|
|
+ .then(data => {
|
|
|
SkySceneryConfig = {
|
|
|
authUrl: oauthUrl,
|
|
|
- token: data.message,
|
|
|
+ token: data.message
|
|
|
};
|
|
|
that.pushAllScripts();
|
|
|
});
|
|
|
@@ -54,11 +54,11 @@ export default {
|
|
|
|
|
|
pushAllScripts() {
|
|
|
let that = this;
|
|
|
- that.addScripts(scriptObj.main).then(function () {
|
|
|
- let arr = scriptObj.plugins.map(function (src) {
|
|
|
+ that.addScripts(scriptObj.main).then(function() {
|
|
|
+ let arr = scriptObj.plugins.map(function(src) {
|
|
|
return that.addScripts(src);
|
|
|
});
|
|
|
- Promise.all(arr).then(function () {
|
|
|
+ Promise.all(arr).then(function() {
|
|
|
setTimeout(() => {
|
|
|
if (SkyScenery) {
|
|
|
that.creatMap();
|
|
|
@@ -80,15 +80,18 @@ export default {
|
|
|
document.head.appendChild(script);
|
|
|
if (script.readyState) {
|
|
|
// IE
|
|
|
- script.onreadystatechange = function () {
|
|
|
- if (script.readyState === "loaded" || script.readyState === "complete") {
|
|
|
+ script.onreadystatechange = function() {
|
|
|
+ if (
|
|
|
+ script.readyState === "loaded" ||
|
|
|
+ script.readyState === "complete"
|
|
|
+ ) {
|
|
|
script.onreadystatechange = null;
|
|
|
resolve();
|
|
|
}
|
|
|
};
|
|
|
} else {
|
|
|
// 其他浏览器
|
|
|
- script.onload = function () {
|
|
|
+ script.onload = function() {
|
|
|
resolve();
|
|
|
};
|
|
|
}
|
|
|
@@ -114,7 +117,12 @@ export default {
|
|
|
})("#ffffff00"),
|
|
|
tileWidth: document.createElement("canvas").width,
|
|
|
tileHeight: document.createElement("canvas").height,
|
|
|
- rectangle: SkyScenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
|
|
|
+ rectangle: SkyScenery.Rectangle.fromDegrees(
|
|
|
+ -180.0,
|
|
|
+ -90.0,
|
|
|
+ 180.0,
|
|
|
+ 90.0
|
|
|
+ )
|
|
|
}),
|
|
|
fullscreenButton: false, //是否显示全屏按钮
|
|
|
geocoder: false, //是否显示geocoder小器件，右上角查询按钮
|
|
|
@@ -126,14 +134,14 @@ export default {
|
|
|
navigationHelpButton: false, //是否显示右上角的帮助按钮
|
|
|
scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
|
|
|
infoBox: false, //是否显示点击要素之后显示的信息
|
|
|
- shouldAnimate: false, //是否自动播放
|
|
|
+ shouldAnimate: false //是否自动播放
|
|
|
// contextOptions: {
|
|
|
// requestWebgl1: true
|
|
|
// }
|
|
|
});
|
|
|
setTimeout(() => {
|
|
|
// 根据配置文件中的配置信息加载底图
|
|
|
- systemConfig.imageryProviders.forEach((url) => {
|
|
|
+ systemConfig.imageryProviders.forEach(url => {
|
|
|
that.loadTheWorldMapImage(url);
|
|
|
});
|
|
|
|
|
|
@@ -142,34 +150,55 @@ export default {
|
|
|
// viewer.scene.globe.baseColor = new SkyScenery.Color(1.0, 1.0, 1.0, 0.1);
|
|
|
viewer.camera.setView({
|
|
|
destination: SkyScenery.Cartesian3.fromDegrees(
|
|
|
- 121.28277083019914,
|
|
|
- 31.065009352291785,
|
|
|
- 12790.087231596899
|
|
|
+ // 121.28277083019914,
|
|
|
+ // 31.065009352291785,
|
|
|
+ // 12790.087231596899
|
|
|
+ 121.2727827910952,
|
|
|
+ 31.071842426999485,
|
|
|
+ 11303.852617688039
|
|
|
), // 设置位置
|
|
|
orientation: {
|
|
|
- heading: SkyScenery.Math.toRadians(356.03124445628373), // 方向
|
|
|
- pitch: SkyScenery.Math.toRadians(-45.31423437919367), // 倾斜角度
|
|
|
- roll: SkyScenery.Math.toRadians(0.0047802614997811636)
|
|
|
+ heading: SkyScenery.Math.toRadians(0), // 方向
|
|
|
+ pitch: SkyScenery.Math.toRadians(-45), // 倾斜角度
|
|
|
+ roll: SkyScenery.Math.toRadians(0)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ // 可以通过viewer.scene来访问场景对象进行进一步设置
|
|
|
+ viewer.scene.postProcessStages.fxaa.enabled = true; // 启用FXAA（快速近似抗锯齿）
|
|
|
+
|
|
|
this.$store.commit("createdMap", true);
|
|
|
|
|
|
+ // // 遍历所有的3Dtiles
|
|
|
+ // for (let keys in this.keysByOptions) {
|
|
|
+ // // 如果选中的话
|
|
|
+ // // if (homeVs.length > 0 && homeVs.indexOf(keys) != -1) {
|
|
|
+ // // } else {
|
|
|
+ // // this.hide3DTiles(keys);
|
|
|
+ // // }
|
|
|
+ // }
|
|
|
+ this.add3DTiles(systemConfig.data3DTiles["徐泾镇"]["全部"], true);
|
|
|
+
|
|
|
// 绑定点击事件
|
|
|
let handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
|
|
|
- handler.setInputAction(function (movement) {
|
|
|
+ handler.setInputAction(function(movement) {
|
|
|
var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
|
|
|
if (SkyScenery.defined(pick)) {
|
|
|
let entity = pick.id;
|
|
|
if (!entity) return;
|
|
|
- if (entity.type && (entity.type == "layers" || entity.type == "edge")) {
|
|
|
+ if (
|
|
|
+ entity.type &&
|
|
|
+ (entity.type == "layers" || entity.type == "edge")
|
|
|
+ ) {
|
|
|
let cartesian = viewer.camera.pickEllipsoid(
|
|
|
movement.position,
|
|
|
viewer.scene.globe.ellipsoid
|
|
|
);
|
|
|
// 空间坐标转世界坐标(弧度)
|
|
|
if (!cartesian) return;
|
|
|
- let cartographic = SkyScenery.Cartographic.fromCartesian(cartesian);
|
|
|
+ let cartographic = SkyScenery.Cartographic.fromCartesian(
|
|
|
+ cartesian
|
|
|
+ );
|
|
|
if (!cartographic) return;
|
|
|
// 弧度转为角度（经纬度）
|
|
|
let lon = SkyScenery.Math.toDegrees(cartographic.longitude); // 经度值
|
|
|
@@ -222,7 +251,7 @@ export default {
|
|
|
// );
|
|
|
let layer = new SkyScenery.ArcGisMapServerImageryProvider({
|
|
|
url:
|
|
|
- "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
|
|
|
+ "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
|
|
|
});
|
|
|
viewer.imageryLayers.addImageryProvider(layer);
|
|
|
},
|
|
|
@@ -246,7 +275,7 @@ export default {
|
|
|
// }
|
|
|
// };
|
|
|
|
|
|
- SkyScenery.GeoJsonDataSource.load(url).then(function (dataSource) {
|
|
|
+ SkyScenery.GeoJsonDataSource.load(url).then(function(dataSource) {
|
|
|
viewer.dataSources.add(dataSource);
|
|
|
var entities = dataSource.entities.values;
|
|
|
for (var i = 0; i < entities.length; i++) {
|
|
|
@@ -258,7 +287,7 @@ export default {
|
|
|
width: 50,
|
|
|
height: 50,
|
|
|
pixelOffset: new SkyScenery.Cartesian2(0, -25),
|
|
|
- heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND
|
|
|
});
|
|
|
}
|
|
|
if (entity.polyline) {
|
|
|
@@ -295,18 +324,20 @@ export default {
|
|
|
return viewer.entities.add({
|
|
|
name: "立体墙效果",
|
|
|
wall: {
|
|
|
- positions: positions.map(function (item) {
|
|
|
+ positions: positions.map(function(item) {
|
|
|
return SkyScenery.Cartesian3.fromDegrees(item[0], item[1]);
|
|
|
}),
|
|
|
// 设置高度
|
|
|
maximumHeights: new Array(positions.length).fill(options.maxH || 100),
|
|
|
minimumHeights: new Array(positions.length).fill(0),
|
|
|
material: new SkyScenery.DynamicWallMaterialProperty({
|
|
|
- color: SkyScenery.Color.fromCssColorString(options.color || "#00c4ff80"), // "#"
|
|
|
+ color: SkyScenery.Color.fromCssColorString(
|
|
|
+ options.color || "#00c4ff80"
|
|
|
+ ), // "#"
|
|
|
trailImage: "/static/image/color.png",
|
|
|
- duration: options.duration || 3000, // 3000
|
|
|
- }),
|
|
|
- },
|
|
|
+ duration: options.duration || 3000 // 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
|
|
|
@@ -325,12 +356,13 @@ export default {
|
|
|
}
|
|
|
} else {
|
|
|
let option = {
|
|
|
- url: this.keysByOptions[keys].url + "/tileset.json",
|
|
|
+ // url: this.keysByOptions[keys].url + "/tileset.json",
|
|
|
+ url: keys.url + "/tileset.json",
|
|
|
skipLevelOfDetail: true, //开启跳级加载
|
|
|
maximumMemoryUsage: 1024, //最大内存占用 推荐显存的一般
|
|
|
preferLeaves: true,
|
|
|
maximumScreenSpaceError: 16,
|
|
|
- maximumNumberOfLoadedTiles: 2000,
|
|
|
+ maximumNumberOfLoadedTiles: 2000
|
|
|
};
|
|
|
|
|
|
// Common settings for the dynamicScreenSpaceError optimization
|
|
|
@@ -339,8 +371,7 @@ export default {
|
|
|
// option
|
|
|
// );
|
|
|
var tile = new SkyScenery.Cesium3DTileset(option);
|
|
|
- // 可以通过viewer.scene来访问场景对象进行进一步设置
|
|
|
- viewer.scene.postProcessStages.fxaa.enabled = true; // 启用FXAA（快速近似抗锯齿）
|
|
|
+
|
|
|
viewer.scene.primitives.add(tile);
|
|
|
|
|
|
// // 设置相机视角
|
|
|
@@ -348,17 +379,18 @@ export default {
|
|
|
// viewer.zoomTo(tile);
|
|
|
// }
|
|
|
|
|
|
- tile.readyPromise.then(function () {
|
|
|
- // 设置相机视角
|
|
|
- if (flyto) {
|
|
|
- viewer.zoomTo(tile);
|
|
|
- }
|
|
|
+ tile.readyPromise.then(function() {
|
|
|
+ // // 设置相机视角
|
|
|
+ // if (flyto) {
|
|
|
+ // viewer.zoomTo(tile);
|
|
|
+ // }
|
|
|
});
|
|
|
this.viewer3DTiles[keys] = tile;
|
|
|
setTimeout(() => {
|
|
|
this.update3DTilesStyleByKeys(
|
|
|
this.viewer3DTiles[keys],
|
|
|
- Object.assign({}, this.keysByOptions[keys])
|
|
|
+ // Object.assign({}, this.keysByOptions[keys])
|
|
|
+ Object.assign({}, keys)
|
|
|
);
|
|
|
});
|
|
|
}
|
|
|
@@ -368,7 +400,7 @@ export default {
|
|
|
*/
|
|
|
update3DTilesStyleByKeys(tileset, options) {
|
|
|
try {
|
|
|
- tileset.readyPromise.then(function () {
|
|
|
+ tileset.readyPromise.then(function() {
|
|
|
// 设置样式
|
|
|
var cartographic = SkyScenery.Cartographic.fromCartesian(
|
|
|
tileset.boundingSphere.center
|
|
|
@@ -438,7 +470,9 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
adjust3DTilesPosition(tileset, options) {
|
|
|
- var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
|
|
|
+ var cartographic = Cesium.Cartographic.fromCartesian(
|
|
|
+ tileset.boundingSphere.center
|
|
|
+ );
|
|
|
var lon = Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
var lat = Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
var height = cartographic.height;
|
|
|
@@ -460,19 +494,25 @@ export default {
|
|
|
var m = tileset._root.transform;
|
|
|
|
|
|
if (options.rx != 0) {
|
|
|
- const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(options.rx));
|
|
|
+ const mx = Cesium.Matrix3.fromRotationX(
|
|
|
+ Cesium.Math.toRadians(options.rx)
|
|
|
+ );
|
|
|
const rotate = Cesium.Matrix4.fromRotationTranslation(mx);
|
|
|
Cesium.Matrix4.multiply(m, rotate, m);
|
|
|
}
|
|
|
|
|
|
if (options.ry != 0) {
|
|
|
- const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(options.ry));
|
|
|
+ const my = Cesium.Matrix3.fromRotationY(
|
|
|
+ Cesium.Math.toRadians(options.ry)
|
|
|
+ );
|
|
|
const rotate = Cesium.Matrix4.fromRotationTranslation(my);
|
|
|
Cesium.Matrix4.multiply(m, rotate, m);
|
|
|
}
|
|
|
|
|
|
if (options.rz != 0) {
|
|
|
- const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(options.rz));
|
|
|
+ const mz = Cesium.Matrix3.fromRotationZ(
|
|
|
+ Cesium.Math.toRadians(options.rz)
|
|
|
+ );
|
|
|
const rotate = Cesium.Matrix4.fromRotationTranslation(mz);
|
|
|
Cesium.Matrix4.multiply(m, rotate, m);
|
|
|
}
|
|
|
@@ -512,7 +552,7 @@ export default {
|
|
|
if (this.$store.state.initMap) {
|
|
|
// 暂存首页下拉框选中值
|
|
|
let homeVs = [];
|
|
|
- cascaderValue.forEach((item) => {
|
|
|
+ cascaderValue.forEach(item => {
|
|
|
homeVs.push(item[0] + item[1]);
|
|
|
});
|
|
|
// 遍历所有的3Dtiles
|
|
|
@@ -529,8 +569,8 @@ export default {
|
|
|
this.HomeHandleChangeCascader(cascaderValue);
|
|
|
}, 1000);
|
|
|
}
|
|
|
- },
|
|
|
- },
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
wdq
DESKTOP-6LTVLN7\Liumouren