MapGIS Client for JavaScript API

# clientId

Inherited From:

• BaseServer#clientId

# enableGlobeFetch

Inherited From:

• BaseServer#enableGlobeFetch

示例

//设置请求基地址
// ES5引入方式
const { BaseServer } = zondy.service
// ES6引入方式
import { BaseServer } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //请求基地址
  url: '你的URL',
  //使用私有的fetch对象
  enableGlobeFetch: false,
  //此时设置token等属性，不会影响全局的fetch对象
  tokenValue: '你的token'
});
//继续使用全局fetch
BaseServer.enableGlobeFetch = true;

# headers

Inherited From:

• BaseServer#headers

示例

//设置请求头参数
// ES5引入方式
const { BaseServer } = zondy.service
// ES6引入方式
import { BaseServer } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //请求头
  headers: {
     //设置Content-Type为multipart/form-data
    'Content-Type': 'multipart/form-data',
     //设置token
    'token': '你的token'
  }
});
//动态修改
BaseServer.headers.token = '新token';

# requestInterceptor

Inherited From:

• BaseServer#requestInterceptor

示例

//设置拦截器，任何一个继承自BaseServer的对象都可以设置，全局唯一
// ES5引入方式
const { BaseServer,RequestInterceptor } = zondy.service
// ES6引入方式
import { BaseServer,RequestInterceptor } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //设置请求发送拦截器
  requestInterceptor: new RequestInterceptor({
    //请求发送前进行统一处理
    before: function(config) {
      //执行你的业务逻辑
      //注意必须显示返回config对象，如果返回为空，则不发送请求
      return config;
    },
    //请求发送失败时进行统一处理
    failure: function(error) {
      //执行你的业务逻辑
    }
  })
});
//动态修改
BaseServer.requestInterceptor.before = function() {};

# requestTimeout

Inherited From:

• BaseServer#requestTimeout

示例

//设置超时时间
//初始化AddressServer服务对象
// ES5引入方式
const { BaseServer } = zondy.service
// ES6引入方式
import { BaseServer } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //超时时间
  requestTimeout: 2000
});
//动态修改
BaseServer.requestTimeout = 3000;

# responseInterceptor

Inherited From:

• BaseServer#responseInterceptor

示例

//设置拦截器，任何一个继承自BaseServer的对象都可以设置，全局唯一
// ES5引入方式
const { BaseServer,ResponseInterceptor } = zondy.service
// ES6引入方式
import { BaseServer,ResponseInterceptor } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //设置请求响应拦截器
  responseInterceptor: new ResponseInterceptor({
    //执行请求响应，接口调用成功时会执行的回调
    success: function(result) {
      //执行你的业务逻辑
      //注意必须显示返回result对象，如果返回为空，则不执行请求响应成功回调
      return result;
    },
    //请求响应成功，接口调用失败时会执行的函数
    failure: function(result) {
      //执行你的业务逻辑
      //注意必须显示返回result对象，如果返回为空，则不执行回调韩式
      return result;
    }
  })
});
//动态修改
BaseServer.responseInterceptor.success = function() {};

# tokenAttachType

Inherited From:

• BaseServer#tokenAttachType

示例

//设置token值
// ES5引入方式
const { BaseServer } = zondy.service
const { TokenAttachType } = zondy.enum
// ES6引入方式
import { BaseServer,TokenAttachType } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //token名
  tokenValue: '你的token值',
  //token值
  tokenValue: '你的token值',
  //指定token附加到url后面
  tokenAttachType: TokenAttachType.url
});
//动态修改
BaseServer.tokenAttachType = TokenAttachType.header;

# tokenKey

Inherited From:

• BaseServer#tokenKey

示例

//设置token名
// ES5引入方式
const { BaseServer } = zondy.service
// ES6引入方式
import { BaseServer } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //token名
  tokenKey: '你的tokenKey'
});
//动态修改
BaseServer.tokenKey = '新tokenKey';

# tokenValue

Inherited From:

• BaseServer#tokenValue

示例

//设置token值
// ES5引入方式
const { BaseServer } = zondy.service
// ES6引入方式
import { BaseServer } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //token值
  tokenValue: '你的token值'
});
//动态修改
BaseServer.tokenValue = '新token值';

# url

Inherited From:

• BaseServer#url

示例

