弹层 - Popup

简单示例

点击地图任何地方弹出弹层。

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

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

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

mapView.on('click', (result) => {
  const {
    longitude,
    latitude
  } = result.mapPoint
  mapView.popup.open({
    title: '标题',
    content: `<p>这是一段内容</p>`,
    location: result.mapPoint // 或 [longitude, latitude]
  })
})

覆盖物弹层

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

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

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

const polygonGraphic = new Graphic({
  geometry: {
    type: "polygon",
    rings: [
      [-64.78, 32.3],
      [-66.07, 18.45],
      [-80.21, 25.78],
      [-64.78, 32.3]
    ]
  },
  symbol: {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  },
  attributes: {
    id: 'polygon_1'
  }
})

mapView.graphics.add(polygonGraphic)

mapView.on('click', (e) => {
  mapView.hitTest(e).then((e2) => {
    e2.results.forEach(e3 => {
      let attrs = e3.graphic.attributes
      if(attrs.id === 'polygon_1') { // 判断是否点击了多边形图层
        mapView.popup.open({
          title: '标题',
          content: `<p>这是一段内容</p>`,
          location: e.mapPoint
        })
      }
    })
  })
})

内置弹层

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

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

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

const polygonGraphic = new Graphic({
  geometry: {
    type: "polygon",
    rings: [
      [-64.78, 32.3],
      [-66.07, 18.45],
      [-80.21, 25.78],
      [-64.78, 32.3]
    ]
  },
  symbol: {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],
    outline: {
      color: [255, 255, 255],
      width: 1
    }
  },
  popupTemplate: {
    title: '标题',
    content: `<p>这是一段内容</p>`,
    overwriteActions: true // 覆盖现有的弹出操作
  }
})

mapView.graphics.add(polygonGraphic)

隐藏停靠控制按钮

mapView.popup.dockOptions = {
  buttonEnabled: false, // 隐藏停靠按钮
  breakpoint: false, // 禁用停靠
};

改变宽度

.esri-view-width-xlarge .esri-popup__main-container {
  width: auto;
}
.esri-popup__main-container {
  width: auto;
  min-width: 200px;
}