arcgis api结合高德poi搜索接口

最新推荐文章于 2024-09-23 20:56:04 发布

gis小白的成长之路

最新推荐文章于 2024-09-23 20:56:04 发布

阅读量968

点赞数

分类专栏： ARCGIS API 天地图文章标签： javascript arcgis api 高德poi查询接口

本文链接：https://blog.csdn.net/qq_36179257/article/details/118416146

版权

ARCGIS API 同时被 2 个专栏收录

21 篇文章 18 订阅

订阅专栏

天地图

3 篇文章 0 订阅

订阅专栏

该博客介绍了如何在天地图上使用高德的POI查询接口进行数据获取，并通过前端技术实现在地图上的点标记展示。首先，利用封装好的天地图JS库加载地图，然后通过高德API获取经纬度信息，接着使用Dojo发布者模式传递数据，最后进行坐标系转换并在地图上打点。示例代码中详细展示了这一过程。

摘要由CSDN通过智能技术生成

应用场景：通过高德poi查询接口，在天地图上打点展示，效果如下
在这里插入图片描述
实现步骤:
1、通过arcgis api 加载天地图。(资源里有已经封装好的天地图js，引入即可使用)
2、通过高德poi查询接口获取数据。(需要在高德地图API申请web服务的密钥)
3、通过dojo发布者模式，发布和接收经纬度信息的任务。(不是必须，也可用其他方法实现)
4、将接收到的经纬度信息进行坐标系转换，然后打点到地图上。(资源里有在前端就可以实现坐标系转换函数的js)

实现代码，下载资源后，可直接打开：
资源下载：包含封装了天地图的js、前端实现坐标系转换的函数js：资源下载

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>POI搜索</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Arial;
    }

    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0px dashed black;
      background-color: rgb(0, 38, 48);
    }
    .mapsearch {
      width: 220px;
      position: fixed;
      left: 3px;
      top: 45px;
    }
      .mapsearch .search-input {
        width: 350px;
        height: 30px;
        border: 1px solid #eee;
        overflow: hidden;
        background-color: rgb(255, 255, 255);
      }
        .mapsearch .search-input .input {
          width: 313px;
          height: 28px;
          padding-left: 5px;
          font-size: 14px;
          border: none;
          outline: 0;
        }
        .mapsearch .search-input .btn-search {
          float: right;
          width: 30px;
          height: 30px;
          border: none;
          outline: 0;
          background-color: #3385ff;
          background-image: url("images/search2.png");
          background-size: 30px 30px;
          cursor: pointer;
        }
      .mapsearch .search-list {
        display: none;
        width: 350px;
        height: auto;
        border: 1px solid #eee;
        margin-top: 3px;
        background-color: rgba(0, 0, 0, 0.75);
        position: absolute;
        top: 30px;
      }

        .mapsearch .search-list li {
          width: 97%;
          margin-left: 5px;
          border-bottom: 1px solid #aaa;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
        }
          .mapsearch .search-list li.selected {
            background-color: #F3F3F3;
            color: #999;
          }
            .mapsearch .search-list li:hover {
              background-color: #4797f3;
            }
  </style>
</head>
<body> 

<div id="map">
  <div class="mapsearch" style="z-index: 999;">
    <div class="search-input" style="position: fixed;left: 5px;display: inline;top: 10px;">
      <input id="search-text" class="input" type="text" value="" />
      <div id="btn-search" data-dialog-btn="usersDialog" class="btn-search"></div>
    </div>
    <div class="search-list" id="search-list">
      <ul></ul>
    </div>
  </div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="index.js"></script> <!-- 引入前端实际坐标系转换的函数js -->
