Arcgis popup、popupTemplate、Search、FeatureForm、applyEdits学习记录及图层要素icon编辑修改

最新推荐文章于 2024-08-28 21:01:57 发布
最新推荐文章于 2024-08-28 21:01:57 发布
阅读量1.7k 收藏 8
点赞数 3
分类专栏： arcgis 文章标签： html javascript arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45399002/article/details/120062185
版权

Arcgis 点标记、popup添加

注：popup主要作用于view

1、组件引入

import marker from './images/marker.svg' // icon图标
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import esriConfig from '@arcgis/core/config'
import Graphic from '@arcgis/core/Graphic'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'

2、地图实例注册、点击事件绑定、点标记生成

function init() {
  esriConfig.apiKey = '你的key'
  const map = new Map({
    // arcgis-navigation arcgis-imagery  arcgis-light-gray //基础图层
    basemap: 'arcgis-navigation', // Basemap layer service
  })
  const view = new MapView({
    map: map,
    center: [-118.80657463861, 34.000593060888],
    zoom: 11, 
    container: 'viewDiv', 
  })
  // 点
  const graphicsLayer = new GraphicsLayer()
  map.add(graphicsLayer) // 将 GraphicsLayer 添加到地图实例中
  // picture-marker  icon 标记  simple-marker点标记
  const simpleMarkerSymbol = {
    type: 'picture-marker',
    width: '20px',
    height: '20px',
    url: marker,
  }
  view.popup.autoOpenEnabled = false // 此属性指示Popup需要允许或禁止单击事件传播。
  view.on('click', function viewClick(event) {
    // 添加地图点击事件
    const { type, latitude, longitude } = event.mapPoint
    graphicsLayer.add(
      new Graphic({
        geometry: { type, latitude, longitude },
        symbol: simpleMarkerSymbol,
      })
    )
  })
}

3、在2的基础上添加popup

view.popup.autoOpenEnabled = false  
view.on('click', function viewClick(event) {
    const { type, latitude, longitude } = event.mapPoint
    graphicsLayer.add(
      new Graphic({
        geometry: { type, latitude, longitude },
        symbol: simpleMarkerSymbol,
      })
    )
    var popupTemplate = {
      title: '点击了',
      location: event.mapPoint,
      content: `点击在${event.mapPoint.longitude},${event.mapPoint.latitude}上`,
    }
    view.popup.open(popupTemplate)
  })

popupTemplate

注：PopupTemplate是一个针对Layer和Graphic的弹窗

1、基础popupTemplate

// 这种方式不需要引入popupTemplate 组件
var template = {
   title: '年: {data_year}',// {}内为数据变量
   content: '...',
 }
const layer = new FeatureLayer({
  url: 'https://services3.arcgis.com/tgYU2qbxZbWPWXPL/arcgis/rest/services/toimages/FeatureServer/0',
  popupTemplate: template
})
// 或者
  const layer = new FeatureLayer({
    url: 'https://services3.arcgis.com/tgYU2qbxZbWPWXPL/arcgis/rest/services/toimages/FeatureServer/0'
  })
 layer.popupTemplate = {
  content: '年: {data_year}',
 }

2、表格格式

import PopupTemplate from '@arcgis/core/PopupTemplate'
  let popupTemplate = new PopupTemplate({
    title: '{data_year} in {Shape_Leng}',
    outFields: ['*'],// 表示显示所有字段
    content: [
      {
        type: 'fields',
        fieldInfos: [
          {
            fieldName: 'data_year', // 字段名
            label: 'Married %', 
          },
          {
            fieldName: 'dq_name',
            label: 'People Married',
          },
        ],
      },
    ],
  })
    const layer = new FeatureLayer({
    url: 'https://services3.arcgis.com/tgYU2qbxZbWPWXPL/arcgis/rest/services/toimages/FeatureServer/0',
    popupTemplate: popupTemplate,
  })

图层编辑、修改、删除

