PHP与SQL通信小结--实现cesium搜索调用mongoDB数据

最新推荐文章于 2024-01-25 19:14:08 发布

曾小鱼一号

最新推荐文章于 2024-01-25 19:14:08 发布

阅读量965

点赞数 1

分类专栏：学习总结文章标签： PHP SQL AJAX

本文链接：https://blog.csdn.net/qq_31121227/article/details/83411230

版权

学习同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

总结

12 篇文章 0 订阅

订阅专栏

经过两个月的摸索，这条路算是走明白了

https://blog.csdn.net/qq_31121227/article/details/82150737 SQL学习笔记04_Mongo搜索地理位置数据

以下是正文

第一步数据导入的MongoDB

C:\Users\dell>cd C:\Program Files\MongoDB\Server\4.0\bin

 //-d [数据库名称] -c [新建表格名] -type [导入数据类型] [导入文件地址]
..\bin>mongoimport -d test -c json --type json C:/Users/dell/Desktop/MongoDB/geojson.json

以GeoJSON的注意事项

以以GeoJSON的文件通过塑造文件转换得到，

然后删除生成JSON文件的前四行和最后两行

{
“_ id”：ObjectId（“5b83de57013ba150921eb001”），
“type”：“FeatureCollection”，
“features”：[
......
......
......
]
}
---- - ----------------
作者：娘娘怪
来源：CSDN
原文：HTTPS：//blog.csdn.net/qq_31121227/article/details/82150737
版权声明：本文为博主原创文章，转载请附上博文链接！

第二步PHP连接MongDB，搜索

PHP扩展插件forMongoDB

两个一个，访问主页：intro_Cesium_test.php;

异步执行文件：Intro_Cesium_test2.php;//搜索点

Intro_Cesium_test3.php;//搜索面

1主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>intro_Cesium_test.php</title>
    <link rel="stylesheet" type="text/css" href="Database&&API/css/app.css">
    <link rel="stylesheet" href="css/myStyle.css" type="text/css">
    <!-- jquery -->
    <script src="js/jquery.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Cesium -->
    <script src="Cesium/Cesium.js"></script>
    <style>
        @import url(Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
      /*去掉底部logo*/
      .cesium-widget-credits{ 
          display:none!important; 
          visibility:hide!important; 
        }
    </style>
    <!-- 自定义 -->
    <style>
        .map {
          position: absolute;
          height: 90%;
          width: 100%;
        }
        .color{
          color: #3ddb0da6;
        }
        .search01{
            position: fixed;
            background-color:rgba(216, 207, 207, 1);
            left: 5%;
            bottom: 18%;
            width: 40%;
            height: 50%;
            border: #080202 solid 5px;
            display: none;
        } 
        .shell1{
            position: fixed;
            background-color:rgba(216, 207, 207, 1);
            left: 5%;
            bottom: 12%;
            width: auto;
            height: auto;
            border: #080202 solid 3px;
        } 
        .shell2{
            position: fixed;
            background-color:rgb(112, 110, 110);
            left: 5%;
            bottom: 16%;
            width: auto;
            height: auto;
            margin:5px;
            padding:20px;
        } 
        .shell3{
            position: fixed;
            background-color:rgba(216, 207, 207, 1);
            right: 5%;
            bottom: 16%;
            width: auto;
            height: auto;
            margin:5px;
            padding:20px;
            border: #080202 solid 3px;
        } 
    </style>
</head>
<body style="height:100%;">
<div id="cesiumContainer">
        <!--地图主体-->
        <script>
            var viewer = new Cesium.Viewer('cesiumContainer', {
                animation: true, //是否显示动画控件(左下方那个)
                baseLayerPicker: true, //是否显示图层选择控件
                //如果未提供第一个可用基础图层，则使用当前基础图像图层的视图模型。
                //仅当options.baseLayerPicker设置为true时，此值才有效。
                selectedImageryProviderViewModel: new Cesium.ProviderViewModel({
                    name: 'Open\u00adStreet\u00adMap',
                    iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
                    tooltip: 'OpenStreetMap (OSM) is a collaborative project to create a free editable \
              map of the world.\nhttp://www.openstreetmap.org',
                    creationFunction: function () {
                        return Cesium.createOpenStreetMapImageryProvider({
                            url: 'https://a.tile.openstreetmap.org/'
                        });
                    }
                }),
                geocoder: true, //是否显示地名查找控件
                timeline: true, //是否显示时间线控件
                sceneModePicker: true, //是否显示投影方式控件
                navigationHelpButton: false, //是否显示帮助信息控件
                infoBox: true, //是否显示点击要素之后显示的信息
            });
            /*设置初始位置*/
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(121.421480, 31.192109, 2000), // 设置位置
                orientation: {
                    heading: Cesium.Math.toRadians(30.0), // 方向
                    pitch: Cesium.Math.toRadians(-60.0),// 倾斜角度
                    roll: 0
                }
            });
        </script>
    </div>
    <div class="shell3">
        <div class="btn-group">
            <!--通过form表单搜索 -->
            <form method="post">
                <div>输入搜索的内容:</div>
                <input type="text" id="searchmongo1" name="topicmongo1" autocomplete="off" placeholder="序号" /><br />
                <input type="text" value="10" id="searchmongo2" name="topicmongo2" autocomplete="off" placeholder="范围" /><br />
                <h4>
                    <button type="button" id="buttonmongo1" class="btn btn-default">搜索点</button>
                    <button type="button" id="buttonmongo3" class="btn btn-default">搜索面</button>
                    <button type="button" id="buttonmongo2" class="btn btn-default">关闭</button>
                </h4>
            </form>
        </div>
    </div>
    <div class="AA" style="display: none;">
        <h2 >
            MongoDB<br />
        </h2>
        <p class="AC" >   
        </p>
    </div>