<script src="https://js.arcgis.com/3.26/"></script>
<script type="text/javascript">
  //搜索按钮点击
  $(document).ready(function () {
    $("#btn-search").click(function () {
      $("#search-list").show() //列表展开
      //拼接高德POI查询接口url
      var searchUrl = "https://restapi.amap.com/v3/place/text?" 
                    + "&output=json"  //返回json格式
                    + "&offset=20"  //每页返回20条数据
                    + "&page=1"  //第一页
                    + "&key=b1d51f782b0316d4cae6410f2f258462" //申请的高德api密钥：web服务 
                    + "&keywords=" + $("#search-text").val(); //搜索框关键字
      console.log(searchUrl)
      getSearchList(searchUrl);
    })
  })
  //获取搜索列表
  function getSearchList (searchText) {
    //从poi查询接口获取数据
    $.get("" + searchText, function (data) {
      var addresses = eval(data);
      console.log(addresses)
      var html = ""
      //循环获取每条数据
      $.each(addresses.pois, function (i, item) {
        //拼接列表内容
        html += '<li  location="' + item.location 
             + '" address="' + item.address + '">' 
             + item.name + '(' + item.cityname + item.adname + ')' + '</li>';
      });
      $("#search-list ul").html("");
      //将内容添加到列表
      $("#search-list ul").append(html); 
      //鼠标移动到列表某条数据时将其显示到搜索框
      $("#search-list ul li").mouseover(function () { 
        $("#search-text").val($(this).text());
      });
      //点击列表里内容时
      $("#search-list ul li").click(function () {
        $("#search-list").hide(); //隐藏列表
        //获得经纬度和名称信息
        var location = $(this).attr("location");
        var lon = location.split(",")[0];
        var lat = location.split(",")[1];
        var name = $(this).attr("name");
        //发布任务
        dojo.topic.publish("map_cell_selected", { "lon": lon, "lat": lat, "name": name });
      });
    })
  }
</script> 
<script type="text/javascript">
  dojo.require("dojo.topic"); //引入dojo发布者模式
  var map;
  require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/symbols/PictureMarkerSymbol",
    "esri/graphic",
    "esri/SpatialReference",
    "esri/geometry/Point",
    "TianDiTuLayer.js", //封装了天地图的js
    "esri/geometry/Extent",
    "dojo/domReady!"
  ], function(
    Map,
    ArcGISDynamicMapServiceLayer,
    ArcGISTiledMapServiceLayer,
    PictureMarkerSymbol, 
    Graphic,
    SpatialReference, 
    Point,
    TianDiTuLayer,
    Extent
  ) {
    var mapExtent = new Extent({
      xmax: 110.4372831869446,
      xmin: 110.14550416056568,
      ymax: 20.09132053413222,
      ymin: 19.947106161490854,
      spatialReference: {
        wkid: 4326
      }
    })
    map = new Map("map", {
      extent: mapExtent,
      sliderStyle: "small",
      logo: false,
    });

    map.on('load', function () {
       map.hideZoomSlider()
       map.hidePanArrows()
     })

    var tdMap = new TianDiTuLayer("tianditumap");   //天地街道图
    var tdMapi = new TianDiTuLayer("tianditumapi");  //天地标注图
    map.addLayer(tdMap)
    map.addLayer(tdMapi)
    
    //接收任务
    dojo.topic.subscribe("map_cell_selected", function (Json) {
      //将字符串的经纬度转为float类型
      let x = parseFloat(Json.lon) 
      let y = parseFloat(Json.lat)
      //由于高度poi查询接口获取的经纬度是采用火星坐标系，而底图使用的是天地图WGS84
      //所有要将火星坐标系转化为wgs84
      let gcj02towgs84 = coordtransform.gcj02towgs84(x, y)
      let lon = gcj02towgs84[0]
      let lat = gcj02towgs84[1]
      console.log(lon, lat)
      let point = new Point(lon, lat);
      let symbol = new PictureMarkerSymbol("images/green.png", 15, 20).setOffset(0, 15);
      let gra = new Graphic(point);
      gra.symbol = symbol;
      map.centerAndZoom(point, 12);
      map.graphics.clear();
      map.graphics.add(gra);    
    });

  });
</script>
</html>