MapGIS Client for JavaScript API

# readonly _spatialReference

# center

# readonly engineType

# extent

# fullExtent

# readonly height

# maxScale

# minScale

# popup

# scale

# spatialReferenceLocked

# readonly stationary

# readonly width

# zoom

# static fromJSON(json)

参数:

# flyTo(options)

参数:

示例

中心点跳转示例

// ES5引入方式
const { Map } = zondy
const { MapView } = zondy.mapboxgl
// ES6引入方式
import { Map, MapView } from "@mapgis/webclient-mapboxgl-plugin"
// 初始化图层管理容器
map = new .Map();
// 初始化地图视图对象
mapView = new MapView({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
// 视点跳转
mapView.flyTo({
  // 跳转中心点
  center: [{x}, {y}],
  // 地图层级
  zoom: {zoom}
});

按范围跳转示例

// ES5引入方式
const { Map } = zondy
const { Extent } = zondy.geometry
const { MapView } = zondy.mapboxgl
// ES6引入方式
import { Map, MapView, Extent } from "@mapgis/webclient-mapboxgl-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
mapView = new MapView({
  // 视图id
  viewId: "view-id",
  // 图层管理容器
  map: map
});
mapView.flyTo({
  // 范围几何
  extent: new Extent({
     "xmin":10,
     "xmax":210,
     "ymin":0,
     "ymax":100,
  })
});

按范围跳转示例-拿到图层信息后跳转

// ES5引入方式
const { IGSMapImageLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer } from "@mapgis/webclient-mapboxgl-plugin"
const igsMapImageLayer = new IGSMapImageLayer({
  url: 'http://192.168.82.89:8089/igs/rest/services/Map/Hubei4326/MapServer'
});
map.add(igsMapImageLayer);
// 图层加载完毕
igsMapImageLayer.on('layer-view-created', function (result) {
  console.log("加载完毕:", result.layer)
  //视点跳转
  mapView.flyTo({
    extent: result.layer.extent
  });
})

# getCenter()

# getExtent()

# getScale()

# getSize()

# getZoom()

# goTo(goToTarget, options)

参数:

示例

中心点跳转示例

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

按范围跳转示例

// ES5引入方式
const { Map } = zondy
const { Extent, Circle } = zondy.geometry
const { MapView } = zondy.mapboxgl
// ES6引入方式
import { Map } from "@mapgis/webclient-common"
import { MapView } from "@mapgis/webclient-mapboxgl-plugin"
// 初始化图层管理容器
map = new Map();
// 初始化地图视图对象
mapView = new MapView({
  // 视图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",
})
mapView
  .goTo({
    target: [extent1, geometry2],
  })
  .then(() => {
    console.log("gotoExtent callback")
  })

# hitTest(screenPoint)

参数:

示例

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

// ES5引入方式
const { Map, Feature } = zondy
const { Point, Polygon, MultiPolygon ,Extent, Circle } = zondy.geometry
const { GraphicsLayer, IGSFeatureLayer, IGSTileLayer } = zondy.layer
const { MapView } = zondy.mapboxgl
// ES6引入方式
import { MapView } from "@mapgis/webclient-mapboxgl-plugin";
import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
this.mapView = new MapView({
  // 视图id
  viewId: "mapgis-2d-viewer",
  // 图层管理容器
  map: map,
})
// 创建一个要素crs
const feature = [
  new Feature({
    id: '11113',
    geometry: new Circle({
      center: [113, 35],
      radius: 10000,
      radiusUnit: 'kilometers',
    })
  }),
  new Feature({
    id: '11114',
    geometry: new Polygon({
      coordinates: [
        // 外圈
        [
          [113.0, 29.0],
          [116.0, 29.0],
          [116.0, 35.0],
          [113.0, 35.0],
          [113.0, 29.0]
        ]
      ]
    })
  }),
  new Feature({
    id: '11115',
    geometry:new MultiPolygon({
      coordinates: [
        [
          // 外圈
          [
            [112.0, 28.0],
            [115.0, 28.0],
            [115.0, 30.0],
            [112.0, 30.0],
            [112.0, 28.0]
          ],
          // 第一个内圈
          [
            [112.2, 28.2],
            [112.2, 29.8],
            [114.8, 29.8],
            [114.8, 28.2],
            [112.2, 28.2]
          ]
        ]
      ]
    })
  })
]
// 初始化几何图层
const graphicsLayer = new GraphicsLayer({
  graphics:feature
})
map.add(this.graphicsLayer)
const result = this.mapView.hitTest({x:1100,y:600})

# takeScreenshot(optionsopt)

参数:

示例

屏幕快照

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

# toJSON()

# toMap(screenPoint)

参数:

示例

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

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

# toScreen(point)

参数:

示例

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

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