|
|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <div id="cesium-container" style="width: 100%; height: 100%;background: none;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ iconList,
|
|
|
+ } from '@/api/components/supermap.js'
|
|
|
+ export default {
|
|
|
+ name: 'sookaSuperMap',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ viewer:null,
|
|
|
+ scene:null,
|
|
|
+ handler:null,
|
|
|
+
|
|
|
+ pick:null,
|
|
|
+ back_position:null,
|
|
|
+ content:null,
|
|
|
+ stkTerrainProvider:null,
|
|
|
+ /*************************原地图属性*********************/
|
|
|
+ isEditableLayers: false, //绘图控件
|
|
|
+
|
|
|
+ /*************************原地图属性*********************/
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.viewer = new Cesium.Viewer('cesium-container')
|
|
|
+ //添加SuperMap iServer发布的影像服务
|
|
|
+ // var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
+ // url: 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace'
|
|
|
+ // }));
|
|
|
+ // //添加SuperMap iServer发布的影像服务
|
|
|
+ // var layer1 = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
|
|
|
+ // url: 'http://121.36.228.94:8090/iserver/services/map-spyx4326/rest/maps/dem'
|
|
|
+ // }));
|
|
|
+
|
|
|
+ this.scene = this.viewer.scene;
|
|
|
+ this.scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
|
|
|
+ var urlStr = 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace';
|
|
|
+ this.scene.open(urlStr);
|
|
|
+
|
|
|
+ //将三维球定位到指定位置，camera是相机，是当前视野范围相机
|
|
|
+ //destination是相机的目标位置，参数是经度、纬度、高度
|
|
|
+ //orientation是相机朝向
|
|
|
+ // heading-代表镜头左右方向,正值为右,负值为左
|
|
|
+ // pitch-代表镜头上下方向,正值为上,负值为下.
|
|
|
+ // roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
|
|
|
+ this.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(124.5465087890625, 43.0869197845459, 25000),
|
|
|
+ orientation: {
|
|
|
+ heading : Cesium.Math.toRadians(348.4202942851978),
|
|
|
+ pitch : Cesium.Math.toRadians(-30.74026687972041),
|
|
|
+ roll : Cesium.Math.toRadians(0)
|
|
|
+ },
|
|
|
+ complete:function callback() {
|
|
|
+ // 定位完成之后的回调函数
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ methods: {
|
|
|
+ //移除之前添加的点
|
|
|
+ clearM(){
|
|
|
+ this.viewer.entities.removeAll();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 地图落点
|
|
|
+ */
|
|
|
+ setMarkers(makerList){
|
|
|
+ let that = this;
|
|
|
+ that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
|
|
|
+
|
|
|
+ for (let i in makerList) {
|
|
|
+ let longitude = makerList[i].lng;
|
|
|
+ let latitude = makerList[i].lat;
|
|
|
+ that.viewer.entities.add({
|
|
|
+ name:"",
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
|
|
+ billboard: {
|
|
|
+ image: iconList[makerList[i].icon],
|
|
|
+ width: 48,
|
|
|
+ height: 48,
|
|
|
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
+ disableDepthTestDistance:Number.POSITIVE_INFINITY
|
|
|
+ },
|
|
|
+ description: makerList[i].bindPopupHtml,
|
|
|
+ click: makerList[i].click,
|
|
|
+ parameter: makerList[i].parameter,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ that.viewer.scene.globe.depthTestAgainstTerrain=false;
|
|
|
+ that.createLeftClickDescription();
|
|
|
+ that.createRightClickDescription();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *鼠标左击事件是原来的气泡
|
|
|
+ */
|
|
|
+ createLeftClickDescription() {
|
|
|
+ let that = this;
|
|
|
+ that.handler.setInputAction(function (movement) {
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ *鼠标右击事件是原来的点击
|
|
|
+ */
|
|
|
+ createRightClickDescription() {
|
|
|
+ let that = this;
|
|
|
+ that.handler.setInputAction(function (movement) {
|
|
|
+ // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
|
|
|
+ that.pick = that.viewer.scene.pick(movement.position);
|
|
|
+ if (that.pick && that.pick) {
|
|
|
+ let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(movement.position).primitive.id);
|
|
|
+ let clickName = id._click;
|
|
|
+ that.$emit(clickName, id._parameter)
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 落点定位
|
|
|
+ */
|
|
|
+ dropLocation(lat, lng) {
|
|
|
+ this.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
+
|
|
|
+ input[type=checkbox] {
|
|
|
+ margin: 0px 4px 0 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ label {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-container {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleBox {
|
|
|
+ margin-bottom: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sm-div-graphic {
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #test .divpoint {
|
|
|
+ background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ width: 128px;
|
|
|
+ height: 216px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #test3 .divpoint {
|
|
|
+ background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ width: 230px;
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #test .label-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #test3 .label-wrap {
|
|
|
+ padding-left: 100px;
|
|
|
+ padding-top: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ #test .pop-title {
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 11px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ #test .data-li {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #test3 .data-li {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #test2 .divpoint {
|
|
|
+ background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ width: 116px;
|
|
|
+ height: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #test2 .label-wrap {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-left: 51px;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
JX.LI