注：图层必须现在控制台允许编辑(Dashboard/Layers/Settings/Editing settings）

1、组件引入

import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import esriConfig from '@arcgis/core/config'
import Graphic from '@arcgis/core/Graphic'
import Expand from '@arcgis/core/widgets/Expand'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import FeatureForm from '@arcgis/core/widgets/FeatureForm'
import FeatureTemplates from '@arcgis/core/widgets/FeatureTemplates'

2、图层引入、地图注册

  esriConfig.apiKey = '你的key'
  const featureLayer = new FeatureLayer({
    url: 'https://services3.arcgis.com/tgYU2qbxZbWPWXPL/arcgis/rest/services/toimages/FeatureServer/0',
    outFields: ['*'],
    id: 'incidentsLayer', // id字段不传则无法编辑、删除(主要用于判断点击的地图点是否在此图层上)
  })
    const map = new Map({
    basemap: 'dark-gray-vector',
    layers: [featureLayer],
  })
  const view = new MapView({
    container: 'viewDiv',
    map: map,
    center: [113.5861, 25.037278],
    zoom: 10,
  })

3、添加FeatureForm、FeatureTemplates

  const featureForm = new FeatureForm({
    container: 'formDiv',
    layer: featureLayer,
    fieldConfig: [
      {
        name: 'DATA_YEAR',
        label: 'Choose incident type',
      },
      {
        name: 'CNTY_CODE',
        label: 'Describe',
      },
    ],
  })
    const templates = new FeatureTemplates({
    container: 'addTemplatesDiv',
    layers: [featureLayer],
  })

FeatureForm 可以定义要编辑的属性

FeatureTemplates 主要目的是显示 来自一个或多个要素图层的模板。除了显示要素图层模板之外，还可以对模板进行过滤和分组，以提供更轻松的编辑体验。小部件侦听最终用户以在小部件中选择特定模板。它的select事件被触发并返回生成的模板信息。

4、FeatureTemplates select事件监听、FeatureForm submint事件监听

featureForm.on('submit', () => {
    if (editFeature) {
      const updated = featureForm.getValues()
      Object.keys(updated).forEach((name) => {
        editFeature.attributes[name] = updated[name]
      })
      const edits = {
        updateFeatures: [editFeature],
      }
      applyEditsToIncidents(edits)
      document.getElementById('viewDiv').style.cursor = 'auto'
    }
  })
selectExistingFeature()  
templates.on('select', (evtTemplate) => {
    attributes = evtTemplate.template.prototype.attributes
    unselectFeature()
    document.getElementById('viewDiv').style.cursor = 'crosshair'
    const handler = view.on('click', (event) => {
      handler.remove()
      event.stopPropagation()
      featureForm.feature = null
      if (event.mapPoint) {
        point = event.mapPoint.clone()
        point.z = undefined
        point.hasZ = false
        editFeature = new Graphic({
          geometry: point,
          attributes: {
            IncidentType: attributes.IncidentType,
          },
        })
        const edits = {
          addFeatures: [editFeature],
        }
        applyEditsToIncidents(edits)
        document.getElementById('viewDiv').style.cursor = 'auto'
      } else {
        console.error('event.mapPoint is not defined')
      }
    })
  })

  function applyEditsToIncidents(params) {
    featureLayer
      .applyEdits(params)
      .then((editsResult) => {
        if (editsResult.addFeatureResults.length > 0 || editsResult.updateFeatureResults.length > 0) {
          unselectFeature()
          let objectId
          if (editsResult.addFeatureResults.length > 0) {
            objectId = editsResult.addFeatureResults[0].objectId
          } else {
            featureForm.feature = null
            objectId = editsResult.updateFeatureResults[0].objectId
          }
          selectFeature(objectId)
          if (addFeatureDiv.style.display === 'block') {
            toggleEditingDivs('none', 'block')
          }
        }
        else if (editsResult.deleteFeatureResults.length > 0) {
          toggleEditingDivs('block', 'none')
        }
      })
      .catch((error) => {
        console.log('error = ', error)
      })
  }
  function selectExistingFeature() {
    view.on('click', (event) => {
      unselectFeature()
      if (document.getElementById('viewDiv').style.cursor != 'crosshair') {
        view.hitTest(event).then((response) => {
          if (response.results.length === 0) {
            toggleEditingDivs('block', 'none')
          } else if (response.results[0].graphic && response.results[0].graphic.layer.id == 'incidentsLayer') {
            if (addFeatureDiv.style.display === 'block') {
              toggleEditingDivs('none', 'block')
            }
            selectFeature(response.results[0].graphic.attributes[featureLayer.objectIdField])
          }
        })
      }
    })
  }

  function selectFeature(objectId) {
    featureLayer
      .queryFeatures({
        objectIds: [objectId],
        outFields: ['*'],
        returnGeometry: true,
      })
      .then((results) => {
        if (results.features.length > 0) {
          editFeature = results.features[0]
          featureForm.feature = editFeature
          view.whenLayerView(editFeature.layer).then((layerView) => {
            highlight = layerView.highlight(editFeature)
          })
        }
      })
  }
// featureForm定位到地图上
  const editExpand = new Expand({
    expandIconClass: 'esri-icon-edit',
    expandTooltip: 'Expand Edit',
    expanded: true,
    view: view,
    content: document.getElementById('editArea'),
  })
  view.ui.add(editExpand, 'top-right') 
  // input boxes for the attribute editing
  const addFeatureDiv = document.getElementById('addFeatureDiv')
  const attributeEditing = document.getElementById('featureUpdateDiv')

  // Controls visibility of addFeature or attributeEditing divs
  function toggleEditingDivs(addDiv, attributesDiv) {
    addFeatureDiv.style.display = addDiv
    attributeEditing.style.display = attributesDiv

    document.getElementById('updateInstructionDiv').style.display = addDiv
  }

  function unselectFeature() {
    if (highlight) {
      highlight.remove()
    }
  }
  document.getElementById('btnUpdate').onclick = () => {
    featureForm.submit()
  }

  document.getElementById('btnDelete').onclick = () => {
    const edits = {
      deleteFeatures: [editFeature],
    }
    applyEditsToIncidents(edits)
    document.getElementById('viewDiv').style.cursor = 'auto'
  }

5、给图层添加popupTemplate

  let popupTemplate = new PopupTemplate({
    title: '{type}',
    outFields: ['*'],
    content: [
      {
        type: 'fields',
        fieldInfos: [
          {
            fieldName: 'type',
            label: '类型',
          },
          {
            fieldName: 'name',
            label: '名字',
          },
          {
            fieldName: 'description',
            label: '描述',
          },
          {
            fieldName: 'range',
            label: '项目周期',
          },
          {
            fieldName: 'process',
            label: '项目进度',
          },
        ],
      },
    ],
  })
  popupTemplate.overwriteActions = false
// 在layers中添加popupTemplate: popupTemplate,

6、给图层的要素添加label


    const labelingInfo = [
      new LabelClass({
        labelExpressionInfo: { expression: '$feature.name' },
        symbol: {
          type: 'label-3d',
          symbolLayers: [
            {
              type: 'text',
              material: {
                color: '#FFFFFF',
              },
              halo: {
                size: 1,
                color: [0, 0, 0, 0.5],
              },
              font: {
                size: 11,
                family: 'sans-serif',
              },
            },
          ],
        },
      }),
    ]
    // 在layers中添加labelingInfo: labelingInfo,

效果图

在这里插入图片描述

整个流程完整代码如下：

<template>
  <div class="content">
    <div id="editArea" class="editArea-container esri-widget--panel">
      <div id="addFeatureDiv" style="display:block;">
        <h3 class="list-heading">Report Incidents</h3>
        <ul style="font-size: 13px; padding-left: 1.5em;">
          <li>Select template from the list</li>
          <li>Click on the map to create a new feature</li>
          <li>Update associated attribute data</li>
          <li>Click <i>Update Incident Info</i></li>
        </ul>
        <div id="addTemplatesDiv" style="background:#fff;"></div>
      </div>

      <div id="featureUpdateDiv" style="display:none; margin-top: 1em;">
        <h3 class="list-heading">Enter the incident information</h3>
        <div id="attributeArea">
          <div id="formDiv"></div>
          <input type="button" class="esri-button" value="Update incident info" id="btnUpdate" />
        </div>
        <br />
        <div id="deleteArea">
          <input type="button" class="esri-button" value="Delete incident" id="btnDelete" />
        </div>
      </div>

      <div id="updateInstructionDiv" style="text-align:center; display:block">
        <p class="or-wrap"><span class="or-text">Or</span></p>
        <p id="selectHeader">Select an incident to edit or delete.</p>
      </div>
    </div>
    <div id="viewDiv"></div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import Map from '@arcgis/core/Map'
// import MapView from "@arcgis/core/views/MapView";
import esriConfig from '@arcgis/core/config'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import ElevationLayer from '@arcgis/core/layers/ElevationLayer'
import SceneView from '@arcgis/core/views/SceneView'
import LabelClass from '@arcgis/core/layers/support/LabelClass'
import Basemap from '@arcgis/core/Basemap'
import TileLayer from '@arcgis/core/layers/TileLayer'

import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import LayerList from '@arcgis/core/widgets/LayerList'
import PopupTemplate from '@arcgis/core/PopupTemplate'

// 加点
import Graphic from '@arcgis/core/Graphic'
import FeatureForm from '@arcgis/core/widgets/FeatureForm'
import Expand from '@arcgis/core/widgets/Expand'
import FeatureTemplates from '@arcgis/core/widgets/FeatureTemplates'

// 坐标转换
import SpatialReference from '@arcgis/core/geometry/SpatialReference'

export default {
  data() {
    return {}
  },
  setup() {
    const map = ref(null)
    onMounted(init)
    return { map }
  },
}
function init() {
  let editFeature, highlight, point, attributes
  const WKT = {
    GZ2000:
 'PROJCS["GUANGZHOU2000",GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Gauss_Kruger"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",113.28],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",0.0],UNIT["Meter",1.0]]',
  }
  const spatialRefference = new SpatialReference({
    wkt: WKT.GZ2000,
  })
  esriConfig.apiKey = '你的key-'
  const basemap = new Basemap({
    baseLayers: [
      // 新龙地图
      new TileLayer({
        url: '你的底图url',
        maxScale: 0,
        spatialRefference,
      }),
    ],
  })
  const map = new Map({
    ground: {
      layers: [
        new ElevationLayer({
          url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
        }),
      ],
      surfaceColor: '#004C73',
      opacity: 0.7,
    },
    basemap: basemap,
  })
  let popupTemplate = new PopupTemplate({
    title: '{type}',
    outFields: ['*'],
    content: [
      {
        type: 'fields',
        fieldInfos: [
          {
            fieldName: 'type',
            label: '类型',
          },
          {
            fieldName: 'name',
            label: '名字',
          },
          {
            fieldName: 'description',
            label: '描述',
          },
          {
            fieldName: 'range',
            label: '项目周期',
          },
          {
            fieldName: 'process',
            label: '项目进度',
          },
        ],
      },
    ],
  })
  popupTemplate.overwriteActions = false
  const featureLayer = new FeatureLayer({
    url: '你的图层',
  })

  // Arcgis服务器自建几何图层
  const pointLayer = new FeatureLayer({
    url: 'https://services3.arcgis.com/epoWLYQESXEPLkZd/arcgis/rest/services/0830/FeatureServer/0',
    popupTemplate: popupTemplate,
    id: 'incidentsLayer',
    labelingInfo: [
      new LabelClass({
        labelExpressionInfo: { expression: '$feature.name' },
        symbol: {
          type: 'label-3d',
          symbolLayers: [
            {
              type: 'text',
              material: {
                color: '#FFFFFF',
              },
              halo: {
                size: 1,
                color: [0, 0, 0, 0.5],
              },
              font: {
                size: 11,
                family: 'sans-serif',
              },
            },
          ],
        },
      }),
    ],
  })

  // client几何图层
  const graphicsLayer = new GraphicsLayer()
  map.addMany([pointLayer, graphicsLayer, featureLayer])
  const view = new SceneView({
    container: 'viewDiv',
    map: map,
    qualityProfile: 'high',
    camera: {
      position: [113.88951058035408, 2.2075023372885347, 1604.65501],
      heading: 0.51,
      tilt: 78.99,
    },
    spatialRefference,
  })


  const layerList = new LayerList({
    view: view,
  })
  view.ui.add(layerList, 'bottom-left')

  const featureForm = new FeatureForm({
    container: 'formDiv',
    layer: pointLayer,
    fieldConfig: [
      {
        name: 'name',
        label: '点位名称',
      },
      {
        name: 'id',
        label: 'id',
      },
      {
        name: 'type',
        label: '类型',
      },
      {
        name: 'range',
        label: '项目周期',
      },
      {
        name: 'process',
        label: '项目进度',
      },
    ],
  })

  featureForm.on('submit', () => {
    if (editFeature) {
      const updated = featureForm.getValues()
      Object.keys(updated).forEach((name) => {
        editFeature.attributes[name] = updated[name]
      })

      const edits = {
        updateFeatures: [editFeature],
      }
      applyEditsToIncidents(edits)
      document.getElementById('viewDiv').style.cursor = 'auto'
    }
  })

  selectExistingFeature()

  const templates = new FeatureTemplates({
    container: 'addTemplatesDiv',
    layers: [pointLayer],
  })

  templates.on('select', (evtTemplate) => {
    attributes = evtTemplate.template.prototype.attributes
    unselectFeature()
    document.getElementById('viewDiv').style.cursor = 'crosshair'
    const handler = view.on('click', (event) => {
      handler.remove()
      event.stopPropagation()
      featureForm.feature = null

      if (event.mapPoint) {
        point = event.mapPoint.clone()
        point.z = undefined
        point.hasZ = false

        editFeature = new Graphic({
          geometry: point,
          attributes: {
            IncidentType: attributes.IncidentType,
          },
        })
        const edits = {
          addFeatures: [editFeature],
        }
        applyEditsToIncidents(edits)
        document.getElementById('viewDiv').style.cursor = 'auto'
      } else {
        console.error('event.mapPoint is not defined')
      }
    })
  })

  function applyEditsToIncidents(params) {
    pointLayer
      .applyEdits(params)
      .then((editsResult) => {
        if (editsResult.addFeatureResults.length > 0 || editsResult.updateFeatureResults.length > 0) {
          unselectFeature()
          let objectId
          if (editsResult.addFeatureResults.length > 0) {
            objectId = editsResult.addFeatureResults[0].objectId
          } else {
            featureForm.feature = null
            objectId = editsResult.updateFeatureResults[0].objectId
          }
          selectFeature(objectId)
          if (addFeatureDiv.style.display === 'block') {
            toggleEditingDivs('none', 'block')
          }
        }
        else if (editsResult.deleteFeatureResults.length > 0) {
          toggleEditingDivs('block', 'none')
        }
      })
      .catch((error) => {
        console.log('error = ', error)
      })
  }

  function selectExistingFeature() {
    view.on('click', (event) => {
      unselectFeature()
      if (document.getElementById('viewDiv').style.cursor != 'crosshair') {
        view.hitTest(event).then((response) => {
          if (response.results.length === 0) {
            toggleEditingDivs('block', 'none')
          } else if (response.results[0].graphic && response.results[0].graphic.layer.id == 'incidentsLayer') {
            if (addFeatureDiv.style.display === 'block') {
              toggleEditingDivs('none', 'block')
            }
            selectFeature(response.results[0].graphic.attributes[pointLayer.objectIdField])
          }
        })
      }
    })
  }
  function selectFeature(objectId) {
    pointLayer
      .queryFeatures({
        objectIds: [objectId],
        outFields: ['*'],
        returnGeometry: true,
      })
      .then((results) => {
        if (results.features.length > 0) {
          editFeature = results.features[0]
          featureForm.feature = editFeature
          view.whenLayerView(editFeature.layer).then((layerView) => {
            highlight = layerView.highlight(editFeature)
          })
        }
      })
  }
  const editExpand = new Expand({
    expandIconClass: 'esri-icon-edit',
    expandTooltip: 'Expand Edit',
    expanded: true,
    view: view,
    content: document.getElementById('editArea'),
  })
  view.ui.add(editExpand, 'top-right')
  const addFeatureDiv = document.getElementById('addFeatureDiv')
  const attributeEditing = document.getElementById('featureUpdateDiv')
  function toggleEditingDivs(addDiv, attributesDiv) {
    addFeatureDiv.style.display = addDiv
    attributeEditing.style.display = attributesDiv
    document.getElementById('updateInstructionDiv').style.display = addDiv
  }
  function unselectFeature() {
    if (highlight) {
      highlight.remove()
    }
  }

  document.getElementById('btnUpdate').onclick = () => {
    featureForm.submit()
  }
  document.getElementById('btnDelete').onclick = () => {
    const edits = {
      deleteFeatures: [editFeature],
    }
    applyEditsToIncidents(edits)
    document.getElementById('viewDiv').style.cursor = 'auto'
  }
}
</script>

<style lang="scss" scoped>
@import url('https://js.arcgis.com/4.20/esri/themes/light/main.css');
.content {
  margin: 0;
  padding: 0;
}
#viewDiv {
  padding: 0;
  margin: 0;
  height: 80vh;
  width: 70vw;
}
#formDiv {
  width: 100%;
}

