地图视图 - MapView

约 403 字大约 1 分钟

简单示例

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"

const map = new Map({
  basemap: 'dark-gray',
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
})

基础设置

// 设置旋转角度为 270
mapView.rotation = 270

// 设置缩放层级为 18
mapView.zoom = 18

// 设置中心点为 [-112, 38]
mapView.center = [-112, 38]

// 设置地图比例为 1:24000
mapView.scale = 24000

限定范围

import Extent from "@arcgis/core/geometry/Extent.js"

const extent = new Extent({
  xmin: -9177882,
  ymin: 4246761,
  xmax: -9176720,
  ymax: 4247967,
  spatialReference: {
    wkid: 102100
  }
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
  extent // 将覆盖缩放级别
})

常见的一些 WKID:

  • 3857:Web墨卡托投影,用于大多数Web地图应用程序。
  • 4326:WGS84地理坐标系,经纬度坐标系。
  • 102100 / 102200:ArcGIS Online 底图使用的Web墨卡托投影。
  • 3413 / 3031:南极和北极的极面投影。
  • 27700:英国国家格网,适用于英格兰、威尔士和苏格兰。

背景色

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
  background: {
    color: 'red'
  }
})

弹层

禁用弹层

mapView.popupEnabled = false

手动打开弹层

mapView.openPopup({
  // ...
})

弹层停靠设置

mapView.popup = {
  dockEnabled: true,
  dockOptions: {
    position: "top-left",
    breakpoint: false
  }
}

graphics

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import Graphic from "@arcgis/core/Graphic"

const polygonGraphic = new Graphic({
  geometry: {
    type: "polygon",
    rings: [
      [  // 第1个 ring
        [-97.06138,32.837,35.1,4.8],
        [-97.06133,32.836,35.2,4.1],
        [-97.06124,32.834,35.3,4.2],
        [-97.06138,32.837,35.1,4.8]  // 和起点一样
      ], [  // 第2个 ring
        [-97.06326,32.759,35.4],
        [-97.06298,32.755,35.5],
        [-97.06153,32.749,35.6],
        [-97.06326,32.759,35.4]  // 和起点一样
      ]
    ]
  },
  symbol: {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  }
})

const map = new Map({
  basemap: 'dark-gray',
  layers: [ graphicLayer ]
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  graphics: [ polygonGraphic ]
})

// 或
mapView.graphics.add(polygonGraphic)

// 删除
mapView.graphics.remove(polygonGraphic)
上次编辑于: