搜索并放大到某个位置

发布于 2025-01-13 01:24:53 字数 2503 浏览 0 评论 0原文

我正在图形图层上绘制一些文本图形，现在我需要在地图上提供一个选项来搜索特定文本并导航到该位置并放大。

有人可以指导我使用该方法吗？

这是示例代码，如果我搜索 560001，地图应该放大到该位置。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.22/"></script>
  <script>
    require([
      "esri/WebMap",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/symbols/TextSymbol"
    ], function (WebMap, MapView, Graphic, GraphicsLayer, TextSymbol) {
      const webmap = new WebMap({
        portalItem: {
          id: "36f72c8a71b542399ca09e10c5aa55f4"
        }
      });
      const view = new MapView({
        container: "viewDiv",
        map: webmap,
        center: [-37.731338217717074, 175.22263172713014],
        zoom: 10
      });
      this.objectTypeList = [
        { Location: '560001', latitude: -37.731338217717074, longitude: 175.22263172713014 },
        { Location: '560002', latitude: -37.487705856583744, longitude: 175.09324140306873 },
        { Location: '560003', latitude: -37.505917118655056, longitude: 175.12036900524583 },
        { Location: '560005', latitude: -37.67287982024181, longitude: 175.23882277753953 },
        { Location: '560005', latitude: -37.67310492511848, longitude: 175.23890380457217 }
      ];
      var graphicsLayer = new GraphicsLayer();
      webmap.layers.add(graphicsLayer);
      this.objectTypeList.forEach(item => {
        var point = {
          type: "point",
          longitude: item.longitude,
          latitude: item.latitude
        };
        var textSymbol = new TextSymbol({
          color: "#BB0000",
          haloColor: "black",
          haloSize: "1px",
          text: `${item.Location}`,
          font: { size: 12, family: "Josefin Slab", weight: "bold" }
        });
        var pointGraphic = new Graphic({
          geometry: point,
          symbol: textSymbol
        });
        graphicsLayer.add(pointGraphic);
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

原文

I am plotting some text graphics on a graphics layer and now I need to give an option on the map to search for a specific text and navigate to that location and zoom in.

Can someone please guide me with the approach?

Here is the sample code where if I search for 560001, the map should be zoom in to that location.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.22/"></script>
  <script>
    require([
      "esri/WebMap",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/symbols/TextSymbol"
    ], function (WebMap, MapView, Graphic, GraphicsLayer, TextSymbol) {
      const webmap = new WebMap({
        portalItem: {
          id: "36f72c8a71b542399ca09e10c5aa55f4"
        }
      });
      const view = new MapView({
        container: "viewDiv",
        map: webmap,
        center: [-37.731338217717074, 175.22263172713014],
        zoom: 10
      });
      this.objectTypeList = [
        { Location: '560001', latitude: -37.731338217717074, longitude: 175.22263172713014 },
        { Location: '560002', latitude: -37.487705856583744, longitude: 175.09324140306873 },
        { Location: '560003', latitude: -37.505917118655056, longitude: 175.12036900524583 },
        { Location: '560005', latitude: -37.67287982024181, longitude: 175.23882277753953 },
        { Location: '560005', latitude: -37.67310492511848, longitude: 175.23890380457217 }
      ];
      var graphicsLayer = new GraphicsLayer();
      webmap.layers.add(graphicsLayer);
      this.objectTypeList.forEach(item => {
        var point = {
          type: "point",
          longitude: item.longitude,
          latitude: item.latitude
        };
        var textSymbol = new TextSymbol({
          color: "#BB0000",
          haloColor: "black",
          haloSize: "1px",
          text: `${item.Location}`,
          font: { size: 12, family: "Josefin Slab", weight: "bold" }
        });
        var pointGraphic = new Graphic({
          geometry: point,
          symbol: textSymbol
        });
        graphicsLayer.add(pointGraphic);
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倾｀听者〃 2025-01-20 01:24:53

您只需要使用符号文本属性在 GraphicLayer 的图形中找到选定的（以某种方式）位置。

现在，您正在使用地理（经度、纬度）来创建几何图形，但您的地图位于另一个空间参考系统中。为了缩放到几何图形，您必须投影它们。

看一下我为您提供的示例，我使用简单的选择来选择图形，并且使用客户端投影方法，另一个选项是服务器端投影。

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.22/"></script>
    <script>
        require([
            "esri/WebMap",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/symbols/TextSymbol",
            "esri/geometry/SpatialReference",
            "esri/geometry/projection"
        ], function (WebMap, MapView, Graphic, GraphicsLayer, TextSymbol, SpatialReference, projection) {
            const webmap = new WebMap({
                portalItem: {
                    id: "36f72c8a71b542399ca09e10c5aa55f4"
                }
            });
            const view = new MapView({
                container: "viewDiv",
                map: webmap,
                center: [-37.731338217717074, 175.22263172713014],
                zoom: 10
            });
            this.objectTypeList = [
                { Location: '560001', latitude: -37.731338217717074, longitude: 175.22263172713014 },
                { Location: '560002', latitude: -37.487705856583744, longitude: 175.09324140306873 },
                { Location: '560003', latitude: -37.505917118655056, longitude: 175.12036900524583 },
                { Location: '560004', latitude: -37.67287982024181, longitude: 175.23882277753953 },
                { Location: '560005', latitude: -37.67310492511848, longitude: 175.23890380457217 }
            ];
            var graphicsLayer = new GraphicsLayer();
            webmap.layers.add(graphicsLayer);
            this.objectTypeList.forEach(item => {
                var point = {
                    type: "point",
                    longitude: item.longitude,
                    latitude: item.latitude
                };
                var textSymbol = new TextSymbol({
                    color: "#BB0000",
                    haloColor: "black",
                    haloSize: "1px",
                    text: `${item.Location}`,
                    font: { size: 12, family: "Josefin Slab", weight: "bold" }
                });
                var pointGraphic = new Graphic({
                    geometry: point,
                    symbol: textSymbol
                });
                graphicsLayer.add(pointGraphic);
            });

            projection.load().then(function() {
                const outSR = new SpatialReference({wkid: 2193});
                const dic = {};
                graphicsLayer.graphics.forEach(g => dic[g.symbol.text] = projection.project(g.geometry, outSR));
                view.when(function(){
                    const locationZoomButton = document.getElementById("locationZoomButton");
                    locationZoomButton.addEventListener("click", function(){
                        const locationSelect = document.getElementById("locationSelect");
                        const locationText = locationSelect.value;
                        if (dic.hasOwnProperty(locationText)) {
                            view.goTo(dic[locationText]);
                        }
                    });
                });
            });
        });
    </script>
</head>

<body>
    <div>
        <select id="locationSelect">
            <option value="560001">560001</option>
            <option value="560002">560002</option>
            <option value="560003">560003</option>
            <option value="560004">560004</option>
            <option value="560005">560005</option>
        </select>
        <button id="locationZoomButton"> Zoom </button>
    </div>
    <div id="viewDiv"></div>
</body>

</html>

You just need to find the selected (somehow) location in the graphics of GraphicLayer using the symbol text property.

Now, you are using geographic (lon, lat) to create the geometries but your map is in another spatial reference system. In that order to zoom to the geometries you will have to project them.

Take a look a the example I put for you, I use a simple select to choose the graphic, and I use a on client projection method, another option would be server side projection.

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.22/"></script>
    <script>
        require([
            "esri/WebMap",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/symbols/TextSymbol",
            "esri/geometry/SpatialReference",
            "esri/geometry/projection"
        ], function (WebMap, MapView, Graphic, GraphicsLayer, TextSymbol, SpatialReference, projection) {
            const webmap = new WebMap({
                portalItem: {
                    id: "36f72c8a71b542399ca09e10c5aa55f4"
                }
            });
            const view = new MapView({
                container: "viewDiv",
                map: webmap,
                center: [-37.731338217717074, 175.22263172713014],
                zoom: 10
            });
            this.objectTypeList = [
                { Location: '560001', latitude: -37.731338217717074, longitude: 175.22263172713014 },
                { Location: '560002', latitude: -37.487705856583744, longitude: 175.09324140306873 },
                { Location: '560003', latitude: -37.505917118655056, longitude: 175.12036900524583 },
                { Location: '560004', latitude: -37.67287982024181, longitude: 175.23882277753953 },
                { Location: '560005', latitude: -37.67310492511848, longitude: 175.23890380457217 }
            ];
            var graphicsLayer = new GraphicsLayer();
            webmap.layers.add(graphicsLayer);
            this.objectTypeList.forEach(item => {
                var point = {
                    type: "point",
                    longitude: item.longitude,
                    latitude: item.latitude
                };
                var textSymbol = new TextSymbol({
                    color: "#BB0000",
                    haloColor: "black",
                    haloSize: "1px",
                    text: `${item.Location}`,
                    font: { size: 12, family: "Josefin Slab", weight: "bold" }
                });
                var pointGraphic = new Graphic({
                    geometry: point,
                    symbol: textSymbol
                });
                graphicsLayer.add(pointGraphic);
            });

            projection.load().then(function() {
                const outSR = new SpatialReference({wkid: 2193});
                const dic = {};
                graphicsLayer.graphics.forEach(g => dic[g.symbol.text] = projection.project(g.geometry, outSR));
                view.when(function(){
                    const locationZoomButton = document.getElementById("locationZoomButton");
                    locationZoomButton.addEventListener("click", function(){
                        const locationSelect = document.getElementById("locationSelect");
                        const locationText = locationSelect.value;
                        if (dic.hasOwnProperty(locationText)) {
                            view.goTo(dic[locationText]);
                        }
                    });
                });
            });
        });
    </script>
</head>

<body>
    <div>
        <select id="locationSelect">
            <option value="560001">560001</option>
            <option value="560002">560002</option>
            <option value="560003">560003</option>
            <option value="560004">560004</option>
            <option value="560005">560005</option>
        </select>
        <button id="locationZoomButton"> Zoom </button>
    </div>
    <div id="viewDiv"></div>
</body>

</html>

回复收藏 0 原文

~没有更多了~