.esri-item-list__scroller {
  overflow-y: visible;
}

.editArea-container {
  background: #fff;
  line-height: 1.5em;
  overflow: auto;
  padding: 12px 15px;
  width: 300px;
}

.list-heading {
  font-weight: normal;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #323232;
}

.or-wrap {
  background-color: #e0e0e0;
  height: 1px;
  margin: 2em 0;
  overflow: visible;
}

.or-text {
  background: #fff;
  line-height: 0;
  padding: 0 1em;
  position: relative;
  bottom: 0.75em;
}

/* override default styles */
.esri-feature-form {
  background: #fff;
}

.esri-feature-templates {
  width: 256px;
}

.esri-feature-templates__section-header {
  display: none;
}

.esri-feature-templates__section {
  box-shadow: none;
}

.esri-feature-templates__scroller {
  max-height: 200px;
}
</style>

Search 组件引入

1、组件引入

import Search from '@arcgis/core/widgets/Search'

2、注册到view中

  const view = new SceneView({
    container: 'viewDiv',
    map: map,
    qualityProfile: 'high',
    camera: {
      position: [113.88951058035408, 2.2075023372885347, 1604.65501],
      heading: 0.51,
      tilt: 78.99,
    },
    spatialRefference,
  })
  const searchWidget = new Search({
    view: view,
    includeDefaultSources: false,
    sources: [
      {
        layer: pointLayer,
        placeholder: 'search here',
        maxResults: 10,
        searchFields: ['name'],
        suggestionTemplate: '{name}',
      },
    ],
  })
  view.ui.add(searchWidget, {
    position: 'top-left',
    index: 2,
  })