//设置请求基地址
// ES5引入方式
const { BaseServer } = zondy.service
// ES6引入方式
import { BaseServer } from "@mapgis/webclient-common"
let BaseServer = new BaseServer({
  //请求基地址
  url: '你的URL'
});
//动态修改
BaseServer.url = '新URL';

# addFeature(options, GDBPOptions, DocOptions)

参数:

示例

IGS2.0的要素新增示例

// 创建一个线要素
// ES5引入方式
const { Feature } = zondy
// ES6引入方式
import { Feature } from "@mapgis/webclient-common"
const lineString = new Feature({
  //可填空或者和数据库中的表结构一一对应
  attributes: {},
  //可填空或者和系统库中的样式一一对应
  styleInfo: {},
  //设置几何
  geometry: new zondy.geometry.LineString({
    coordinates: [
      [110.74, 32.41],
      [112.89, 31.06],
      [110.15, 30.16]
    ]
  })
})

// 添加要素
featureServer.addFeature({
   // 指定图层id
   layerId: '0',
   // 要添加的要素，可以添加多个要素
   features: [lineString]
 })
.then((res) => {
  //成功回调函数
  console.log('添加要素: ', res)
})
.catch((res) => {
  //失败回调函数
  console.log('添加要素失败: ', res)
})

基于矢量图层的要素新增示例

// 初始化资源服务
// ES5引入方式
const { ResourceServer} = zondy.service
const { Point} = zondy.geometry
const { Feature } = zondy
// ES6引入方式
import { ResourceServer,Point,Feature } from "@mapgis/webclient-common"
const resourceServer = new ResourceServer({
  // 目录服务基地址，port可填6163(.net服务)或者8089(Java服务)
  url: 'http://localhost:6163/igs/rest/mrcs'
})
// 查询数据库表结构
resourceServer.queryGDBPInfo({
  // 要查询的gdbp的url
  gdbpUrl: 'gdbp://MapGisLocal/ClientTheme/sfcls/湖北省市驻地'
})
.then((result) => {
  // 表结构为result.data.FieldAtt
  // 创建一个要素
  const feature = new Feature({
    // 设置要素id，若id已在数据库中存在，则自增id
    id: 0,
    // 设置几何，支持点、多点、线、多线、区、多区
    geometry: new Point({
      coordinates: [110.66482, 31.747766]
    }),
    // 这里的属性一定要和数据库的表结构一一对应，顺序也不能出错
    attributes: {
      "CODE": "1",
      "NAME": "神龙架林区",
      "mpLayer": "0"
    },
    //设置样式
    styleInfo: {}
  })
  // 创建新增要素的结构体
  const featureSet = {
    // 设置表结构，必填
    AttStruct: result.data.FieldAtt,
    // 设置要添加的要素，客串多个要素
    SFEleArray: [feature.toOldIGSFeature()]
  }
  // 添加要素
  featureServer.addFeature({
    // 新增要素的结构体
    featureSet: featureSet,
    // gdbo地址，仅支持单表添加
    gdbp: 'gdbp://MapGisLocal/ClientTheme/sfcls/湖北省市驻地'
  })
  .then((result) => {
     console.log('新增要素成功：', result);
  })
  .catch((result) => {
      console.log('新增要素失败：', result);
  })
})
.catch((result) => {
    console.log('查询GDBO失败：', result);
})

基于矢量文档的要素新增示例

// 初始化资源服务
// ES5引入方式
const { MultiPoint} = zondy.geometry
const { Feature } = zondy
// ES6引入方式
import { MultiPoint,Feature } from "@mapgis/webclient-common"
const resourceServer = new ResourceServer({
  // 目录服务基地址，port可填6163(.net服务)或者8089(Java服务)
  url: 'http://localhost:6163/igs/rest/mrcs'
})
// 查询数据库表结构
resourceServer.queryGDBPInfo({
  // 要查询的gdbp的url
  gdbpUrl: 'gdbp://MapGisLocal/ClientTheme/sfcls/湖北省市驻地'
})
.then((result) => {
  // 创建一个要素
  const feature = new Feature({
    // 设置要素id，若id已在数据库中存在，则自增id
    id: 0,
    // 设置几何，支持点、多点、线、多线、区、多区
    geometry: new MultiPoint({
      coordinates: [
        [109.47509, 30.270342],
        [111.27724, 30.706085]
      ]
    }),
    // 这里的属性一定要和数据库的表结构一一对应
    attributes: {
      "CODE": "0",
      "Name": "测试点多点2",
      "mpLayer": "0"
    },
    // 设置样式
    styleInfo: {}
  })

  // 创建新增要素的结构体
  const featureSet = {
   // 设置表结构，必填
    AttStruct: result.data.FieldAtt,
    // 设置要添加的要素，客串多个要素
    SFEleArray: [feature.toOldIGSFeature()]
  }

  // 添加要素
  featureServer.addFeature({
    // 新增要素的结构体
    featureSet: featureSet,
    // 地图在文档下的序号，从0开始编号
    mapIndex: 0,
    // 图层序号，从0开始编号
    layerIndex: 2
  })
  .then((result) => {
    console.log('新增要素成功：', result);
  })
  .catch((result) => {
    console.log('新增要素失败：', result);
  })
})
.catch((result) => {
    console.log('查询GDBO失败：', result);
})

