From 94c4faad963bf6dc92e544ddaeb8297cc5fd0c21 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 02 Jun 2021 16:52:03 +0800
Subject: [PATCH] 中间搜索样式
---
index.html | 398 +++++++++++++++++++++++++++++++-------------------------
1 files changed, 218 insertions(+), 180 deletions(-)
diff --git a/index.html b/index.html
index 229999e..d3a0579 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> -->
<!--jquery引用-->
@@ -116,10 +116,27 @@
.index_query {
position: absolute;
- left: 45%;
+ left: 42%;
top: 60px;
z-index: 999;
- width: 260px;
+ width: 300px;
+ /* border: 1px seagreen solid; */
+ display: flex;
+ align-items: center;
+ background-color: #fff;
+ border-radius: 6px 6px 6px 6px;
+ }
+
+ .input-font {
+ /* width: 3rem; */
+ height: 35px;
+ /* color: #fff; */
+ display: flex;
+ font-size: 16px;
+ align-items: center;
+ justify-content: center;
+ border-right: 1px solid rgba(0, 0, 0, .2);
+ cursor:pointer
}
#mh_query li {
@@ -154,12 +171,13 @@
outline: 0;
float: left;
border: none;
- box-shadow: 0 2px 6px #3a3c42;
+ /* box-shadow: 0 2px 6px #3a3c42; */
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
- color: #fff;
- background-color: rgba(63, 72, 84, .7);
+ color: #000;
+ /* background-color: rgba(63, 72, 84, .7); */
border: none;
+ border-radius: 0px 5px 5px 0px;
}
input::-webkit-input-placeholder {
@@ -171,6 +189,7 @@
right: 0;
height: 35px;
cursor: pointer;
+ /* border-radius: 0px 0px 5px 5px; */
}
.cesium-viewer-toolbar {
@@ -188,204 +207,223 @@
z-index: 213 !important;
}
</style>
- <link rel="stylesheet" type="text/css" href="jimu.js/loading/loading.css"/>
+ <link rel="stylesheet" type="text/css" href="jimu.js/loading/loading.css" />
</head>
<body class="claro jimu-main-font">
-<div id="main-loading">
- <div id="app-loading"></div>
- <div id="loading-gif"></div>
- <div id="ie-note" style="display:none;">
- <div class="hint-title">Error</div>
- <div class="hint-img">Your browser is currently not supported.</div>
- <p class="hint-text">
- <span>
- 推荐chorome浏览器
- </span>
- </p>
+ <div id="main-loading">
+ <div id="app-loading"></div>
+ <div id="loading-gif"></div>
+ <div id="ie-note" style="display:none;">
+ <div class="hint-title">Error</div>
+ <div class="hint-img">Your browser is currently not supported.</div>
+ <p class="hint-text">
+ <span>
+ 推荐chorome浏览器
+ </span>
+ </p>
+ </div>
</div>
-</div>
-<div id="main-page">
- <div id="jimu-layout-manager"></div>
+ <div id="main-page">
+ <div id="jimu-layout-manager"></div>
- <div class="index_query">
- <div>
+ <div class="index_query">
+ <!-- <div>
<input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm"
placeholder="输入关键字以搜索"/>
<img class="input_img" src="images/query.png">
</div>
- <div id="mh_query"></div>
+ <div id="mh_query"></div> -->
+ <div id="i-f-gjz" class="input-font"
+ style="border-radius: 5px 0 0px 5px;width:4.7rem;background-color: #3E9FFC;color: #fff;">关键字</div>
+ <div id="i-f-zb" class="input-font" style="width:3.5rem">坐标</div>
+ <!-- <input type="text" placeholder="输入关键字以搜索" class="input-sm /> -->
+ <input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm"
+ placeholder="输入关键字以搜索" />
+ <img class="input_img" src="images/query.png">
+ </div>
+
</div>
-
-</div>
-<script src="env.js"></script>
+ <script src="env.js"></script>
-<script type="text/javascript" src="simpleLoader.js"></script>
-<!-- <script type="module">
+ <script type="text/javascript" src="simpleLoader.js"></script>
+ <!-- <script type="module">
window.CESIUM_BASE_URL = 'http://localhost:8081/gzsw3D/libs/Source';
import * as Cesium from './libs/Source/Cesium.js';
window.Cesium = Cesium;
</script> -->
-<script type="text/javascript" src="init.js"></script>
-<script>
+ <script type="text/javascript" src="init.js"></script>
+ <script>
- var indData = [];
+ var indData = [];
+ //关键字和坐标点击事件
+ var states = 'gjz';
+ $("#i-f-gjz").click(function () {
+ console.log("gjz");
+ $("#i-f-zb").css({'backgroundColor': '#fff','color': '#000'});
+ $("#i-f-gjz").css({'backgroundColor': '#3E9FFC','color': '#fff'});
+ })
+ $("#i-f-zb").click(function () {
+ console.log("zb");
+ $("#i-f-gjz").css({'backgroundColor': '#fff','color': '#000'});
+ $("#i-f-zb").css({'backgroundColor': '#3E9FFC','color': '#fff'});
+ })
+ //搜索点击事件
+ $(".input_img").click(function () {
+ var query = $("#local_data").val();
- //搜索点击事件
- $(".input_img").click(function () {
- var query = $("#local_data").val();
-
- var data = {
- "queryMode": "SqlQuery",
- "bounds": {"leftBottom": {"x": 0, "y": 0}, "rightTop": {"x": 100, "y": 100}},
- "distance": 1,
- "queryParameters": {
- "queryParams": [
- {"attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOIYY@data"},
- {"attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOIJD@data"},
- {"attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOIXZQ@data"},
- {"attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOISFZ@data"},
- {"attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOISM@data"},
- {"attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOIXX@data"}
- ],
- "startRecord": 0,
- "expectCount": 20,
- "networkType": "LINE",
- "queryOption": "ATTRIBUTEANDGEOMETRY"
- },
- "keywords": "",
- "spatialQueryMode": "INTERSECT"
- };
-
- var datas = JSON.stringify(data);
-
-
- $.ajax({
- url: 'http://61.131.223.3:8090/iserver/services/map-WLPOI/rest/maps/WLPOI/queryResults.json?returnPostAction=true&getMethodForm=true&returnContent=true',
- data: datas,
- type: "POST",
- success: function success(res) {
-
- var dataList = [];
-
- var index = 0;
-
- for (var i = 0; i < res.recordsets.length; i++) {
- for (var j = 0; j < res.recordsets[i].features.length; j++) {
- var data = {};
- if (i == 1) {
- data.id = index;
- index ++;
- data.mc = res.recordsets[i].features[j].fieldValues[3];
- data.type = res.recordsets[i].features[j].fieldValues[2];
- data.x = res.recordsets[i].features[j].fieldValues[4];
- data.y = res.recordsets[i].features[j].fieldValues[5];
- } else {
- data.id = index;
- index ++;
- data.mc = res.recordsets[i].features[j].fieldValues[17];
- data.type = res.recordsets[i].features[j].fieldValues[16];
- data.x = res.recordsets[i].features[j].fieldValues[4];
- data.y = res.recordsets[i].features[j].fieldValues[5];
- }
-
- dataList.push(data);
- }
- }
-
- indData = dataList;
-
- window.viewer.entities.removeAll();
-
- $("#mh_query").html("");
- if (query == "") {
- $("#mh_query").html("");
- } else {
- for (var i = 0; i < dataList.length; i++) {
- $("#mh_query").append("<li id='" + i + "'><p><span>" + (i + 1) + '、' +
- dataList[i].mc + "</span></p></li>");
- }
- addPoint(indData);
- }
- $("#mh_query").append(html);
-
- //添加景点li点击事件，地图定位
- $('#mh_query li').click(function () {
- // var selectItem = this.innerText.trim();
- // selectItem = selectItem.split("、")[1];
- var ids = $(this).attr("id");
-
- $("#mh_query").html("");
-
- window.viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(Number(indData[ids].x), Number(indData[ids].y), 500)
- });
- });
- }
- });
- });
-
- function addPoint(result) {
- for (var i = 0; i < result.length; i++) {
- var imgs = "./widgets/Scenic/img/street.png";
- // if (result[i].ckey == "scenic") {
- // imgs = "./widgets/Scenic/img/scenic.png";
- // } else if (result[i].ckey == "viewpoint") {
- // imgs = "./widgets/Scenic/img/viewpoint.png";
- // } else if (result[i].ckey == "town") {
- // imgs = "./widgets/Scenic/img/town.png";
- // } else if (result[i].ckey == "street") {
- // imgs = "./widgets/Scenic/img/street.png";
- // } else if (result[i].ckey == "ancient") {
- // imgs = "./widgets/Scenic/img/ancient.png";
- // } else if (result[i].ckey == "delicacy") {
- // imgs = "./widgets/Scenic/img/delicacy.png";
- // } else if (result[i].ckey == "shopping") {
- // imgs = "./widgets/Scenic/img/shopping.png";
- // } else if (result[i].ckey == "stay") {
- // imgs = "./widgets/Scenic/img/stay.png";
- // } else if (result[i].ckey == "toilet") {
- // imgs = "./widgets/Scenic/img/toilet.png";
- // } else if (result[i].ckey == "parking") {
- // imgs = "./widgets/Scenic/img/parking.png";
- // } else if (result[i].ckey == "recreation") {
- // imgs = "./widgets/Scenic/img/recreation.png";
- // } else if (result[i].ckey == "other") {
- // imgs = "./widgets/Scenic/img/other.png";
- // }
-
- window.viewer.entities.add({
- id: result[i].id + "jd",
- position: Cesium.Cartesian3.fromDegrees(Number(result[i].x), Number(result[i].y), 0),
- label: {
- text: result[i].mc,
- font: "700 16px '黑体'",
- fillColor: Cesium.Color.PALETURQUOISE,
- outlineColor: Cesium.Color.BLACK,
- outlineWidth: 2,
- style: Cesium.LabelStyle.FILL_AND_OUTLINE,
- horizontalOrigin: Cesium.HorizontalOrigin.TOP,
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- pixelOffset: new Cesium.Cartesian2(0, -9),
- pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
+ var data = {
+ "queryMode": "SqlQuery",
+ "bounds": { "leftBottom": { "x": 0, "y": 0 }, "rightTop": { "x": 100, "y": 100 } },
+ "distance": 1,
+ "queryParameters": {
+ "queryParams": [
+ { "attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOIYY@data" },
+ { "attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOIJD@data" },
+ { "attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOIXZQ@data" },
+ { "attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOISFZ@data" },
+ { "attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOISM@data" },
+ { "attributeFilter": "MC like '%" + query + "%' ", "name": "WLPOIXX@data" }
+ ],
+ "startRecord": 0,
+ "expectCount": 20,
+ "networkType": "LINE",
+ "queryOption": "ATTRIBUTEANDGEOMETRY"
},
- billboard: {
- image: imgs,
- scale: 0.8,
- width: 30,
- height: 35,
- pixelOffset: new Cesium.Cartesian2(0, 0),
- // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ "keywords": "",
+ "spatialQueryMode": "INTERSECT"
+ };
+
+ var datas = JSON.stringify(data);
+
+
+ $.ajax({
+ url: 'http://61.131.223.3:8090/iserver/services/map-WLPOI/rest/maps/WLPOI/queryResults.json?returnPostAction=true&getMethodForm=true&returnContent=true',
+ data: datas,
+ type: "POST",
+ success: function success(res) {
+
+ var dataList = [];
+
+ var index = 0;
+
+ for (var i = 0; i < res.recordsets.length; i++) {
+ for (var j = 0; j < res.recordsets[i].features.length; j++) {
+ var data = {};
+ if (i == 1) {
+ data.id = index;
+ index++;
+ data.mc = res.recordsets[i].features[j].fieldValues[3];
+ data.type = res.recordsets[i].features[j].fieldValues[2];
+ data.x = res.recordsets[i].features[j].fieldValues[4];
+ data.y = res.recordsets[i].features[j].fieldValues[5];
+ } else {
+ data.id = index;
+ index++;
+ data.mc = res.recordsets[i].features[j].fieldValues[17];
+ data.type = res.recordsets[i].features[j].fieldValues[16];
+ data.x = res.recordsets[i].features[j].fieldValues[4];
+ data.y = res.recordsets[i].features[j].fieldValues[5];
+ }
+
+ dataList.push(data);
+ }
+ }
+
+ indData = dataList;
+
+ window.viewer.entities.removeAll();
+
+ $("#mh_query").html("");
+ if (query == "") {
+ $("#mh_query").html("");
+ } else {
+ for (var i = 0; i < dataList.length; i++) {
+ $("#mh_query").append("<li id='" + i + "'><p><span>" + (i + 1) + '、' +
+ dataList[i].mc + "</span></p></li>");
+ }
+ addPoint(indData);
+ }
+ $("#mh_query").append(html);
+
+ //添加景点li点击事件，地图定位
+ $('#mh_query li').click(function () {
+ // var selectItem = this.innerText.trim();
+ // selectItem = selectItem.split("、")[1];
+ var ids = $(this).attr("id");
+
+ $("#mh_query").html("");
+
+ window.viewer.camera.flyTo({
+ destination: Cesium.Cartesian3.fromDegrees(Number(indData[ids].x), Number(indData[ids].y), 500)
+ });
+ });
}
});
+ });
+
+ function addPoint(result) {
+ for (var i = 0; i < result.length; i++) {
+ var imgs = "./widgets/Scenic/img/street.png";
+ // if (result[i].ckey == "scenic") {
+ // imgs = "./widgets/Scenic/img/scenic.png";
+ // } else if (result[i].ckey == "viewpoint") {
+ // imgs = "./widgets/Scenic/img/viewpoint.png";
+ // } else if (result[i].ckey == "town") {
+ // imgs = "./widgets/Scenic/img/town.png";
+ // } else if (result[i].ckey == "street") {
+ // imgs = "./widgets/Scenic/img/street.png";
+ // } else if (result[i].ckey == "ancient") {
+ // imgs = "./widgets/Scenic/img/ancient.png";
+ // } else if (result[i].ckey == "delicacy") {
+ // imgs = "./widgets/Scenic/img/delicacy.png";
+ // } else if (result[i].ckey == "shopping") {
+ // imgs = "./widgets/Scenic/img/shopping.png";
+ // } else if (result[i].ckey == "stay") {
+ // imgs = "./widgets/Scenic/img/stay.png";
+ // } else if (result[i].ckey == "toilet") {
+ // imgs = "./widgets/Scenic/img/toilet.png";
+ // } else if (result[i].ckey == "parking") {
+ // imgs = "./widgets/Scenic/img/parking.png";
+ // } else if (result[i].ckey == "recreation") {
+ // imgs = "./widgets/Scenic/img/recreation.png";
+ // } else if (result[i].ckey == "other") {
+ // imgs = "./widgets/Scenic/img/other.png";
+ // }
+
+ window.viewer.entities.add({
+ id: result[i].id + "jd",
+ position: Cesium.Cartesian3.fromDegrees(Number(result[i].x), Number(result[i].y), 0),
+ label: {
+ text: result[i].mc,
+ font: "700 16px '黑体'",
+ fillColor: Cesium.Color.PALETURQUOISE,
+ outlineColor: Cesium.Color.BLACK,
+ outlineWidth: 2,
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+ horizontalOrigin: Cesium.HorizontalOrigin.TOP,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ pixelOffset: new Cesium.Cartesian2(0, -9),
+ pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
+ },
+ billboard: {
+ image: imgs,
+ scale: 0.8,
+ width: 30,
+ height: 35,
+ pixelOffset: new Cesium.Cartesian2(0, 0),
+ // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ }
+ });
+ }
+
}
- }
-
-</script>
+ </script>
</body>
+
</html>
\ No newline at end of file
--
Gitblit v1.9.3