JSON文件生成图层

1、图层转JSON文件
在这里插入图片描述

// 示例文件 注意 根据ArcMap导出的JSON 需要在features字段geometry添加type 可选值为 'extent','multipoint','point','polyline'，'polygon'
// features字段geometry x y属性需要看是否是正确的经纬度 如果不是改为经纬度
{
  "displayFieldName" : "",
  "fieldAliases" : {
    "FID" : "FID",
    "GB" : "GB",
    "CNTY_CODE" : "CNTY_CODE",
    "NAME" : "NAME",
    "PYNAME" : "PYNAME",
    "code99" : "code99",
    "FULLNAME" : "FULLNAME",
    "prov_name" : "prov_name",
    "dq_name" : "dq_name",
    "note1" : "note1",
    "note2" : "note2",
    "note3" : "note3",
    "Lon" : "Lon",
    "Lat" : "Lat",
    "DATA_YEAR" : "DATA_YEAR",
    "CLASID" : "CLASID"
  },
  "geometryType" : "point",
  "spatialReference" : {
    "wkt" : "PROJCS[\"WGS_1984_Albers\",GEOGCS[\"GCS_WGS_1984\",DATUM[\"D_WGS_1984\",SPHEROID[\"WGS_1984\",6378137.0,298.257223563]],PRIMEM[\"Greenwich\",0.0],UNIT[\"Degree\",0.0174532925199433]],PROJECTION[\"Albers\"],PARAMETER[\"false_easting\",0.0],PARAMETER[\"false_northing\",0.0],PARAMETER[\"central_meridian\",105.0],PARAMETER[\"standard_parallel_1\",25.0],PARAMETER[\"standard_parallel_2\",47.0],PARAMETER[\"latitude_of_origin\",0.0],UNIT[\"Meter\",1.0]]"
  },
  "fields" : [
    {
      "name" : "FID",
      "type" : "oid",
      "alias" : "FID"
    },
    {
      "name" : "GB",
      "type" : "double",
      "alias" : "GB"
    },
    {
      "name" : "CNTY_CODE",
      "type" : "double",
      "alias" : "CNTY_CODE"
    },
    {
      "name" : "NAME",
      "type" : "string",
      "alias" : "NAME",
      "length" : 254
    },
    {
      "name" : "PYNAME",
      "type" : "string",
      "alias" : "PYNAME",
      "length" : 254
    },
    {
      "name" : "code99",
      "type" : "double",
      "alias" : "code99"
    },
    {
      "name" : "FULLNAME",
      "type" : "string",
      "alias" : "FULLNAME",
      "length" : 254
    },
    {
      "name" : "prov_name",
      "type" : "string",
      "alias" : "prov_name",
      "length" : 254
    },
    {
      "name" : "dq_name",
      "type" : "string",
      "alias" : "dq_name",
      "length" : 254
    },
    {
      "name" : "note1",
      "type" : "string",
      "alias" : "note1",
      "length" : 254
    },
    {
      "name" : "note2",
      "type" : "string",
      "alias" : "note2",
      "length" : 254
    },
    {
      "name" : "note3",
      "type" : "string",
      "alias" : "note3",
      "length" : 254
    },
    {
      "name" : "Lon",
      "type" : "double",
      "alias" : "Lon"
    },
    {
      "name" : "Lat",
      "type" : "double",
      "alias" : "Lat"
    },
    {
      "name" : "DATA_YEAR",
      "type" : "double",
      "alias" : "DATA_YEAR"
    },
    {
      "name" : "CLASID",
      "type" : "string",
      "alias" : "CLASID",
      "length" : 254
    }
  ],
  "features" : [
    {
      "attributes" : {
        "FID" : 0,
        "GB" : 31060,
        "CNTY_CODE" : 440224,
        "NAME" : "仁化县",
        "PYNAME" : "Renhua Xian",
        "code99" : 440224,
        "FULLNAME" : "仁化县(仁化镇)",
        "prov_name" : "广东省",
        "dq_name" : "韶关市",
        "note1" : "1 ",
        "note2" : "1 ",
        "note3" : "1 ",
        "Lon" : 113.743736,
        "Lat" : 25.090707999999999,
        "DATA_YEAR" : 1996,
        "CLASID" : "440224"
      },
      "geometry" : {
        "x" : 113.743736,
        "y" : 25.090707999999999,
        "type": "point"
      }
    },
    {
      "attributes" : {
        "FID" : 1,
        "GB" : 31050,
        "CNTY_CODE" : 440225,
        "NAME" : "乐昌市",
        "PYNAME" : "Lechang Shi",
        "code99" : 440281,
        "FULLNAME" : "乐昌市",
        "prov_name" : "广东省",
        "dq_name" : "韶关市",
        "note1" : "2 ",
        "note2" : "22 ",
        "note3" : " ",
        "Lon" : 113.34586299999999,
        "Lat" : 25.133410000000001,
        "DATA_YEAR" : 1996,
        "CLASID" : "440225"
      },
      "geometry" : {
        "x" : 113.34586299999999,
        "y" : 25.133410000000001,
        "type": "point"
      }
    },
    {
      "attributes" : {
        "FID" : 2,
        "GB" : 31060,
        "CNTY_CODE" : 440223,
        "NAME" : "南雄市",
        "PYNAME" : "Nanxiong Shi",
        "code99" : 440282,
        "FULLNAME" : "南雄市",
        "prov_name" : "广东省",
        "dq_name" : "韶关市",
        "note1" : "撤销南雄县，设立南雄市（县级）",
        "note2" : "增设",
        "note3" : "3 ",
        "Lon" : 114.30789900000001,
        "Lat" : 25.119730000000001,
        "DATA_YEAR" : 1996,
        "CLASID" : "440223"
      },
      "geometry" : {
        "x" : 114.30789900000001,
        "y" : 25.119730000000001,
        "type": "point"
      }
    }
  ]
}

