|
|
@@ -5,8 +5,22 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
name: "Map",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // viewer3DTiles实例《systemConfig.data3DTiles keys,tile》
|
|
|
+ viewer3DTiles: {},
|
|
|
+ // 3DTiles url集合《systemConfig.data3DTiles keys,url》
|
|
|
+ keysByUrl: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
mounted() {
|
|
|
window.SkySceneryConfig = {};
|
|
|
+ for (let tileName in systemConfig.data3DTiles) {
|
|
|
+ for (let key in systemConfig.data3DTiles[tileName]) {
|
|
|
+ let url = systemConfig.data3DTiles[tileName][key];
|
|
|
+ this.keysByUrl[tileName + key] = url;
|
|
|
+ }
|
|
|
+ }
|
|
|
this.getToken();
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -20,13 +34,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();
|
|
|
});
|
|
|
@@ -34,11 +48,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();
|
|
|
@@ -60,18 +74,15 @@ 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();
|
|
|
};
|
|
|
}
|
|
|
@@ -95,12 +106,7 @@ export default {
|
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
return canvas.toDataURL();
|
|
|
})("#ffffff00"),
|
|
|
- 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小器件，右上角查询按钮
|
|
|
@@ -112,11 +118,11 @@ export default {
|
|
|
navigationHelpButton: false, //是否显示右上角的帮助按钮
|
|
|
scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
|
|
|
infoBox: false, //是否显示点击要素之后显示的信息
|
|
|
- shouldAnimate: false //是否自动播放
|
|
|
+ shouldAnimate: false, //是否自动播放
|
|
|
});
|
|
|
setTimeout(() => {
|
|
|
// 根据配置文件中的配置信息加载底图
|
|
|
- systemConfig.imageryProviders.forEach(url => {
|
|
|
+ systemConfig.imageryProviders.forEach((url) => {
|
|
|
that.loadTheWorldMapImage(url);
|
|
|
});
|
|
|
viewer.camera.setView({
|
|
|
@@ -133,14 +139,6 @@ export default {
|
|
|
});
|
|
|
|
|
|
this.$store.commit("createdMap", true);
|
|
|
- // // 盘龙天地
|
|
|
- // let tileName = "盘龙天地";
|
|
|
- // for (let key in systemConfig.data3DTiles[tileName]) {
|
|
|
- // let v = systemConfig.data3DTiles[tileName][key];
|
|
|
- // this.add3DTiles(v, true);
|
|
|
- // }
|
|
|
- // // 西虹桥
|
|
|
- // this.add3DTiles(systemConfig.data3DTiles["西虹桥"]["全部"], true);
|
|
|
return;
|
|
|
}, 0);
|
|
|
// viewer.entities.add({
|
|
|
@@ -273,7 +271,7 @@ export default {
|
|
|
viewer.imageryLayers.addImageryProvider(
|
|
|
new SkyScenery.ArcGisMapServerImageryProvider({
|
|
|
url:
|
|
|
- "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
|
|
|
+ "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
|
|
|
})
|
|
|
);
|
|
|
},
|
|
|
@@ -297,7 +295,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++) {
|
|
|
@@ -309,7 +307,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) {
|
|
|
@@ -333,89 +331,114 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- // 加载动态围墙
|
|
|
+ /**
|
|
|
+ * 加载动态围墙
|
|
|
+ * options = {
|
|
|
+ * maxH: 100,
|
|
|
+ * color: "#00c4ff80",
|
|
|
+ * duration: 3000,
|
|
|
+ * }
|
|
|
+ */
|
|
|
addDynamicWall(positions, options) {
|
|
|
- /**
|
|
|
- * options = {
|
|
|
- * maxH: 100,
|
|
|
- * color: "#00c4ff80",
|
|
|
- * duration: 3000,
|
|
|
- * }
|
|
|
- */
|
|
|
+ console.log("addDynamicWall", positions, options);
|
|
|
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), // "#"
|
|
|
+ color: SkyScenery.Color.fromCssColorString(options.color || "#00c4ff80"), // "#"
|
|
|
trailImage: "/static/image/color.png",
|
|
|
- duration: options.duration || 3000 // 3000
|
|
|
- })
|
|
|
- }
|
|
|
+ duration: options.duration || 3000, // 3000
|
|
|
+ }),
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 加载3Dtiles
|
|
|
* @author LiuMengxiang
|
|
|
- * @param {*} url 3Dtiles的url地址
|
|
|
+ * @param {*} url 3Dtiles的systemConfig.data3DTiles keys
|
|
|
* @param {*} flyto 是否自动飞行到3Dtiles
|
|
|
*/
|
|
|
- add3DTiles(url, flyto) {
|
|
|
- // let that = this;
|
|
|
- let option = {
|
|
|
- url: url + "/tileset.json",
|
|
|
- skipLevelOfDetail: true, //开启跳级加载
|
|
|
- maximumMemoryUsage: 1024, //最大内存占用 推荐显存的一般
|
|
|
- preferLeaves: true,
|
|
|
- maximumScreenSpaceError: 16,
|
|
|
- maximumNumberOfLoadedTiles: 2000
|
|
|
- };
|
|
|
- // option = Object.assign(option, options);
|
|
|
- var tile = new SkyScenery.Cesium3DTileset(option);
|
|
|
- viewer.scene.primitives.add(tile);
|
|
|
+ add3DTiles(keys, flyto) {
|
|
|
+ if (this.viewer3DTiles[keys]) {
|
|
|
+ this.viewer3DTiles[keys].show = true;
|
|
|
+ if (flyto) {
|
|
|
+ viewer.zoomTo(this.viewer3DTiles[keys]);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let option = {
|
|
|
+ url: this.keysByUrl[keys] + "/tileset.json",
|
|
|
+ skipLevelOfDetail: true, //开启跳级加载
|
|
|
+ maximumMemoryUsage: 1024, //最大内存占用 推荐显存的一般
|
|
|
+ preferLeaves: true,
|
|
|
+ maximumScreenSpaceError: 16,
|
|
|
+ maximumNumberOfLoadedTiles: 2000,
|
|
|
+ };
|
|
|
+ var tile = new SkyScenery.Cesium3DTileset(option);
|
|
|
+ viewer.scene.primitives.add(tile);
|
|
|
|
|
|
- if (flyto) {
|
|
|
- tile.readyPromise.then(function(tileset) {
|
|
|
- viewer.zoomTo(tile);
|
|
|
- // if (url.indexOf("jz") != -1) {
|
|
|
- // setTimeout(() => {
|
|
|
- // that.remove3Dtiles(tile);
|
|
|
- // }, 5000);
|
|
|
- // }
|
|
|
- });
|
|
|
+ if (flyto) {
|
|
|
+ tile.readyPromise.then(function () {
|
|
|
+ viewer.zoomTo(tile);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.viewer3DTiles[keys] = tile;
|
|
|
}
|
|
|
- return tile;
|
|
|
-
|
|
|
- // let tile = SkyScenery.add3DTilesData(url + "/tileset.json", viewer);
|
|
|
-
|
|
|
- // viewer.scene.primitives.add(tile);
|
|
|
- // if (flyto) {
|
|
|
- // tile.readyPromise.then(function(tileset) {
|
|
|
- // viewer.zoomTo(tile);
|
|
|
- // if (url.indexOf("jz") != -1) {
|
|
|
- // setTimeout(() => {
|
|
|
- // that.remove3Dtiles(tile);
|
|
|
- // }, 5000);
|
|
|
- // }
|
|
|
- // });
|
|
|
- // }
|
|
|
- // return tile;
|
|
|
},
|
|
|
/**
|
|
|
* 删除3DTiles(测试)
|
|
|
* @author LiuMengxiang
|
|
|
* @param tiles 3DTiles实例
|
|
|
*/
|
|
|
- remove3Dtiles(tiles) {
|
|
|
- viewer.scene.primitives.remove(tiles);
|
|
|
- }
|
|
|
- }
|
|
|
+ remove3Dtiles(keys) {
|
|
|
+ if (this.viewer3DTiles[keys]) {
|
|
|
+ viewer.scene.primitives.remove(this.viewer3DTiles[keys]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 隐藏3DTiles(测试)
|
|
|
+ * @author LiuMengxiang
|
|
|
+ * @param tiles 3DTiles实例
|
|
|
+ */
|
|
|
+ hide3DTiles(keys) {
|
|
|
+ if (this.viewer3DTiles[keys]) {
|
|
|
+ this.viewer3DTiles[keys].show = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 根据首页下拉框值判断3DTiles加载状态
|
|
|
+ * @author LiuMengxiang
|
|
|
+ * @param cascaderValue 首页
|
|
|
+ */
|
|
|
+ HomeHandleChangeCascader(cascaderValue) {
|
|
|
+ if (this.$store.state.initMap) {
|
|
|
+ // 暂存首页下拉框选中值
|
|
|
+ let homeVs = [];
|
|
|
+ cascaderValue.forEach((item) => {
|
|
|
+ homeVs.push(item[0] + item[1]);
|
|
|
+ });
|
|
|
+ // 遍历所有的3Dtiles
|
|
|
+ for (let keys in this.keysByUrl) {
|
|
|
+ // 如果选中的话
|
|
|
+ if (homeVs.length > 0 && homeVs.indexOf(keys) != -1) {
|
|
|
+ this.add3DTiles(keys, true);
|
|
|
+ } else {
|
|
|
+ this.hide3DTiles(keys);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.HomeHandleChangeCascader(cascaderValue);
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
wdq