Блог

Главная - Вопросы по программированию - Измените значок маркера результатов поиска на пользовательский

Измените значок маркера результатов поиска на пользовательский

#arcgis #arcgis-js-api

Вопрос:

У меня есть следующий код, который в настоящее время работает. Я искал повсюду и не могу найти, как изменить путь значка с крошечной точки, которая по умолчанию указана в местоположении. Приведенный ниже код устанавливается на определенный адрес при загрузке страницы. Я попробовал PictureMarkerSymbol, как вы увидите, я загрузил его в функцию, но я не понимаю правильной логики.

Я полагал, что это будет самая простая часть использования arcgis, но это оказалось непросто.

Спасибо!

 <html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>ArcGIS API for JavaScript</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.20/"></script>

<script>
      require([
        'esri/config',
        'esri/Map',
        'esri/views/MapView',
        'esri/symbols/PictureMarkerSymbol',
        'esri/widgets/Search',
        'esri/layers/FeatureLayer',
      ], function (
        esriConfig,
        Map,
        MapView,
        PictureMarkerSymbol,
        Search,
        FeatureLayer
      ) {
        esriConfig.apiKey =
          'API-KEY';

        const map = new Map({
          basemap: 'arcgis-navigation',
        });

        const view = new MapView({
          container: 'viewDiv',
          map: map,
          center: [-77.050636, 38.889248],
          zoom: 13,
        });

        const search = new Search({
          //Add Search widget
          view: view,
        });

        view.ui.add(search, 'top-right'); //Add to the map

        searchWidget = new Search({
          view: view,
          searchTerm: '43 Valley Oak Ct',
          popupEnabled: false,
      
        });

        view.ui.add(searchWidget, 'bottom-right');

        view.when(() => {
          searchWidget.search();
        });

      });
    </script>

Ответ №1:

Это выглядит так, как будто диаграмма результатов виджета поиска доступна только для чтения, но похоже, что вы можете указать коллекцию источников поиска и предоставить ей символ. Вы почти можете использовать настройку по умолчанию, указанную в примере в разделе источники в документации. Ниже приведен пример. Вы можете использовать этот инструмент для создания символов.

 <!--

To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.

Sign up for a free account and get an API key.

https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/

 -->
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Search widget with multiple sources | Sample | ArcGIS API for JavaScript 4.20</title>

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

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

    <script>
        require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Search", "esri/tasks/Locator", "esri/symbols/SimpleMarkerSymbol"], (
            Map,
            MapView,
            FeatureLayer,
            Search,
            Locator,
            SimpleMarkerSymbol,
        ) => {

            const map = new Map({
                basemap: "dark-gray-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-97, 38], // lon, lat
                scale: 10000000
            });

            var marker = new SimpleMarkerSymbol({ color: [203, 52, 52, 0.93] });

            const searchWidget = new Search({
                view: view,
                searchTerm: '43 Valley Oak Ct',
                popupEnabled: false,
                sources: [
                    {
                        locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
                        singleLineFieldName: "SingleLine",
                        outFields: ["Addr_type", "Match_addr", "StAddr", "City"],
                        name: "ArcGIS World Geocoding Service",
                        placeholder: "Find address or place",
                        resultSymbol: marker,
                    }
                ]
            });
            searchWidget.viewModel.includeDefaultSources = false;

            // Add the search widget to the top left corner of the view
            view.ui.add(searchWidget, {
                position: "top-right"
            });

            view.when(() => {
                searchWidget.search();
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>
Метки: