arcgis js api 4.9 文本查询将结果显示在地图上

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>QueryTask - 4.9</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #optionsDiv {
            background-color: dimgray;
            color: white;
            padding: 10px;
            width: 350px;
        }

        .esri-popup .esri-popup-header .esri-title {
            font-size: 18px;
            font-weight: bolder;
        }

        .esri-popup .esri-popup-body .esri-popup-content {
            font-size: 14px;
        }
    </style>

    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_api/library/4.9/esri/css/main.css">
    <script src="http://localhost:8080/arcgis_js_api/library/4.9/init.js"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/GraphicsLayer",
            "esri/tasks/QueryTask",
            "esri/tasks/support/Query",
            "esri/tasks/FindTask",
            "esri/layers/FeatureLayer",
            "esri/tasks/support/FindParameters"
        ], function(
            Map, MapView, GraphicsLayer,
            QueryTask, Query,FindTask,FeatureLayer, FindParameters
        ) {
            var template = { // autocasts as new PopupTemplate()
                title: "{NAME}",
                content: [{
                    type: "fields",
                    fieldInfos: [ {
                        fieldName: "ADDR",
                        label: "酒店地址",
                        visible: true,
                        format: {
                            digitSeparator: true,
                            places: 0
                        }
                    },
                        {
                            fieldName: "HOTELSTAR",
                            label: "酒店类型",
                            visible: true,
                                format: {
                                digitSeparator: true,
                                places: 0
                            }
                        },
                        {
                            fieldName: "SCOREINFO1",
                            label: "酒店评分",
                            visible: true,
                            format: {
                                digitSeparator: true,
                                places: 0
                            }
                        }]
                }]
            };
            var quakesUrl =
                "http://localhost:6080/arcgis/rest/services/hotel/FeatureServer/0";
            var wellsLayer = new FeatureLayer({
                url: quakesUrl,
                outFields: ["*"],
                visible: false,
                popupTemplate: template
            })
            var markerSymbol = {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                color: [255, 0, 0],
                outline: { // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 2
                }
            };
            var resultsLayer = new GraphicsLayer();

            var map = new Map({
                basemap: "osm",
                layers:[resultsLayer]
        });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center:[123.5,41.8],
                spatialReference:{ wkid: 3857},
                zoom: 11
            });

            document.getElementById("findBtn").addEventListener("click",
                setWellsDefinitionExpression);

            function setWellsDefinitionExpression() {
                var name = document.getElementById("inputTxt").value;
                console.log(name)
                wellsLayer.definitionExpression = "NAME LIKE '%"+ name + "%'";
                console.log( wellsLayer.definitionExpression)
                return queryForWellGeometries();
            }

            function queryForWellGeometries() {
                var wellsQuery = wellsLayer.createQuery();
                resultsLayer.removeAll();
                return wellsLayer.queryFeatures(wellsQuery)
                    .then(function (response) {
                      var resultFeatures= response.features;
                      console.log(resultFeatures)
                      var poiGraphics = resultFeatures.map(function(feature) {
                            feature.symbol = markerSymbol;
                            return feature;
                        });
                        resultsLayer.addMany(poiGraphics);

                    });
            }

        });
    </script>
</head>

<body>




<div id="viewDiv">
    <div><br> 查询酒店名称:
        <input type="text" id="inputTxt" size="40"  />
        <input type="button" value="查询" id="findBtn" />
    </div>
</div>
</body>

</html>
2.结果
leopold_2017
发布了48 篇原创文章 · 获赞 24 · 访问量 4万+
私信关注
arcgis js api 4.9 文本查询将结果显示在地图上

猜你喜欢
