海量面/线图层展示和查询

需求

三线一单、土地利用等要展示全省或者市的大量的面数据并支持查询

具体需求：

• 地图加载时要展示图层效果（图层效果不变）
• 点击地图要能高亮展示点击的面以及相关信息

注： 如果要查询的图层很多，还是会比较慢的

分析

• 全省或者市范围的大量微小的矢量面在地图上加载和展示的效果都非常差，所以的发布成切片服务，以空间换时间的方式，提高展示效率

• 因为切片服务是不支持查询的，所以需要发布一个动态服务，使用该服务或者该服务支持的要素服务对数据进行属性查询或者空间关系查询

解决

• 把数据在 ArcMap 中配好样式并发布动态和切片服务
• 在应用中默认叠加切片服务
• 给地图注册点击事件 (opens new window)

mapClick(function(result) {
  // result 包含有鼠标点击位置的经纬度
  // ...
});

• 根据需求对要素服务进行查询

  • 属性查询 (opens new window)

/**
 * query 查询featureLayer图层,返回查询到的Graphics
 * @param {string} featureLayerUrl 图层url
 * @param {string} whereClause where语句
 * @param {Function} getQueryCallback 查询结果回调方法(返回查询出的要素集合)
 * @param {Function} errCallback 查询失败回调方法
 * @example
 * query("http://192.168.0.99/ArcGIS/rest/services/foshan/MapServer/8", "NAME='南海区'", getQueryResults, errCallback);
 * @description
 * + 返回查询结果的全部属性
 * + 返回查询结果的图形点位数据
 * @returns {Object}
 * {
 *  features: [d], // 查询到符合条件的要素集合
 *  fieldAliases: {FID: "FID", ...}, // 图层字段别名信息
 *  fields: (12) [], // 图层字段信息
 *  geometryType: "esriGeometryPolygon", // 图层的要素类型
 *  spatialReference: f {wkid: 4490, latestWkid: 4490} // 图层的坐标系
 * }
 */

function query(featureLayerUrl, whereClause, getQueryCallback, errCallback) {...}

// 示例
query('http://121.46.19.2:20724/arcgis/rest/services/510000/%E4%B8%89%E7%BA%BF%E4%B8%80%E5%8D%95/MapServer/0', "HJGKDYBM='ZH51010410001'", function(queryInfo) {
  console.log(queryInfo)
}, function(err) {
  console.log(err)
});

• 空间查询 (opens new window)

/**
 * 通过经纬度构建要素查询url的元素
 * @param {string} featureLayerUrl 要素图层地址
 * @param {Object} inputGeometry 通过经纬度构建要素
 * @param {Function} getQueryCallback 成功回调
 * @param {Function} errCallback 失败回调
 * @example
 * query("http://192.168.0.99/ArcGIS/rest/services/foshan/MapServer/8", "{x: 103.499, y: 30.294, spatialReference: { wkid: 4490 }}", getQueryResults, errCallback);
 * @description
 * + 返回查询结果的全部属性
 * + 返回查询结果的图形点位数据
 * + 暂时只能输入点要素，查询服务
 * + 空间关系为相交
 * @returns {Object}
 * {
 *  features: [d], // 查询到符合条件的要素集合
 *  fieldAliases: {FID: "FID", ...}, // 图层字段别名信息
 *  fields: (12) [], // 图层字段信息
 *  geometryType: "esriGeometryPolygon", // 图层的要素类型
 *  spatialReference: f {wkid: 4490, latestWkid: 4490} // 图层的坐标系
 * }
 */
function queryUrlByGeometry(featureLayerUrl, inputGeometry, getQueryCallback, errCallback)

queryUrlByGeometry('http://121.46.19.2:20724/arcgis/rest/services/510000/%E4%B8%89%E7%BA%BF%E4%B8%80%E5%8D%95/MapServer/0', {
  x: 103.499,
  y: 30.294,
  spatialReference: {
    wkid: 4490
  }
}, function(queryInfo) {
  console.log(queryInfo)
}, function(err) {
  console.log(err)
})

• 根据查到的要素数据在地图添加临时图层并渲染

完整示例

// 这里仅展示开发者代码中的功能代码
// 以空间查询为例

var featureUrl =
  "http://121.46.19.2:20724/arcgis/rest/services/510000/%E4%B8%89%E7%BA%BF%E4%B8%80%E5%8D%95/MapServer/0";

// 注册地图的点击事件
mapClick(handleMapClick);

/**
 * 地图点击事件处理函数
 * @param {Object} evt 点击回调参数
 */
function handleMapClick(evt) {
  if (evt) {
    // 空间查询要素服务图层
    queryUrlByGeometry(
      featureUrl,
      {
        x: evt.x, // 点位经度
        y: evt.y, // 点位维度
        spatialReference: {
          wkid: evt.spatialReference.wkid, // 坐标系
        },
      },
      handleQueryFeatureResult,
      handleQueryFeatureErr
    );
  }
}

// 查询成功执行
function handleQueryFeatureResult(queryInfo) {
  // 添加图层（图层名称自行更换）
  addGraphic("临时展示图层", null, queryInfo.features);
  // 设置图层样式（返回的数据是没有要素样式的）（图层样式自行更换）
  applyRenderer("临时展示图层", {
    type: "simple", //渲染类型
    symbol: {
      //符号
      color: [255, 165, 0, 200], //必选，符号颜色
      outline: {
        //可选，符号边线设置
        color: [255, 0, 0], //必选，边线颜色
        width: 1, //必选，边线宽度
        type: "esriSLS", // "style": "esriSLSNull"//可选，边线样式,当前设置时不显示边线，默认为：esriSFSSolid，显示边线
      },
      type: "esriSFS", //必选，符号类型，此处是指面符号，点符号为："esriSMS"
      style: "esriSFSSolid", //必选，填充样式
    },
  });
}

// 查询失败执行
function handleQueryFeatureErr(err) {
  // 清空临时图层，重置参数，提示等业务逻辑
  console.log(err);
}