组件引入等

import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureSet from '@arcgis/core/rest/support/FeatureSet'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import countypoint from '../assets/countypoint.json'  // 到处的JSON文件
var featureSet = FeatureSet.fromJSON(countypoint)
const graphics = countypoint.features
var featureCollection = {
    source: graphics,
    objectIdField: 'FID',
    geometryType: 'point',
  }
var featurelayer = new FeatureLayer(featureCollection)
const map = new Map({
    basemap: 'dark-gray-vector',
    layers: [featurelayer],
})
new MapView({
    container: 'viewDiv',
    map: map,
    center: [113.5861, 25.037278],
    zoom: 10,
})

图层的特征渲染

SimpleRenderer

import SimpleRenderer from "@arcgis/core/renderers/SimpleRenderer";
let citiesRenderer = {
  type: "simple", 
  symbol: {
    type: "simple-marker", 
    size: 6,
    color: "black",
    outline: {  
      width: 0.5,
      color: "white"
    }
  }
};
let citiesLayer = new FeatureLayer({
  url: "https://services3.arcgis.com/tgYU2qbxZbWPWXPL/arcgis/rest/services/toimages/FeatureServer/0",
  renderer: citiesRenderer
});

arsgis 点图层导入及icon编辑

1、进入Arcgis Online

