Arcgis api 鼠标悬停显示弹窗

最新推荐文章于 2023-03-13 15:04:21 发布

gis小白的成长之路

最新推荐文章于 2023-03-13 15:04:21 发布

阅读量1.5k

点赞数 2

分类专栏： ARCGIS API 要素合集创建要素图层文章标签： javascript

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

版权

ARCGIS API 同时被 2 个专栏收录

21 篇文章 18 订阅

订阅专栏

要素合集创建要素图层

3 篇文章 0 订阅

订阅专栏

实现鼠标悬停图层上显示弹窗，原理是鼠标滑过图层时，设置弹窗显示和弹窗的位置，鼠标移出图层时，关闭弹窗。要素图层使用本地获取json文件生成要素图层的方法，城市json数据下载：city.json
效果：
在这里插入图片描述

内容不多，代码里有注释，直接上代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>鼠标悬停显示弹窗</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.26/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">  
<script src="https://js.arcgis.com/3.26/"></script>  
<style>
  html,
  body,
  #map {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  </style>
  <script>
    var map, getCity, closeDialog;
    require([
      "esri/Color",
      "esri/map",
      "esri/graphic",
      "esri/lang",
      "esri/geometry/Extent",
      "esri/tasks/FeatureSet",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "dojo/domReady!"
    ],function(
      Color, 
      Map, 
      Graphic, 
      esriLang, 
      Extent, 
      FeatureSet, 
      ArcGISTiledMapServiceLayer, 
      FeatureLayer,
      InfoTemplate, 
      SimpleFillSymbol, 
      SimpleLineSymbol) {
        //地图范围
        var mapExtent = new Extent({
          xmax: 113.799760210539,
          xmin: 106.57095767482662,
          ymax: 20.459116202966324,
          ymin: 18.27952992162579,
          spatialReference: {
            wkid: 4326
          }
        })

        map = new Map("map", {
          extent: mapExtent,
          //center: [-80.222550, 33.855972],
          //zoom: 8,
          sliderStyle: "small",
          logo: false,
        });

        map.on('load', function () {
          map.hideZoomSlider()
          map.hidePanArrows()
          map.disableDoubleClickZoom() //禁用双击缩放
          getCity()
          map.graphics.on("mouse-out", closeDialog) //默认鼠标移出图层时执行关闭弹窗的方法
        })

        //arcgis 在线切片底图图
        var myTileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
        map.addLayer(myTileLayer)

        //通过json文件加载城市图层数据
        getCity = function () { 
          let json = null
          let url = "city.json"/*json文件url*/
          let request = new XMLHttpRequest();
          request.open("get", url);/*设置请求方法与路径*/
          request.send(null);/*不发送数据到服务器*/
          request.onload = function () {/*XHR对象获取到返回信息后执行*/
            if (request.status == 0) {/*返回状态为0，即为数据获取成功*/
              json = JSON.parse(request.responseText);
              let featureSet = new FeatureSet(json)
              let layerDefinition = {  //要素描述,具体字段根据json内容
                "geometryType": "esriGeometryPolygon",
                "fields":[
                  {
                    "name" : "FID", //字段名称
                    "type" : "esriFieldTypeOID", //字段类型
                    "alias" : "FID"
                  },
                  {
                    "name" : "city_name",
                    "type" : "esriFieldTypeString",
                    "alias" : "city_name",
                    "length" : 254
                  },
                  {
                    "name" : "value",
                    "type" : "esriFieldTypeInteger",
                    "alias" : "value"
                  }
                ]
              }
              //要素合集
              let featureCollection = {
                layerDefinition: layerDefinition,
                featureSet: featureSet
              }
              let featureLayer = new FeatureLayer(featureCollection) //使用要素合集创建要素图层
              map.addLayer(featureLayer) 
          
              let highlightSymbol = new SimpleFillSymbol( //高亮符号
                SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_SOLID,
                new Color([255,0,0]), 3),
                new Color([125,125,125,0.35])
              )
              //鼠标移入图层时
              featureLayer.on("mouse-over", function(evt) {
                let t = "<b>城市:${city_name}</b>" //弹窗内容
                let content = esriLang.substitute(evt.graphic.attributes,t) //弹窗设置
                map.infoWindow.setContent(content); 
                map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); //弹窗显示位置
                let highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol); //悬停高亮
                map.graphics.add(highlightGraphic)  
              })

            }
          }
        }
        //关闭弹窗
        closeDialog = function (){
          map.graphics.clear(); //隐藏高亮
          map.infoWindow.hide() //隐藏弹窗
        } 
      }
    )
</script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

gis小白的成长之路

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Arcgis api 鼠标悬停显示弹窗

实现鼠标悬停图层上显示弹窗，原理是鼠标滑过图层时，设置弹窗显示和弹窗的位置，鼠标移出图层时，关闭弹窗。要素图层使用本地获取json文件生成要素图层的方法，内容不多，代码里有注释，直接上代码：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>鼠标悬停显示弹窗</title>&
复制链接

扫一扫