:::success 1、加载中地地图文档
    2、调用中地的地图服务查询点要素
    3、如果查询到点要素就显示popup弹窗 :::

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <script src="../../lib/include-openlayers-local.js"></script>
    10.     <script src="../../js/Tian.js"></script>
    11.     <!-- 调用中地服务查询 -->
    12.     <!-- <script src="../../js/query.js"></script> -->
    13.     <link rel="stylesheet" href="../../css/map.css">
    14. </head>
    16. <body>
    17.     <div id="map_container">
    18.         <div id="popup" class="ol-popup">
    19.             <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    20.             <div id="popup-content">
    21.                 <h2>武汉</h2>
    22.                 <img src="../../image/location.png" />
    23.             </div>
    24.         </div>
    25.     </div>
    26.     <script>
    27.         const docLayer = new Zondy.Map.Doc('', 'smart_city', {
    28.             ip: 'localhost',
    29.             port: 6163
    30.         })
    31.         const map = new ol.Map({
    32.             target: "map_container",
    33.             layers: [TianDiMap_vec, TianDiMap_cva, docLayer],
    34.             view: new ol.View({
    35.                 center: [114, 30],
    36.                 projection: 'EPSG:4326',
    37.                 zoom: 4
    38.             })
    39.         })
    41.         /* 将DOM转化为overlay */
    42.         const popup = new ol.Overlay({
    43.             //要转换成overlay的HTML元素
    44.             element: document.querySelector('#popup'),
    45.             //当前窗口可见
    46.             autoPan: true,
    47.             //Popup放置的位置
    48.             positioning: 'bottom-center',
    49.             //是否应该停止事件传播到地图窗口
    50.             stopEvent: true,
    51.             autoPanAnimation: {
    52.                 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
    53.                 duration: 250,
    54.             },
    55.         })
    56.         map.addOverlay(popup)
    57.         map.on('click', function (e) {
    58.             var coordinate = e.coordinate;
    59.             queryByPnt(coordinate)
    60.         })
    61.         document.querySelector('.ol-popup-closer').onclick = function () {
    62.             //设置位置为undefined
    63.             popup.setPosition(undefined)
    64.         }
    66.         function queryByPnt(point) {
    67.             //初始化查询结构对象，设置查询结构包含几何信息
    68.             var queryStruct = new Zondy.Service.QueryFeatureStruct();
    69.             queryStruct.IncludeGeometry = true;
    70.             //创建一个用于查询的点形状
    71.             var pointObj = new Zondy.Object.Point2D(point[0], point[1]);
    72.             //设置点容差半径
    73.             pointObj.nearDis = 1;
    74.             //实例化查询参数对象    
    75.             var rule = new Zondy.Service.QueryFeatureRule({
    76.                 //是否将要素的可见性计算在内
    77.                 EnableDisplayCondition: false,
    78.                 //是否完全包含
    79.                 MustInside: false,
    80.                 //是否仅比较要素的外包矩形
    81.                 CompareRectOnly: false,
    82.                 //是否相交
    83.                 Intersect: true
    84.             })
    85.             var queryParam = new Zondy.Service.QueryParameter({
    86.                 geometry: pointObj,
    87.                 resultFormat: "json",
    88.                 struct: queryStruct,
    89.                 rule: rule
    90.             });
    92.             //实例化地图文档查询服务对象
    93.             var queryService = new Zondy.Service.QueryDocFeature(queryParam, "smart_city", 0, {
    94.                 ip: "localhost",
    95.                 port: "6163" //访问IGServer的端口号，.net版为6163，Java版为8089
    96.             });
    97.             //执行查询操作，querySuccess为查询回调函数
    98.             queryService.query(querySuccess, queryError);
    99.         }
    101.         //查询失败回调
    102.         function queryError(e) {
    103.             //停止进度条
    104.             stopPressBar();
    105.         }
    106.         //查询成功回调
    107.         function querySuccess(result) {
    108.             console.log(result)
    109.             //初始化Zondy.Format.PolygonJSON类
    110.             var format = new Zondy.Format.PolygonJSON()
    111.             //将MapGIS要素JSON反序列化 ol.Feature类型数组
    112.             var features = format.read(result)
    113.             console.log(features)
    114.             if (features) {
    115.                 console.log(features[0])
    116.                 let coordinate = features[0].getGeometry().flatCoordinates;
    117.                 popup.setPosition(coordinate)
    118.             }
    119.         }
    120.     </script>
    121. </body>
    123. </html>