</body>

</html>

<script type="text/javascript" >
        $(function(){//==$(document).ready(function(){
            $('button#buttonmongo2').click(function () {
                $(".AA").css('display', 'none');
                viewer.entities.removeAll();
                viewer.dataSources.removeAll();
            });
            $('button#buttonmongo1').click(function(event) {
                $('.AA').css('display','block');
                event.stopPropagation();
                $.ajax({
                    url: "Intro_Cesium_test2.php",    //  请求路径
                    type: "post", //请求方式
                    data: $("form").serialize(),//请求参数
                    success: function(responseText,status,xhr){//异步执行成功执行的回调函数
                        if (responseText != ''){
                            $('.AC').css("background-color","pink");//搜索框下拉
                            $('.AC').html(responseText);//地图上打标志
                        } else {
                            $('.AC').html("<li>没有搜索到</li>");
                        }
                    }
                })
                .done(function() {
                    console.log("success");
                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
            });
        });
</script>

2异步执行文件

Intro_Cesium_test2.php;//搜索点

<?php  
        /*链接.开始*/
            header("content-type:text/html;charset=utf-8"); 
            $manager = new MongoDB\Driver\Manager("mongodb://localhost:27017"); 
        /*链接.结束*/
        /*查询.开始*/ 
            $searchID = $_POST['topicmongo1'];
            $floatID = (int)$searchID;
            $searchRange = (int)$_POST['topicmongo2'];   
            $filter = ['properties.OBJECTID' => ['$gt' => $floatID-$searchRange,'$lt' => $floatID+$searchRange]];
            $options = [
                'projection' => ['_id' => 0],//输出_id字段
                'sort' => ['properties.OBJECTID' => 1],//根据user_id字段排序 1是升序，-1是降序
            ];
            //查询数据
            $query = new MongoDB\Driver\Query($filter, $options);
            // 执行查询 test数据库下的runoob集合
            $cursor = $manager->executeQuery('test.geojsonwutou', $query);
            // foreach ($cursor as $document) {
            //     print_r($document);                
            //     echo "$searchname<br />";  
            // }
            $iterator = new IteratorIterator($cursor);
        
            $iterator->rewind();//将迭代器倒回到第一个元素
            $i = 1;
echo<<<BCD
        <script>      
        viewer.entities.removeAll();
        </script>
BCD;
            echo '<h5>';
            echo $floatID-$searchRange;
            echo  ' < OBJECTID < ';
            echo $floatID+$searchRange;
            echo "</h5>";
            echo '<table border="1"><tr><td>&nbspID&nbsp</td><td>&nbsptype&nbsp</td><td>&nbspOBJECTID&nbsp</td><td>&nbspcoordinates</td></tr>';
            while ($iterator->valid()) {                                
                    $document = $iterator->current();
                    $TYPE = $document->geometry->type;
                    $OBJECTID = $document->properties->OBJECTID;
                    $COORDINATE = $document->geometry->coordinates;
                    $COORDINATE_str = implode(',',$COORDINATE);  //使用需要的符号替换
                                /*%c,%d,%s与后面的c,i,s对应的，
                                    %c是表示以字符格式输出c，
                                    %d表示以整数形式输出i，
                                    %s表示以字符串形式输出s，最后的\n是换行符
                                */                   
                    echo '<tr><td class="aa" >' .
                    " &nbsp$i&nbsp </td> ".
                    "<td>&nbsp $TYPE &nbsp</td> ".
                    "<td>&nbsp $OBJECTID &nbsp</td> ".
                    "<td>&nbsp $COORDINATE_str &nbsp</td> ".
                    "</tr>";                
                $i++;
                $iterator->next(); 
echo<<<ABC
            <script>           
              function addPoint() {
                viewer.entities.add({
                    position : Cesium.Cartesian3.fromDegrees($COORDINATE_str),
                    point : {
                        pixelSize : 10,
                        color : Cesium.Color.YELLOW
                    }
                }); 
            }
            addPoint();
            </script>        
ABC;                                  
            }
            echo '</table>';
        /*查询.结束*/

     
?>

Intro_Cesium_test3.php;//搜索点

<?php  
        header("content-type:text/html;charset=utf-8");
        $manager = new MongoDB\Driver\Manager("mongodb://localhost:27017"); 
        set_time_limit(0);
            $searchid = $_POST['topicmongo1'];
            $floatid = (int)$searchid;
            $searchRange = (int)$_POST['topicmongo2'];
            $RGB_R = $searchRange*2.55 ;
            $RGB_a = (100-$searchRange)/2.5 ;
            $filter = ['properties.objectid' => ['$gt' => $floatid-$searchRange,'$lte' => $floatid]];
            $options = [
                'projection' => ['_id' => 0],//输出_id字段
                'sort' => ['properties.objectid' => 1],//根据user_id字段排序 1是升序，-1是降序
            ];
            $query = new MongoDB\Driver\Query($filter, $options);
            $cursor = $manager->executeQuery('test.osmjiada', $query);
            $iterator = new IteratorIterator($cursor);
            $iterator->rewind();//将迭代器倒回到第一个元素
            $i = 1;
            $n = 0;
            echo '<h5>';
            echo $floatid-$searchRange;
            echo  ' < objectid <= ';
            echo $floatid;
            echo "</h5>";
            echo '<table border="1"><tr><td>&nbspID&nbsp</td><td>&nbsptype&nbsp</td><td>&nbspobjectid&nbsp</td><td>&nbspcoordinates</td></tr>';
            while ($iterator->valid()) {
                $m = 1;
                $mm = 1;
                    $document = $iterator->current();
                    $type = $document->geometry->type;
                    $objectid = $document->properties->objectid;
                    $COORDINATE = $document->geometry->coordinates;
                    echo '<tr><td class="aa" >' .
                    " &nbsp$i&nbsp </td> ".
                    "<td>&nbsp $type &nbsp</td> ".
                    "<td>&nbsp $objectid &nbsp</td> ".
                    "<td>&nbsp ";
                    foreach($COORDINATE[0] as $x ) 
                    { 
                        $mx = count($COORDINATE[0]);
                        $xstr = implode(',',$x);
                        if($m < $mx){
                            // echo   "<br/>".$m."/".$mx."<br/>";
                            echo   $xstr.",0,"."<br/>" ;
                            
                            $m++;
                        }else{
                            echo  $xstr.",0";
                        }
                        
                    } 
                    echo "&nbsp</td> ";
                    "</tr>";
                $i++;
                $iterator->next(); 
echo<<<ABC
           <script>
           viewer.entities.removeAll();
            var czml$i = [{
                "id" : "document",
                "name" : $objectid,
                "version" : "1.0"
            }, {
                "id" : "orangePolygon",
                "name" : $objectid,
                "polygon" : {
                    "positions" : {
                        "cartographicDegrees" : [
ABC;
                            foreach($COORDINATE[0] as $x ) 
                            { 
                                $mx = count($COORDINATE[0]);
                                $xstr = implode(',',$x);
                                if($mm < $mx){
                                    // echo   "<br/>".$m."/".$mx."<br/>";
                                    echo   $xstr.",0," ;
                                    
                                    $mm++;
                                }else{
                                    // echo   "<br/>".$m."/".$mx."<br/>";
                                    echo  $xstr.",0";
                                }
                                
                            }

echo<<<BCD
                        ]
                    },
                    "material" : {
                        "solidColor" : {
                            "color" : {
                                "rgba" : [$RGB_R, 0, 0, $RGB_a]
                            }
                        }
                    },
                    "extrudedHeight" : 100,
                    "perPositionHeight" : true,
                    "outline" : true,
                    "outlineColor" : {
                        "rgba" : [0, 0, 0, 255]
                    }
                }
            }];

            var dataSourcePromise$i = Cesium.CzmlDataSource.load(czml$i);
            viewer.dataSources.add(dataSourcePromise$i);
           </script>        
BCD;           
            }
            echo '</table>';
        /*查询.结束*/

     
?>