# deleteFeature(options, GDBPOptions, DocOptions)

参数:

示例

IGS2.0的要素删除示例

// 删除要素
featureServer.deleteFeature({
  // 图层id
  layerId: '0',
  // 要删除的要素id，多个要素id以','分割
  objectIds: '0,1,2,3,5,6'
})
.then((res)=>{
  console.log('要素删除成功：', res);
})
.catch((res)=>{
  console.log('要素删除失败：', res);
})

基于矢量地图的要素删除示例

// 删除要素
featureServer.deleteFeature({
  // gdbp的url
  gdbp: 'gdbp://MapGisLocal/ClientTheme/sfcls/湖北省市驻地',
  // 要删除的要素id，多个id以','分割
  objectIds: '18053'
})
.then((res)=>{
  console.log('要素删除成功：', res);
})
.catch((res)=>{
  console.log('要素删除失败：', res);
})

基于基于矢量文档的要素删除示例

// 删除要素
featureServer.deleteFeature({
  // 地图在文档下的序号，从0开始编号
  mapIndex: 0,
  // 图层序号，从0开始编号
  layerIndex: 2,
  // 要删除的要素id，多个id以','分割
  objectIds: '18057'
})
.then((res)=>{
  console.log('要素删除成功：', res);
})
.catch((res)=>{
  console.log('要素删除失败：', res);
})

# queryFeatureById(options)

参数:

示例

根据id获取指定图层指定要素

featureServer.queryFeatureById({
  // 图层id
  layerId: '0',
  // 要素id
  featureId: '437'
})
.then((res) => {
  console.log('要素查询成功：', res)
})
.catch((res) => {
  console.log('要素查询失败：', res)
})

# queryFeatures(options)

参数:

示例

IGS2.0的where查询

featureServer.queryFeatures({
  // 图层id
  layerId: '1',
  // where语句
  where: "NAME='天门市'"
})
.then((res)=>{
    console.log('查询成功：', res)
})
.catch((res)=>{
    console.log('查询失败：', res)
})

# queryFeaturesInLayers(options, GDBPOptions, DocsOptions)

参数:

示例

IGS2.0的几何查询

featureServer.queryFeaturesInLayers({
// ES5引入方式
const { Polygon } = zondy.geometry
// ES6引入方式
import { Polygon } from "@mapgis/webclient-common"
  // 几何查询条件
  geometry: new Polygon({
    coordinates: [
      [
        [110.74, 32.41],
        [112.89, 31.06],
        [110.15, 30.16],
        [110.74, 32.41]
      ]
    ]
  })
})
.then((res)=>{
  console.log('查询成功：', res);
})
.catch((res)=>{
  console.log('查询失败：', res);
})

基于矢量文档的where查询

featureServer.queryFeaturesInLayers({
  // 地图在文档下的序号，从0开始编号
  mapIndex: 0,
  // 图层序号，多图层间以“,”号分隔
  layerIndexes: '1',
  // where查询条件
  where: "NAME='黄石市'"
})
.then((res)=>{
  console.log('查询成功：', res);
})
.catch((res)=>{
  console.log('查询失败：', res);
})

基于矢量图层的where查询

