|
|
@@ -20,24 +20,36 @@ 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.addScripts(scriptObj.main).then(function() {
|
|
|
- let arr = scriptObj.plugins.map(function(src) {
|
|
|
- return that.addScripts(src);
|
|
|
- });
|
|
|
- Promise.all(arr).then(function() {
|
|
|
+ that.pushAllScripts();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ pushAllScripts() {
|
|
|
+ let that = this;
|
|
|
+ that.addScripts(scriptObj.main).then(function () {
|
|
|
+ let arr = scriptObj.plugins.map(function (src) {
|
|
|
+ return that.addScripts(src);
|
|
|
+ });
|
|
|
+ Promise.all(arr).then(function () {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (SkyScenery) {
|
|
|
that.creatMap();
|
|
|
- });
|
|
|
+ } else {
|
|
|
+ that.pushAllScripts();
|
|
|
+ }
|
|
|
});
|
|
|
});
|
|
|
+ });
|
|
|
},
|
|
|
+
|
|
|
addScripts(src) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
// 创建一个新的script标签
|
|
|
@@ -48,62 +60,194 @@ 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();
|
|
|
};
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
creatMap() {
|
|
|
- window.viewer = new SkyScenery.Viewer("skysceneryContainer", {
|
|
|
- animation: false, //是否创建动画小器件，左下角仪表
|
|
|
- baseLayerPicker: false, //是否显示图层选择器
|
|
|
- imageryProvider: new SkyScenery.SingleTileImageryProvider({
|
|
|
- url: (function createColorCanvas(color) {
|
|
|
- var width = 1,
|
|
|
- height = 1;
|
|
|
- var canvas = document.createElement("canvas");
|
|
|
- canvas.width = width;
|
|
|
- canvas.height = height;
|
|
|
- var ctx = canvas.getContext("2d");
|
|
|
- ctx.fillStyle = color;
|
|
|
- ctx.fillRect(0, 0, width, height);
|
|
|
- return canvas.toDataURL();
|
|
|
- })("#ffffff00"),
|
|
|
- rectangle: SkyScenery.Rectangle.fromDegrees(
|
|
|
- -180.0,
|
|
|
- -90.0,
|
|
|
- 180.0,
|
|
|
- 90.0
|
|
|
- )
|
|
|
- }),
|
|
|
- fullscreenButton: false, //是否显示全屏按钮
|
|
|
- geocoder: false, //是否显示geocoder小器件，右上角查询按钮
|
|
|
- homeButton: false, //是否显示Home按钮
|
|
|
- infoBox: false, //是否显示信息框
|
|
|
- sceneModePicker: false, //是否显示3D/2D选择器
|
|
|
- selectionIndicator: false, //是否显示选取指示器组件
|
|
|
- timeline: false, //是否显示时间轴
|
|
|
- navigationHelpButton: false, //是否显示右上角的帮助按钮
|
|
|
- scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
|
|
|
- infoBox: false, //是否显示点击要素之后显示的信息
|
|
|
- shouldAnimate: false //是否自动播放
|
|
|
- });
|
|
|
+ console.log("creatMap");
|
|
|
+ try {
|
|
|
+ let that = this;
|
|
|
+ window.viewer = new SkyScenery.Viewer("skysceneryContainer", {
|
|
|
+ animation: false, //是否创建动画小器件，左下角仪表
|
|
|
+ baseLayerPicker: false, //是否显示图层选择器
|
|
|
+ imageryProvider: new SkyScenery.SingleTileImageryProvider({
|
|
|
+ url: (function createColorCanvas(color) {
|
|
|
+ var width = 1,
|
|
|
+ height = 1;
|
|
|
+ var canvas = document.createElement("canvas");
|
|
|
+ canvas.width = width;
|
|
|
+ canvas.height = height;
|
|
|
+ var ctx = canvas.getContext("2d");
|
|
|
+ ctx.fillStyle = color;
|
|
|
+ ctx.fillRect(0, 0, width, height);
|
|
|
+ return canvas.toDataURL();
|
|
|
+ })("#ffffff00"),
|
|
|
+ rectangle: SkyScenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
|
|
|
+ }),
|
|
|
+ fullscreenButton: false, //是否显示全屏按钮
|
|
|
+ geocoder: false, //是否显示geocoder小器件，右上角查询按钮
|
|
|
+ homeButton: false, //是否显示Home按钮
|
|
|
+ infoBox: false, //是否显示信息框
|
|
|
+ sceneModePicker: false, //是否显示3D/2D选择器
|
|
|
+ selectionIndicator: false, //是否显示选取指示器组件
|
|
|
+ timeline: false, //是否显示时间轴
|
|
|
+ navigationHelpButton: false, //是否显示右上角的帮助按钮
|
|
|
+ scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
|
|
|
+ infoBox: false, //是否显示点击要素之后显示的信息
|
|
|
+ shouldAnimate: false, //是否自动播放
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ // 根据配置文件中的配置信息加载底图
|
|
|
+ systemConfig.imageryProviders.forEach((url) => {
|
|
|
+ that.loadTheWorldMapImage(url);
|
|
|
+ });
|
|
|
+ viewer.camera.setView({
|
|
|
+ destination: SkyScenery.Cartesian3.fromDegrees(121, 31, 30000.0), // 设置位置
|
|
|
+ orientation: {
|
|
|
+ heading: SkyScenery.Math.toRadians(0.0), // 方向
|
|
|
+ pitch: SkyScenery.Math.toRadians(-90.0), // 倾斜角度
|
|
|
+ roll: 0,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.$store.commit("createdMap", true);
|
|
|
+ return;
|
|
|
+ }, 0);
|
|
|
+ // viewer.entities.add({
|
|
|
+ // name: "点",
|
|
|
+ // position: SkyScenery.Cartesian3.fromDegrees(121.1, 31), //经纬度转世界坐标
|
|
|
+ // point: {
|
|
|
+ // show: true,
|
|
|
+ // color: SkyScenery.Color.GREEN,
|
|
|
+ // pixelSize: 20,
|
|
|
+ // outlineColor: SkyScenery.Color.YELLOW,
|
|
|
+ // outlineWidth: 3,
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // text: "这里是标签", //设置文字内容
|
|
|
+ // font: "normal 18px 楷体", //设置文字大小和字体
|
|
|
+ // fillColor: SkyScenery.Color.fromCssColorString("#00ff00"), //设置文字填充的颜色
|
|
|
+ // horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
|
|
|
+ // verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
|
|
|
+ // pixelOffset: new SkyScenery.Cartesian2(0, -20),
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // viewer.entities.add({
|
|
|
+ // position: SkyScenery.Cartesian3.fromDegrees(121.2, 31),
|
|
|
+ // billboard: {
|
|
|
+ // image: "/static/image/point.png",
|
|
|
+ // width: 48, // default: undefined
|
|
|
+ // height: 48, // default: undefined
|
|
|
+ // scale: 1.0, // default: 1.0
|
|
|
+ // show: true, // default
|
|
|
+ // horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER, // default
|
|
|
+ // verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM, // default: CENTER
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // text: "这是自定义图片", // 设置文字内容
|
|
|
+ // font: "normal 18px 楷体", // 设置文字大小和字体
|
|
|
+ // fillColor: SkyScenery.Color.fromCssColorString("#00ff00"), //设置文字填充的颜色
|
|
|
+ // horizontalOrigin: SkyScenery.HorizontalOrigin.CENTER,
|
|
|
+ // verticalOrigin: SkyScenery.VerticalOrigin.BOTTOM,
|
|
|
+ // pixelOffset: new SkyScenery.Cartesian2(0, -50),
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // let positions = [
|
|
|
+ // [121.04829640102727, 31.12735759260756],
|
|
|
+ // [121.05219953077487, 31.126058264888133],
|
|
|
+ // [121.0556573133586, 31.125143117515066],
|
|
|
+ // [121.0585577885634, 31.12489903339664],
|
|
|
+ // [121.05855842602281, 31.117437091290032],
|
|
|
+ // [121.05755469646111, 31.116865171387122],
|
|
|
+ // [121.05855867110577, 31.114567660254956],
|
|
|
+ // [121.05716503781966, 31.111412856109656],
|
|
|
+ // [121.05169919616742, 31.109414349328368],
|
|
|
+ // [121.04846566530048, 31.10731617798831],
|
|
|
+ // [121.04523257218045, 31.105074455848328],
|
|
|
+ // [121.04372646220537, 31.108713847196935],
|
|
|
+ // [121.04238895034425, 31.11239990163383],
|
|
|
+ // [121.04216536839769, 31.11503097997496],
|
|
|
+ // [121.03965751482633, 31.117141773623022],
|
|
|
+ // [121.0392664980893, 31.119247569299414],
|
|
|
+ // [121.0401584271992, 31.124267692010815],
|
|
|
+ // [121.04534263782213, 31.124207732078528],
|
|
|
+ // [121.04813004860797, 31.124919266167907],
|
|
|
+ // [121.04829640102727, 31.12735759260756],
|
|
|
+ // ];
|
|
|
+ // viewer.entities.add({
|
|
|
+ // name: "立体墙效果",
|
|
|
+ // wall: {
|
|
|
+ // positions: positions.map(function (item) {
|
|
|
+ // return SkyScenery.Cartesian3.fromDegrees(item[0], item[1]);
|
|
|
+ // }),
|
|
|
+ // // 设置高度
|
|
|
+ // maximumHeights: new Array(positions.length).fill(100),
|
|
|
+ // minimumHeights: new Array(positions.length).fill(0),
|
|
|
+ // material: new SkyScenery.DynamicWallMaterialProperty({
|
|
|
+ // color: SkyScenery.Color.fromCssColorString("#00c4ff80"),
|
|
|
+ // trailImage: "/static/image/color.png",
|
|
|
+ // duration: 3000,
|
|
|
+ // }),
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // viewer.entities.add({
|
|
|
+ // name: " 面",
|
|
|
+ // polygon: {
|
|
|
+ // hierarchy: {
|
|
|
+ // positions: SkyScenery.Cartesian3.fromDegreesArray(
|
|
|
+ // positions
|
|
|
+ // .join(",")
|
|
|
+ // .split(",")
|
|
|
+ // .map(function (num) {
|
|
|
+ // return Number(num);
|
|
|
+ // })
|
|
|
+ // ),
|
|
|
+ // },
|
|
|
+ // material: new SkyScenery.ImageMaterialProperty({
|
|
|
+ // image: "/static/image/b2.png", // 图片路径
|
|
|
+ // transparent: true, // 是否透明
|
|
|
+ // }),
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ } catch (error) {
|
|
|
+ console.log("createMap error:", error);
|
|
|
+ window.location.reload();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载天地图底图
|
|
|
+ * @author LiuMengxiang
|
|
|
+ * 加载影像底图和影像注记
|
|
|
+ */
|
|
|
+ loadTheWorldMapImage(url) {
|
|
|
+ if (url.indexOf("//t0.") != -1) {
|
|
|
+ url = url.replace("//t0.", "//t{s}.");
|
|
|
+ }
|
|
|
viewer.imageryLayers.addImageryProvider(
|
|
|
- new SkyScenery.CGCS2000ArcGisMapServerImageryProvider({
|
|
|
+ new SkyScenery.WebMapTileServiceImageryProvider({
|
|
|
url:
|
|
|
- "http://10.235.245.174:10092/proxy/?servertype=air_2023&proxyToken=622067E9-93E5-D8EC-E677-85B58A63C0C7"
|
|
|
+ url +
|
|
|
+ "?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
|
|
|
+ systemConfig.tdt_tk,
|
|
|
+ layer: "img",
|
|
|
+ style: "default",
|
|
|
+ tileMatrixSetID: "w",
|
|
|
+ format: "image/jpeg",
|
|
|
+ subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
|
|
|
+ show: true,
|
|
|
+ minimumLevel: 1,
|
|
|
+ maximumLevel: 18,
|
|
|
})
|
|
|
);
|
|
|
viewer.camera.setView({
|
|
|
@@ -308,7 +452,51 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 加载3Dtitles
|
|
|
+ * @author LiuMengxiang
|
|
|
+ * @param {*} url 3Dtitles的url地址
|
|
|
+ * @param {*} flyto 是否自动飞行到3Dtitles
|
|
|
+ */
|
|
|
+ add3DTiles(url, flyto) {
|
|
|
+ let tileset = new SkyScenery.Cesium3DTileset({
|
|
|
+ url: url + "/tileset.json",
|
|
|
+ // "?servertype=OJK_BUILD&token=65463DEE-620A-0ED5-2385-17ECD07CD351",
|
|
|
+ // url: url + "/tileset.json",
|
|
|
+ skipLevelOfDetail: true, //开启跳级加载
|
|
|
+ maximumScreenSpaceError: 16,
|
|
|
+ maximumNumberOfLoadedTiles: 2000,
|
|
|
+ maximumMemoryUsage: 512, //tileset可以使用的最大内存
|
|
|
+ show: true,
|
|
|
+ immediatelyLoadDesiredLevelOfDetail: true,
|
|
|
+ // showOutLine : true, // 是否使用 CESIUM_primitive_outline 扩展显示模型的轮廓。为 true 时，将显示轮廓。如果为 false，则不显示轮廓。
|
|
|
+ // debugColorizeTiles : true, // 仅用于调试。如果为 true，则为每个图块分配随机颜色。
|
|
|
+ // debugShowBoundingVolume : true, // 仅用于调试。如果为 true，则为每个图块渲染边界体积。
|
|
|
+ // debugShowContentBoundingVolume : true, // 仅用于调试。如果为 true，则为每个图块的内容渲染边界体积。
|
|
|
+ // lightColor : new SkyScenery.Cartesian3(100.0,100.0, 100.0), // 调整模型亮度
|
|
|
+ });
|
|
|
+ viewer.scene.primitives.add(tileset);
|
|
|
+ if (flyto) {
|
|
|
+ tileset.readyPromise.then(function () {
|
|
|
+ viewer.zoomTo(tileset);
|
|
|
+ // //笛卡尔转换为弧度
|
|
|
+ // var cartographic = SkyScenery.Cartographic.fromCartesian(tileset.boundingSphere.center)
|
|
|
+ //
|
|
|
+ // var lng = SkyScenery.Math.toDegrees(cartographic.longitude) //使用经纬度和弧度的转换，将WGS84弧度坐标系转换到目标值，弧度转度
|
|
|
+ // var lat = SkyScenery.Math.toDegrees(cartographic.latitude)
|
|
|
+ // //计算中心点位置的地表坐标
|
|
|
+ // var surface = SkyScenery.Cartesian3.fromDegrees(lng, lat, 0.0)
|
|
|
+ // //偏移后的坐标
|
|
|
+ // var offset = SkyScenery.Cartesian3.fromDegrees(lng + 0.0044, lat - 0.0021, 0)
|
|
|
+ // var translation = SkyScenery.Cartesian3.subtract(offset, surface, new SkyScenery.Cartesian3())
|
|
|
+ // tileset.modelMatrix = SkyScenery.Matrix4.fromTranslation(translation)
|
|
|
+ // console.log(translation)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return tileset;
|
|
|
+ },
|
|
|
}
|
|
|
};
|
|
|
</script>
|
wdq
DESKTOP-6LTVLN7\Liumouren
