master

分支 (2)

管理

管理

master

gis2x

nginx-cesium
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/echarts-5.4.0/echarts.min.js"></script>
    <script type="text/javascript" src="./js/echarts-gl-2.0.9/echarts-gl.min.js"></script>
    <script src="./KC/kcgis.3x.min.js"></script>
    <script src="./js/GisComp.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/xm-select.js"></script>
    <link href="./KC/kcgis.3x.min.css" type="text/css" rel="stylesheet"/>
    <script src='./data/hn.js'></script>
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="./js/statis.js"></script>
    <script src="./js/index.js"></script>
    <script type="text/javascript" src="./js/turf.min.js"></script>

    <script src="./Config/configNew.js"></script>
</head>

<body>
    <div class="btn-box" style="display: none;">
        <ul>
            <li style="width:150px;position: relative;background-color: white;">
                <div id="demo1" class="xm-select-demo selectMode" />
            </li>
        </ul>
    </div>
    <div class="btn-box1">
        <ul id="list0"/>
        <ul id="itemButton0" style="display: none;">
            <li><button onclick="gis.tracingBillboard()">描点</button></li>
            <li><button onclick="gis.showPoints()">点</button></li>
            <li><button onclick="gis.showBillboards()">图标点</button></li>
            <li><button onclick="gis.showBillboards2()">图标点(带label)</button></li>
            <li><button onclick="gis.showBillboards3()">图标点(带水波纹)</button></li>
            <li><button onclick="gis.showBillboards1()">图标点(改状态)</button></li>
            <li><button onclick="gis.showLabels()">文本点</button></li>
            <li><button onclick="gis.addDivIcons()">html点</button></li>
            <li><button onclick="gis.showfzBillboards()">gif点(分帧)</button></li>
            <li><button onclick="gis.showfzBillboards1()">gif点(分帧聚合)</button></li>
            <li><button onclick="gis.addDivIcons1()">gif点</button></li>
            <li><button onclick="gis.addCircles()">扩散圆</button></li>
            <li><button onclick="gis.addCircles1()">图标点(扩散圆)</button></li>
            <li><button onclick="gis.showClusterPoints()">(聚合)点</button></li>
            <li><button onclick="gis.showClusterBillboards1()">(聚合)图标点1</button></li>
            <li><button onclick="gis.showClusterBillboards2()">(聚合)图标点2</button></li>
            <li><button onclick="gis.showClusterBillboards3()">(聚合)图标点3</button></li>
            <li><button onclick="gis.xzClusterBillboards()">行政聚合</button></li>
            <li><button onclick="gis.addScreenLeftClickEvent()">单击事件(聚合)</button></li>
            <li><button onclick="gis.showBillboardPrimitives()">图标点(图元)</button></li>
            <li><button onclick="gis.clearLayers()">清除图层</button></li>
        </ul>
        <ul id="itemButton1" style="display: none;">
            <li><button onclick="gis.showPolyline()">线</button></li>
            <li><button onclick="gis.showPolyline1()">材质线</button></li>
            <li><button onclick="gis.showPolygons()">面</button></li>
            <li><button onclick="gis.showPolygons1()">空洞面</button></li>
            <li><button onclick="gis.showWaterPrimitive()">水面动画</button></li>
            <li><button onclick="gis.addKeyGrid()">覆盖面</button></li>
            <li><button onclick="gis.clearLayers()">清除图层</button></li>
        </ul>
        <ul id="itemButton2" style="display: none;">
            <li><button onclick="gis.addDrawing(this, 'point')">点</button></li>
            <li><button onclick="gis.addDrawing(this, 'billboard')">图标点</button></li>
            <li><button onclick="gis.addDrawing(this, 'polyline')">线</button></li>
            <li><button onclick="gis.addDrawing(this, 'polygon')">面</button></li>
            <li><button onclick="gis.addDrawing(this, 'circle')">圆</button></li>
            <li><button onclick="gis.addDrawing(this, 'rectangle')">矩形</button></li>
            <li><button onclick="gis.addDrawing(this, 'attack_arrow')">进攻箭头</button></li>
            <li><button onclick="gis.addDrawing(this, 'double_arrow')">双箭头</button></li>
            <li><button onclick="gis.addDrawing(this, 'fine_arrow')">直箭头</button></li>
            <li><button onclick="gis.addDrawing(this, 'tailed_attack_arrow')">燕尾箭头</button></li>
            <li><button onclick="gis.addDrawing(this, 'gathering_place')">聚集地</button></li>
            <li><button onclick="gis.addDrawing(this, 'html')">文本标绘</button></li>
            <li><button onclick="gis.clearLayers()">清除图层</button></li>
        </ul>
        <ul id="itemButton3" style="display: none;">
            <li><button onclick="gis.measureAndExport('distance')">测量距离</button></li>
            <li><button onclick="gis.measureAndExport('area')">测量面积</button></li>
            <li><button onclick="gis.measureAndExport('height')">测量高度</button></li>
            <li><button onclick="gis.measureAndExport('exportScene')">导出地图</button></li>
            <li><button onclick="gis.measureAndExport('clearAll')">清除测量</button></li>
        </ul>
        <ul id="itemButton4" style="display: none;">
            <li><button onclick="gis.addBoxSelection('circle')">圆形框选</button></li>
            <li><button onclick="gis.addBoxSelection('rectangle')">矩形框选</button></li>
            <li><button onclick="gis.addBoxSelection('polygon')">多边形框选</button></li>
            <li><button onclick="gis.clearLayers()">清除图层</button></li>
        </ul>
        <ul id="itemButton5" style="display: none;">
            <li><button onclick="gis.analyseGeoTools('point')">点分析</button></li>
            <li><button onclick="gis.analyseGeoTools('billboard')">图标分析</button></li>
            <li><button onclick="gis.analyseGeoTools('polyline')">线分析</button></li>
            <li><button onclick="gis.analyseGeoTools('polygon')">面分析</button></li>
            <li><button onclick="gis.clearLayers()">清除图层</button></li>
        </ul>
        <ul id="itemButton6" style="display: none;">
            <li><button onclick="gis.showBillboards()">图标点</button></li>
            <li><button onclick="gis.addTerrainLayer()">地形图层</button></li>
            <li><button onclick="gis.addWmsLayer()">区划图层wms</button></li>
            <li><button>显隐：
                    <input type="radio" name="state" checked onclick="gis.setOverlayLayer({ vis: true })"><label
                        for="xianyin">显示</label>
                    <input type="radio" name="state" onclick="gis.setOverlayLayer({ vis: false })"><label
                        for="xianyin">隐藏</label>
                </button>
            </li>
            <li><button onclick="gis.setOverlayLayer({ alpha: 0 })">透明度(0%)</button></li>
            <li><button onclick="gis.setOverlayLayer({ alpha: 0.8 })">透明度(80%)</button></li>
             <li><button onclick="initRollerShutter(-1)">云瑶影像图层</button></li>
             <li><button onclick="initRollerShutter1(-1)">云瑶影像图层1</button></li>
             <li><button onclick="initGdBaseLayer(-1)">高德底图</button></li>
             <li><button onclick="showSplitDirection()">图层分栏</button></li>
             <li><button onclick="gis.hideSplitDirection()">分栏关闭</button></li>
              <li><button onclick="initRollerShutter(1)">云瑶影像图层(右)</button></li>
              <li><button onclick="initRollerShutter1(1)">云瑶影像图层1(右)</button></li>
              <li><button onclick="initGdBaseLayer(1)">高德底图(右)</button></li>
             <li><button onclick="removeRollerShutter()">清除云瑶影像图层</button></li>
        </ul>
        <ul id="itemButton7" style="display: none;">
            <li><button onclick="gis.addTrackController()">历史轨迹</button></li>
            <li><button onclick="gis.flywireLayerShili()">网格与人虚线连接</button></li>
            <li><button onclick="gis.addTrackController1()">带model历史轨迹</button></li>
            <li><button onclick="gis.play()">播放</button></li>
            <li><button onclick="gis.addSpeed()">加速</button></li>
            <li><button onclick="gis.reduceSpeed()">减速</button></li>
            <li><button onclick="gis.clearLayers()">清除图层</button></li>
        </ul>
        <ul id="itemButton8" style="display: none;">
            <li><button onclick="gis.showHeatLayer()">热区图</button></li>
        </ul>
    </div>
    <div class="map-cesium-vue" id="cesiumBox">
        <!-- <div style="z-index: 9999; position: absolute; right: 1%; bottom: 1%;">
            <div id="kc-map-switch" class="kc-map-switch"
                style="visibility: visible;background-color: #133664;width: 60px;height: 50px;">
                <div class="map-item" :style="{ background: 'url(' + yx + ')', width: '60px', height: '50px' }">
                    <span>影像</span>
                </div>
                <div class="map-item" :style="{ background: 'url(' + sl + ')', width: '60px', height: '50px' }">
                    <span>矢量</span>
                </div>
            </div>
        </div> -->
        <div id="map" class="viewer-container" />
    </div>
