ARCGIS 不需要底图的要素图层展示

最新推荐文章于 2022-04-07 17:10:29 发布

gis小白的成长之路

最新推荐文章于 2022-04-07 17:10:29 发布

阅读量966

点赞数 1

分类专栏： ARCGIS 文章标签： GIS ARCGIS JS API query

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

版权

ARCGIS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一般我们在前端展示要素图层时，都需要切片地图作为底图，那么能不能只展示要素图层，无需底图呢。方法是通过query查询，获得要素图层的空间属性，然后通过GraphicsLayer绘制出来。如下图：

代码：

<!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>无需底图的要素图层展示</title>
  <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.25/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.25/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);
    }
  </style>
</head>
<body> 
<div>
</div> 
<div id="map">
</div>
</body>
<script src="http://localhost/arcgis_js_api/library/3.25/init.js"></script>
<script type="text/javascript">
  var map;
  require([
    "esri/map",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/layers/FeatureLayer",
    "esri/InfoTemplate",
    'esri/tasks/query',
    'esri/tasks/QueryTask',
    'esri/layers/GraphicsLayer',
    'esri/graphic',
    'esri/geometry/Point',
    'esri/symbols/SimpleFillSymbol',
    'esri/symbols/SimpleLineSymbol',
    'esri/symbols/TextSymbol',
    'esri/Color',
    "esri/geometry/Extent",
    "dojo/domReady!"
  ], function(
    Map,
    ArcGISDynamicMapServiceLayer,
    ArcGISTiledMapServiceLayer,
    FeatureLayer,
    InfoTemplate, Query, QueryTask, GraphicsLayer, Graphic, Point,
    SimpleFillSymbol, SimpleLineSymbol, TextSymbol, Color,
    Extent
  ) {

    //初始地图显示范围
    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,
      sliderStyle: "small",
      logo: false,
    });

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

    //定义绘制图层
    var featureLayer = new GraphicsLayer()
    map.addLayer(featureLayer)

    //查询
    var query = new Query()
    query.outFields = ['*']
    query.geometryPrecision = 3
    //已发布的市县要素图层
    var url = 'http://localhost:6080/arcgis/rest/services/WLW/CITY_USER/MapServer/0'
    query.where = '1=1'
    query.returnGeometry = true
    var queryTask = new QueryTask(url)
    queryTask.execute(query, function (results) {
      //将查询结果作为参数
      getMap(results)
    })
    

    //线符号
    var outline = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 191, 255]), 1)
    //面符号
    var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline, new Color([245, 222, 179, 1]))

    //绘制图层和添加标注的方法
    function getMap (results) {
      var f = results.features
      var l = f.length
      for (var i = 0; i < l; i++) {
        var geometry = f[i].geometry
        //将查询到的空间属性信息添加到绘制图层
        var graphic = new Graphic(geometry, PolygonSymbol)
        featureLayer.add(graphic)
        //添加标注
        var text = f[i].attributes.NAME
        var textSymbol = new TextSymbol(text)
        textSymbol.setColor(new Color([255,0,0,0.5]))
        var centerPoint = geometry.getCentroid()
        var graphicText = new Graphic(centerPoint, textSymbol)
        featureLayer.add(graphicText)
      }
    }
  });
</script>
</html>

gis小白的成长之路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ARCGIS 不需要底图的要素图层展示

一般我们在前端展示要素图层时，都需要切片地图作为底图，那么能不能只展示要素图层，无需底图呢。方法是通过query查询，获得要素图层的空间属性，然后通过GraphicsLayer绘制出来。如下图：代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm...
复制链接

扫一扫