featureServer.queryFeaturesInLayers({
  // 图层的gdbp地址，允许多个图层，图层间用“，”号分隔
  gdbp: 'gdbp://MapGisLocalPlus/ClientTheme/ds/epsg4326/sfcls/湖北省市级区划2',
  // where查询条件
  where: "NAME='天门市'",
})
.then((res)=>{
  console.log('查询成功：', res);
})
.catch((res)=>{
  console.log('查询失败：', res);
})

# queryLayerInfo(options)

参数:

示例

获取要素服务图层信息

featureServer.queryLayerInfo({
  // 图层id
  layerId: '0'
})
.then((res)=>{
  console.log('查询图层信息成功：', res)
})
.catch((res)=>{
  console.log('查询图层信息失败：', res)
})

# queryServerInfo(options)

参数:

Inherited From:

• BaseServer#queryServerInfo

示例

获取服务信息-回调方式

server.queryServerInfo({
  success: function (result) {
    console.log('请求成功：', result);
  },
  failure: function (result) {
    console.log('请求失败：', result);
  }
});

获取服务信息-promise方式

server.queryServerInfo({
})
.then(function (result) {
  console.log('请求成功：', result);
}).catch(function (result) {
  console.log('请求失败：', result);
});

# updateFeature(options, GDBPOptions)

参数:

示例

IGS2.0的要素更新示例

// 创建线要素
// ES5引入方式
const { Feature } = zondy
const { LineString } = zondy.geometry
// ES6引入方式
import { Feature } from "@mapgis/webclient-common"
const lineString = new Feature({
  // 更新要素时需要传一个FID来指定要素，其他的属性值可以根据需求来设置
  attributes: { FID:'0' },
  // 更新几何，注意几何一定要是GDBP表对应的几何类型
  geometry: new LineString({
    coordinates: [
      [110.74, 32.41],
      [112.89, 31.06],
      [110.15, 30.16]
    ]
  })
})
// 更新线要素
featureServer.updateFeature({
  // 图层id
  layerId: '1',
  // 要更新的要素，支持一次更新多个要素
  features: [lineString]
})
.then((res) => {
  console.log('要素更新成功: ', res)
})
.catch((res) => {
  console.log('要素更新失败: ', res)
})

基于矢量图层的要素更新示例

// 初始化资源服务
// ES5引入方式
const { ResourceServer } = zondy.service
const { Feature } = zondy
const { Point } = zondy.geometry
// ES6引入方式
import { ResourceServer,Feature, Point} from "@mapgis/webclient-common"
const resourceServer = new ResourceServer({
  // 目录服务基地址，port可填6163(.net服务)或者8089(Java服务)
  url: 'http://localhost:6163/igs/rest/mrcs'
})
// 查询数据库表结构
resourceServer.queryGDBPInfo({
  // 要查询的gdbp的url
  gdbpUrl: 'gdbp://MapGisLocal/ClientTheme/sfcls/湖北省市驻地'
})
.then((result) => {
  // 表结构为result.data.FieldAtt
  // 创建一个要素
  const feature = new Feature({
    // 设置更新要素的id
    id: 1220,
    // 设置几何，支持点、多点、线、多线、区、多区
    geometry: new Point({
      coordinates: [110.66482, 31.747766]
    }),
    // 更新属性
    attributes: {
      "CODE": "1",
      "NAME": "新的神龙架林区",
      "mpLayer": "0"
    }
  })
  // 创建更新要素的结构体
  const featureSet = {
    // 设置表结构，必填
    AttStruct: result.data.FieldAtt,
    // 设置要添加的要素，客串多个要素
    SFEleArray: [feature.toOldIGSFeature()]
  }
  // 更新要素
  featureServer.updateFeature({
    // 更新要素的结构体
    featureSet: featureSet,
    // gdbo地址，仅支持单表添加
    gdbp: 'gdbp://MapGisLocal/ClientTheme/sfcls/湖北省市驻地'
  })
  .then((result) => {
     console.log('更新要素成功：', result);
  })
  .catch((result) => {
      console.log('更新要素失败：', result);
  })
})
.catch((result) => {
    console.log('查询GDBO失败：', result);
})

基于矢量文档的要素更新示例

