MapGIS Client for JavaScript API

# center

# readonly engineType

# extent

# readonly height

# maxZoom

# minZoom

# popup

# scale

# readonly spatialReference

# readonly stationary

# readonly width

# zoom

# static fromJSON(json)

参数:

# flyTo(options)

参数:

示例

按范围跳转

// ES5引入方式
const { Map } = zondy
const { IGSMapImageLayer } = zondy.layer
const { LayerEventType } = zondy.Enum
const { Extent } = zondy.geometry
const { SceneView } = zondy.cesium
// ES6引入方式
import { Map, SceneView, IGSMapImageLayer, LayerEventType, Extent } from "@mapgis/webclient-common"
import { SceneView} from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
  // 视图id
  viewId: "mapgis-3d-viewer",
  // 图层管理容器
  map: map
});
// 添加一个地图图层
const igsMapImageLayer = new IGSMapImageLayer({
  url: 'http://192.168.82.89:8089/igs/rest/services/Map/Hubei4326/MapServer'
});
map.add(igsMapImageLayer);
// 图层加载完毕
igsMapImageLayer.on(LayerEventType.layerViewCreated, function (result) {
  console.log("加载完毕:", result.layer)
  // 视点跳转
  sceneView.flyTo({
    extent: new Extent({
      xmin: 108.34341,
      ymin: 29.01258222765238,
      xmax: 116.15093956121316,
      ymax: 33.29320177370206
    })
  })
})

跳转中心点

// ES5引入方式
const { Map } = zondy
const { IGSMapImageLayer } = zondy.layer
const { LayerEventType } = zondy.Enum
const { SceneView } = zondy.cesium
// ES6引入方式
import { Map, IGSMapImageLayer, LayerEventType } from "@mapgis/webclient-common"
import { SceneView } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
  // 视图id
  viewId: "mapgis-3d-viewer",
  // 图层管理容器
  map: map
});
// 添加一个地图图层
const igsMapImageLayer = new IGSMapImageLayer({
  url: 'http://192.168.82.89:8089/igs/rest/services/Map/Hubei4326/MapServer'
});
map.add(igsMapImageLayer);
// 图层加载完毕
igsMapImageLayer.on(LayerEventType.layerViewCreated, function (result) {
  console.log("加载完毕:", result.layer)
  // 视点跳转
  sceneView.flyTo({
    center: [113, 30, 1000000]
  })
})

# getCenter()

# getExtent()

# getInnerLayer(layer)

参数:

# getScale()

# getSize()

# getZoom()

# goTo(goToTarget, options)

参数:

示例

中心点跳转示例

// ES5引入方式
const { Map } = zondy
const { SceneView } = zondy.cesium
// ES6引入方式
import { Map } from "@mapgis/webclient-common"
import { SceneView } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
map = new .Map();
// 初始化地图视图对象
sceneView = new SceneView({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
// 视点跳转
sceneView.goTo({
  // 跳转中心点
  center: [115.47643872463577, 30.980700423496124],
  // 地图层级
  zoom: 8
});

按范围跳转示例

// ES5引入方式
const { Map } = zondy
const { Extent, Circle } = zondy.geometry
const { SceneView } = zondy.cesium
// ES6引入方式
import { Map, Extent, Circle } from "@mapgis/webclient-common"
import { SceneView } from "@mapgis/webclient-cesium-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
sceneView = new SceneView({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
const extent1 = new Extent({
  xmin: 111.88463529230717,
  ymin: 28.646934514163803,
  xmax: 116.89989408129225,
  ymax: 33.07991791253288,
})
const geometry2 = new Circle({
  center: [111, 29],
  radius: 100,
  radiusUnit: "kilometers",
})
sceneView
  .goTo({
    target: [extent1, geometry2],
  })
  .then(() => {
    console.log("gotoExtent callback")
  })

# hitTest(screenPoint)

参数:

示例

根据基础图层对象或者图层id查询并返回实际图层

// ES5引入方式
const { Map, Feature } = zondy
const { Point, Polygon, MultiPolygon ,Extent } = zondy.geometry
const { GraphicsLayer, IGSFeatureLayer, IGSTileLayer } = zondy.layer
const { SceneView } = zondy.cesium
// ES6引入方式
import { SceneView } from "@mapgis/webclient-leaflet-plugin";
import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
this.sceneView = new SceneView({
  // 视图id
  viewId: "mapgis-3d-viewer",
  // 图层管理容器
  map: map,
})
// 创建一个要素
const feature = [
  new Feature({
    id: '11111',
    geometry: new Point({ coordinates: [113, 30] }),
  }),
  new Feature({
    id: '11112',
    geometry: new Point({ coordinates: [113, 30.15] }),
  }),
  new Feature({
    id: '11112',
    geometry: new Point({ coordinates: [113, 35] }),
  }),
]
// 初始化几何图层
const graphicsLayer = new GraphicsLayer({
  graphics:feature
})
map.add(this.graphicsLayer)
const result = this.sceneView.hitTest({x:1000,y:600})

# setCenter(value)

参数:

# setExtent(value)

参数:

# takeScreenshot(optionsopt)

参数:

示例

屏幕快照

// ES5引入方式
var { Map, SceneView } = zondy
var { PictureFormat } = zondy.Enum
// ES6引入方式
import { Map, SceneView } from "@mapgis/webclient-cesium-plugin"
import { PictureFormat } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
  // 二维场景视图的容器(html的div标签)ID
  viewId: "二维场景视图的容器的id",
  // 图层管理容器
  map: map
})
// 设置屏幕快照参数
const screenshotOptions: {
   format: PictureFormat.png
}
// 开始屏幕快照
sceneView.takeScreenshot(screenshotOptions).then((result) => {
  // 获取base64格式的url字符串
  console.log("dataUrl:", result.dataUrl)
})

# toJSON()

# toMap(screenPoint)

参数:

示例

屏幕像素坐标点转地理坐标示例

// ES5引入方式
const { Map } = zondy
const { Point } = zondy.geometry
const { SceneView } = zondy.cesium
// ES6引入方式
import { SceneView } from "@mapgis/webclient-cesium-plugin"
import { Map, Point } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
 // 视图id
 viewId: "mapgis-3d-viewer",
 // 图层管理容器
 map: map,
})
const screenPoint = { x: 900, y: 500 }
sceneView.toMap(screenPoint)

# toScreen(point)

参数:

示例

地理坐标点转屏幕像素坐标示例

// ES5引入方式
const { Map } = zondy
const { Point, Extent } = zondy.geometry
const { SceneView } = zondy.cesium
// ES6引入方式
import { SceneView } from "@mapgis/webclient-cesium-plugin"
import { Map, Point, Extent } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
  // 视图id
  viewId: "mapgis-2d-viewer",
  // 图层管理容器
  map: map
});
const geoPoint = new Point({ coordinates: [123, 23, 0] })
sceneView.toScreen(geoPoint)