2、进入Content标签，找到需要编辑的图层。点击view item details
在这里插入图片描述

3、图层详情页面 点击Visualization 在左侧点击Change Style
在这里插入图片描述

4、选择出自己图层需要分类的属性字段、select a drawing seyle 点击 Types 后点击options

在这里插入图片描述

5、点击分类这里的图标可进行替换(默认为小圆点)、在icon页面可选择自有图标(Use an Image)

注：图标格式最好为png gif jpeg并且是网络图片

在这里插入图片描述

6、点击右侧的Save Layer 如不替换原图层则点击Save As New Layer

在这里插入图片描述

微若年华ヽ
关注
专栏目录
ArcGIS API for JS 之 FeatureLayer（二）popupTemplate的使用
WhatMOMO5477的博客
02-26 3105
ArcGIS API for JS 之 FeatureLayer（二） popupTemplate的使用ArcGIS API for JS 之 FeatureLayer（二）1. 1.
利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup
duzanuolu的专栏
03-20 3379
1.引言 　　由于Arcgis for javascript API不可以绘制Geojson，并且提供的Popup一般只可以弹出一个，在很多专题图制作中，会遇到不少的麻烦。因此本文结合了两个现有的Arcgis for javascript API扩充库，对其进行改造达到绘制Geojson并同时弹出多个Popup的目的。 目前已有的两个扩充库github地址（可供单独使用）： 1.绘制
【收藏】arcgis api4.x实现悬停高亮效果
WebGIS皮卡茂的博客
08-14 370
Arcgis api4.x实现悬停高亮效果 [ 收藏！！]
【收藏】Arcgis api4.x 悬停高亮且打开popup弹窗
最新发布
WebGIS皮卡茂的博客
08-28 724
【收藏】Arcgis api4.x 鼠标移入图层悬停时，使要素高亮且打开popup弹窗，移出图层时取消高亮且关闭弹窗
ArcGIS JS之Popup弹窗二次请求获取实时数据
u012839776的博客
04-11 1357
需求：使用ArcGIS JS自带的Popup弹窗，展示要素属性。部分要素为物联网设备，除了基本的名称、位置等属性之外，还需要通过接口的形式，去获取该要素的实时的流速、流量等数据。 使用PopupTemplate，配置好fieldInfo的方式比较简单，可以快速的实现弹窗（好不好看另说）。但是对于需要二次请求获取实时数据，实现起来较麻烦。 工作中，尝试了以下几种思路去实现 （1）使用拦截器，在拦截器中请求的url做筛选，如果是identify接口的返回值，根据图层名等，要素外键字段，调用接口进行二次请求
使用ArcGISAPI实现多个弹窗弹出；多个Popup窗体弹出，亲测可用。
11-23
使用ArcGISAPI实现多个弹窗弹出；多个Popup窗体弹出，亲测可用。
ArcGIS JS API popup弹窗
suntongxue100的博客
07-05 4305
一、要素服务popup 原始弹窗由popup微件控制，view对象都自带默认的popup，格式可以由Featurelayer的popupTemplate属性控制。 测试代码（Vue中）： <template> <div id="viewDiv"> <InfoWindow v-show="this.showWindow"></InfoWindow> </div>
ArcGIS for Android 显示FeatureLayer的popup
09-11
ArcGIS for Android 显示FeatureLayer的popup，可以查看博文http://blog.csdn.net/yifei1989/article/details/11579901
ArcGIS JavaScript for API（002）弹窗 view 属性Popup
wangjianbo09的博客
04-24 3627
首先创建arcgis api 基础环境，最基础的地图显示，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
arcgis api的popup.open鼠标左键不管用，右键才有效问题解决
happy81997的博客
06-19 726
场景：用arcgis api for js 打开view的弹窗事件，用View.popup.open(）方法可以打卡，但是操作的时候发现左键点击地图时候没反应，右键才可以。后来查了api，需要进行如下设置，让左右中间滚轮都有反应才行。应用：在使用点击事件时，设置view.popup.autoOpenEnabled = false;后，鼠标的三个键都可以触发点击事件，没有任何设置，只有滚轮和右键会触发点击事件。
ArcGIS API for JavaScript之基础篇（四）
weixin_41665391的博客
03-06 4190
ArcGIS API for JavaScript之基础篇（四） 上一篇文章简单的介绍了可视化，需要的同学可以去公众号查找。这次的文章我改变了以前的写作方法，前几天是按照官网示例顺序写的，这次及以后就是根据一个例子不断的向下引申学习，这样学习更系统。开学第一天，大三下还那么多课，心累~。 这次我们介绍view.goTO方法，引申到Geometry类、Camera类、Graphic类以及如何定制更加...
ArcGIS API for JS之基础篇（三）可视化
weixin_41665391的博客
02-21 6387
ArcGIS API for JS之基础篇（三）可视化 终于到家了，可以接着写有意思的东西。如何把数据简洁美观易读的呈现出来，数据可视化内容小结可以给你们惊喜。这篇文章跨域了美赛+新年，它非常有魅力，希望大家可以多多实践！ Demo 首先看一个显示井和地震之间关系的动图，把井和地震的数据同时渲染在视图上，我们可以看到地震频发与挖井是否相关。点击井和地震的符号可以显示他们的详细信息，点击...
ＡrcGIS二次开发课程总结（附上代码）vs2010（C#）+AE
weixin_30875157的博客
05-29 2452
很久没有写了，原因很简单没有想起来，够简单粗暴吧，好吧承认都是借口 —————————————————我是分界线哦———————————————————————— 昨天GIS程序与开发课结束了它的完整生命周期，老师让我们每个人做个总结。学号最后一个，便最后一个总结。 课程上完，最大感受，嗯，我又学会了怎么拼代码！老师给我说了我的优缺点，可能当时没反应过来，今天早上才反应过来 ，所以...
Leaflet学习教程+笔记(Mars2D)
a1578460233的博客
06-11 4469
Leaflet学习(Mars3D) 一 快速开始 中文教程–小白必备 中文API文档–学会查阅文档 准备工作-引入文件 <link rel="stylesheet" href="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.css" /> <script src="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.js"></script> 初始化页面–准备好一个容器 <
arcgis api 鼠标放上后popup_ARCGIS如何调用天地图遥感底图
weixin_36378222的博客
12-29 284
目前国家相关系统使用的在线地图大多是天地图的遥感底图，不少用户在往这些系统上报空间数据的时候，很多时候需要在GIS软件查看一下自己上报的SHP文件比如防治责任范围等与天地图遥感是否有偏差。在2019年1月1日前，可以通过安装一些插件后，直接调用天地图底图，但2019年调用的时候需要许可(《天地图API及服务接口开发授权申请》)。其实ARCGIS是可以直接调用官方的天地图数据的，而且官方也...
arcgis 自定义弹出窗口
11-14
网上很少资料有解决arcgis for silverlight 的这个问题的，本人也搞了好久才解决的，所以分值高了一点，如代码有问题，可以联系我。
ArcGis之popup列表字段自定义
weixin_30258901的博客
05-21 709
ArcGis之popup列表字段自定义 featureLayer图层中可以使用popupTemplate属性添加弹窗。 API：https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#popupTemplate 1.number格式化 ...
GIS前端—Popup标注视图
leva的博客
09-15 336
在不同缩放级别的地图上，标注显示效果是不一样的。即将这些标注集中用一个聚合标注显示，聚合标注上显示该位置所聚合的标注个数。Leaflet提供了L.Popup对象，用于添加Popup标注视图，通过setLatLng()方法设置Popup标注视图的位置，通过setContent()方法设置Popup标注视图的内容。例如，在某地添加一个图片标注，当单击该图片标注时，弹出Popup视图，显示其信息。本实例以天地图地图作为底图，在地图上添加一个图片标注，并关联一个Popup标注视图，显示地物的图文介绍，效果如图。
ArcGIS JS之 applyEdits之后要素符号更新
weixin_30772261的博客
05-09 855
ArcGIS JS版本 ArcGIS JS 4.11 最近做一个地图服务，通过FeatureLayer.applyEdits()方法，更新唯一值的渲染字段，实现地图渲染根据用户的配置实时更新。 由于ArcGIS JS自带的编辑Widget效果不好，自己做了一个更新弹窗，applyEdits之后，发现该地图符号不会自动更新，需要地图视图稍微变化一点，才会刷新成最新的渲染 查询了官网API，发现...
arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（七）—— PopupTemplate使用
花姐夫JUN的博客
05-25 1120
为特定层或图形格式化和定义 Popup 的内容。当选择视图中的要素时，用户还可以使用 PopupTemplate 访问要素属性的值和 Arcade 表达式返回的值。包含 title 和 content 属性，它们充当用于将要素的属性转换为 HTML 表示的模板。语法 {fieldName} 或 {expression/expressionName} 执行参数替换。Graphic 的默认行为是在单击 Graphic 后显示视图的 Popup。此默认行为需要 PopupTemplate。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值