// 初始化资源服务
// ES5引入方式
const { ResourceServer } = zondy.service
const { Feature } = zondy
const { MultiPoint } = zondy.geometry
// ES6引入方式
import { ResourceServer,Feature,MultiPoint } from "@mapgis/webclient-common"
const resourceServer = new ResourceServer({
  // 目录服务基地址，port可填6163(.net服务)或者8089(Java服务)
  url: 'http://localhost:6163/igs/rest/mrcs'
})
// 查询数据库表结构
resourceServer.queryGDBPInfo({
  // 要查询的gdbp的url
  gdbpUrl: 'gdbp://MapGisLocal/ClientTheme/sfcls/湖北省市驻地'
})
.then((result) => {
  // 创建一个要素
  const feature = new Feature({
    // 设置要更新的要素id
    id: 0,
    // 设置几何，支持点、多点、线、多线、区、多区
    geometry: new MultiPoint({
      coordinates: [
        [109.47509, 30.270342],
        [111.27724, 30.706085]
      ]
    }),
    // 更新属性
    attributes: {
      "CODE": "0",
      "Name": "多点",
      "mpLayer": "0"
    }
  })

  // 创建更新要素的结构体
  const featureSet = {
   // 设置表结构，必填
    AttStruct: result.data.FieldAtt,
    // 设置要更新的要素，客串多个要素
    SFEleArray: [feature.toOldIGSFeature()]
  }

  // 更新要素
  featureServer.updateFeature({
    // 更新要素的结构体
    featureSet: featureSet,
    // 地图在文档下的序号，从0开始编号
    mapIndex: 0,
    // 图层序号，从0开始编号
    layerIndex: 2
  })
  .then((result) => {
    console.log('更新要素成功：', result);
  })
  .catch((result) => {
    console.log('更新要素失败：', result);
  })
})
.catch((result) => {
    console.log('查询GDBO失败：', result);
})

更新要素样式

// ES5引入方式
const { ResourceServer, FeatureServer } = zondy.service
const { Polygon } = zondy.geometry
const { Feature } = zondy
// ES6引入方式
import { ResourceServer, FeatureServer, Polygon, Feature } from "@mapgis/webclient-common"

// 初始化资源服务对象
const resourceServer = new ResourceServer({
  url: 'http://{ip}:{port}/igs/rest/services/system/ResourceServer'
})

// 初始化要素服务对象
const featureServer = new FeatureServer({
  url: 'http://{ip}:{port}/igs/rest/services/{要素服务名}/FeatureServer'
})

// 查询要素图层信息
featureServer.queryLayerInfo({
  // 要素图层ID
  layerId: '0'
}).then(function (layerInfo) {
  // 通过gdbp地址查询系统库
  resourceServer.queryTempDataInfo({
    // gdbp地址
    url: layerInfo.data.url
  }).then(function (tempDataInfo) {
    // 获取系统库名称
    const systemLibGuid = tempDataInfo.data.systemLibGuid
    // 查询要素
    featureServer.queryFeaturesInLayers({
      // 图层id
      layerId: '0',
      // 返回要素样式
      returnStyle: true
    }).then(function (featureInfo) {
      // 获取要素
      const featureData = featureInfo.data.layers[0].features[0]
      // 当通过颜色查找色号时，MapGIS桌面会通过颜色值的模糊匹配去查找色号，两个不同的颜色，查找出的色号可能会一样，因此无法通过颜色查找色号
      // 因此推荐用户通过querySystemColorList查询到指定系统库的颜色列表，然后再前端根据自己的项目实际情况，写一个调色板来选择色号，注意该接口需要设置翻页参数
      // 此步骤是可选项，也可以像下方代码，直接更改色号
      resourceServer.querySystemColorList({
        // 系统库ID
        sysLib: systemLibGuid,
        // 查询第几页
        page: 1,
        // 每页数量
        pageSize: 20,
      }).then(function (colorList) {
        console.log("色号列表:", colorList)
      })
      // 直接更改色号
      featureData.styleInfo.fillColor = 112
      // 构造要更新的要素对象
      const feature = new Feature({
        // 更新属性，可以更新部分属性，但是FID是必选项，{FID:'xxx'}
        attributes: featureData.attributes,
        // 更新几何，必须更新几何
        geometry: new Polygon({
          coordinates: featureData.geometry.coordinates
        }),
        // 更新样式，可选项
        styleInfo: featureData.styleInfo
      })
      // 更新要素对象
      featureServer.updateFeature({
        // 请求方式
        method: 'POST',
        // 要更新的图层ID
        layerId: '0',
        // 要更新要素对象
        features: [feature]
      })
    })
  })
})