</body>
    <script>
        window.onload = function () {
            window.KC =KCGIS;
            KC.ready({
            baseUrl: './KC/resources/',
            echarts: window.echarts
            }).then(()=>{
            window.Cesium = KC.NS.Cesium
            const comp = new GisComp()
            window.Comp =comp;
            comp.initMap("map", configNew.mapConfig, (viewer) => {
                MapEvent.emit('loadMap',{
                    Cesium,
                    Comp: comp,
                    viewer: viewer
                })
                viewer.on(Cesium.ScreenSpaceEventType.LEFT_CLICK, (ex) => {
                    comp.closePopUp()
                })
                viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0); //设置地球透明
				 viewer.scene.globe.depthTestAgainstTerrain = false; //关闭深度检测
				 viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1600000;
                 window.Viewer =viewer;
                  initFn(viewer, KC)
            });
            const plug = new Plug(comp)
            const gis = new GisClass({
                Plug: plug,
                Cesium: window.Cesium // 来自public的资源静态 方便替换版本
            }, {
                event: function (e) {
                    console.log(e, 'Event triggered:')
                }
            }, this)
            window.gis = gis
            });
            var demo1 = xmSelect.render({
            	el: '#demo1',
            	language: 'zn',
            	model: {
            		label: {
            			type: 'block',
            			block: {
            				//最大显示数量, 0:不限制
            				showCount: 1,
            				//是否显示删除图标
            				showIcon: true,
            			}
            		}
            	},
            	on: function(data) {
            		//arr:  当前多选已选中的数据
            		var arr = data.arr;
            		//change, 此次选择变化的数据,数组
            		var value = data.change[0].value;
            		//isAdd, 此次操作是新增还是删除
            		var isAdd = data.isAdd;
            		isAdd ? $("#itemButton" + value).show() : quxiao(value);
            	},
            	data: dataName
            })
        }
    </script>
</html>