当前位置：首页 > news >正文

ArcGIS for js 4.x FeatureLayer 加载、点选、高亮

news 2025/7/14 18:50:45

安装arcgis for js 4.x 依赖：

npm install @arcgis/core

一、FeatureLayer 加载

代码如下：

<template><view id="mapView"></view></template><script setup>import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from '@arcgis/core/Map.js';
import MapView from '@arcgis/core/views/MapView.js';
import TileLayer from '@arcgis/core/layers/TileLayer.js'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js'
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"
import Graphic from "@arcgis/core/Graphic.js";
import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol.js";
import { onMounted } from "vue";onMounted(()=>{initTDTMap();});// 天地图加载
const initTDTMap = () =>{let webLayer = new WebTileLayer({urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=352d4b1313777a8643542046a28d17e5",subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']});const map = new Map({basemap:{baseLayers:[webLayer]}});const mapView = new MapView({// 默认中心点位center: [125.338, 43.882],map: map,// 初始层级zoom: 10,container: "mapView",constraints: {minZoom: 9,// 最小层级maxZoom: 17// 最大层级},});// 清除底部powered by ESRI
mapView.ui.remove("attribution");// 加载FeatureLayerconst featureLayer = new FeatureLayer({url:"http://116.141.0.114:48080/geoscene/rest/services/%E8%80%95%E4%BF%9D/%E5%8F%8C%E9%98%B3%E5%8C%BA%E5%9B%BE%E6%96%91/FeatureServer/0",outFields: ["*"], //加载所有要素字段opacity:0.5,//透明度//popupTemplate: TuCeng03TC, //加载模板,//definitionExpression: "",// 筛查// 渲染renderer: {type: "simple",symbol: {type: "simple-fill",//simple-line(线)、simple-fill（面）style: "solid",// solid 全部填充、cross十字交错、diamond菱形、square矩形、triangle三角形color: [255,20,60, 0.4],outline: {color: [255, 0, 0, 1],width: 2,},},}});// 添加featureLayer(两种方法都可以)//mapView.map.add(featureLayer);map.add(featureLayer);</script><style lang="scss" scoped>#mapView{width: 100%;height:100vh;}</style>

二、点选FeatureLayer

代码如下：

    // featureLayer图斑点击事件mapView.on(['click'],function(event){mapView.hitTest(event).then(function(response){if (response.results.length) {let clickLayer = response.results.filter((result) => {return result.graphic.layer === featureLayer;});// 获取绘制let graphic = clickLayer[0].graphic;// 点击后定位mapView.goTo(graphic);// 如果点选到图层上的要素，则输出要素的IDvar objId = response.results.map(function(result) {return result.graphic.attributes[result.graphic.layer.objectIdField];});console.log("点选到的要素ID: ", objId);// 如果点选到图层上的要素，则输出全部属性var attributes = response.results.map(function(result) {return result.graphic.attributes;});console.log("点选到的attributes: ", attributes);}else{console.log("点选无果");}})});

三、高亮

1、默认高亮

	// featureLayer图斑点击事件let highlight;// 默认高亮对象mapView.on(['click'],function(event){mapView.hitTest(event).then(function(response){// 清空上一次高亮-默认 /* if(highlight)highlight.remove(); */// 清空上一次高亮-自定义mapView.graphics.removeAll();if (response.results.length) {let clickLayer = response.results.filter((result) => {return result.graphic.layer === featureLayer;});// 获取绘制let graphic = clickLayer[0].graphic;// 点击后定位mapView.goTo(graphic);/* // 如果点选到图层上的要素，则输出要素的IDvar objId = response.results.map(function(result) {return result.graphic.attributes[result.graphic.layer.objectIdField];});console.log("点选到的要素ID: ", objId);// 如果点选到图层上的要素，则输出全部属性var attributes = response.results.map(function(result) {return result.graphic.attributes;});console.log("点选到的attributes: ", attributes);*/// 默认选中高亮mapView.whenLayerView(graphic.layer).then((layerView)=>{highlight = layerView.highlight(graphic)});// 自定义选中高亮/* var symbol = new SimpleFillSymbol({color: [255, 255, 0, 0.5], // 黄色半透明填充outline: {color: [255, 0, 0], // 红色边框width: 2}});graphic.symbol = symbol;mapView.graphics.add(graphic); */}else{console.log("点选无果");}})});

2、自定义高亮

// featureLayer图斑点击事件//let highlight;// 默认高亮对象mapView.on(['click'],function(event){mapView.hitTest(event).then(function(response){// 清空上一次高亮-默认 /* if(highlight)highlight.remove(); */// 清空上一次高亮-自定义mapView.graphics.removeAll();if (response.results.length) {let clickLayer = response.results.filter((result) => {return result.graphic.layer === featureLayer;});// 获取绘制let graphic = clickLayer[0].graphic;// 点击后定位mapView.goTo(graphic);/* // 如果点选到图层上的要素，则输出要素的IDvar objId = response.results.map(function(result) {return result.graphic.attributes[result.graphic.layer.objectIdField];});console.log("点选到的要素ID: ", objId);// 如果点选到图层上的要素，则输出全部属性var attributes = response.results.map(function(result) {return result.graphic.attributes;});console.log("点选到的attributes: ", attributes);*/// 默认选中高亮/* mapView.whenLayerView(graphic.layer).then((layerView)=>{highlight = layerView.highlight(graphic)}); */// 自定义选中高亮var symbol = new SimpleFillSymbol({color: [255, 255, 0, 0.5], // 黄色半透明填充outline: {color: [255, 0, 0], // 红色边框width: 2}});graphic.symbol = symbol;mapView.graphics.add(graphic);}else{console.log("点选无果");}})});

查看全文

http://www.lryc.cn/news/368441.html