高亮显示查询到的点

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <script src="./dist/include-openlayers-local.js"></script>
    9.     <script src="./libs/gaode.js"></script>
    10.     <script src="./libs/Point.js"></script>
    11. </head>
    13. <body>
    14.     <button onclick="queryPoint()">固定点查询</button>
    15.     <div id="map_container">
    16.     </div>
    17.     <script>
    18.         var docLayer = new Zondy.Map.Doc('', 'xzd_city', {
    19.             ip: 'localhost',
    20.             port: 6163
    21.         })
    22.         var map = new ol.Map({
    23.             target: "map_container",
    24.             layers: [gaode],
    25.             view: new ol.View({
    26.                 projection: 'EPSG:4326',
    27.                 center: [114.30, 30.50],
    28.                 zoom: 4
    29.             })
    30.         })
    31.         map.addLayer(docLayer)
    33.         function queryPoint() {
    34.             map.on("click", e => {
    35.                 var position = e.coordinate;
    36.                 console.log(position)
    37.                 Point.query({
    38.                     position,
    39.                     service: {
    40.                         name: "xzd_city",
    41.                         layerId: 2
    42.                     },
    43.                     successCallback: onSuccess
    44.                 })
    45.             })
    46.         }
    47.         var source = new ol.source.Vector({wrapX:false});
    48.         var layer = new ol.layer.Vector({
    49.             source
    50.         })
    51.         layer.setStyle(
    52.             new ol.style.Style({
    53.                 image:new ol.style.Circle({
    54.                     radius:12,
    55.                     fill:new ol.style.Fill({
    56.                         color:"#333"
    57.                     })
    58.                 })
    59.             })
    60.         )
    61.         map.addLayer(layer)
    62.         function onSuccess(res) {
    63.             var format = new Zondy.Format.PolygonJSON();
    64.             //将MapGIS要素JSON反序列化为ol.Feature类型数组
    65.             var features = format.read(res);
    66.             console.log(features)
    67.             if(features){
    68.                 source.addFeatures(features)
    69.                 console.log(source)
    70.             }
    71.         }
    72.     </script>
    73. </body>
    75. </html>