这个是放gisMixins中的

import Map from '@arcgis/core/Map' import MapView from '@arcgis/core/views/MapView' import Graphic from '@arcgis/core/Graphic' import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer' import BasemapToggle from '@arcgis/core/widgets/BasemapToggle' import Point from '@arcgis/core/geometry/Point' import { helper } from '@/utils/method' import { GisHelper } from '@/utils/GisHelper' import { featureLayerHelper } from '@/utils/featureLayerHelper' import FeatureLayer from '@arcgis/core/layers/FeatureLayer' import HeatmapRenderer from '@arcgis/core/renderers/HeatmapRenderer' import Field from '@arcgis/core/layers/support/Field' //用来做权重字段 import esriConfig from "@arcgis/core/config" // import Basemap from "@arcgis/core/Basemap"; // import MapImageLayer from "@arcgis/core/layers/MapImageLayer" // import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js"; //支持发布的服务的地图 import Basemap from "@arcgis/core/Basemap.js"; //发布地图使用的 import TileLayer from "@arcgis/core/layers/TileLayer.js"; //支持发布的服务的地图实现zoom export const gisMixins = { data() { return { heatDatabase:[], activeName: '', sketch: {}, layerControlList: [], view: {}, webMap: {}, colorList: [], outlineColorList: [], rings1: [], //一个用于图层分类的范围信息列表，每一项都是一个对象，包含id，title（分类图层的title），ringList（该分类图层的范围点信息和基本信息） dialogTableVisible: false, sketchGraphics: [], graphicsLayerSketch: {}, originalLayerList: [], measurement: null, landId: '', editor: null, Zoom: null, showSaveRange: true, queryLayerList: [], isSaveRange: true, graphicsLayer: {}, activeLayerInfo: {}, unitPriceGraphicsLayer: {}, selectedLayer: {}, analyzeType: '', //areaQuickStatistics快速统计,areaLandAnalyze土地情况分析,areaLandTaxAnalyze土地税收分析 normalLayer: {}, classifyTitle: '', } }, methods: { //初始化地图 initMap() { //自己服务的地图渲染，暂时不删除 // let basemap = new Basemap({ // baseLayers: [ // new MapImageLayer({ // // url: "https://192.168.99.158:6443/arcgis/rest/services/scdt/%E7%94%B5%E5%AD%90%E5%9C%B0%E5%9B%BE/MapServer?f=jsapi", // url: "https://192.168.99.190:6443/arcgis/rest/services/MyMapService3/MapServer?f=jsapi", // title: "Basemap" // }) // ], // title: "basemap", // id: "basemap" // }); // let basemap = new Basemap({ // baseLayers: [ // new WebTileLayer({ // urlTemplate: "http://162.14.112.161:8080/styles/OSM%20OpenMapTiles/#2/0/0", // subDomains: ['a', 'b', 'c', 'd'] // // }) // ], // referenceLayers: [ // new WebTileLayer({ // urlTemplate: "http://162.14.112.161:8080/styles/OSM%20OpenMapTiles/#2/0/0", // }) // ] // // title: "basemap", // // id: "basemap" // }); // this.webMap = new Map({ // basemap: basemap, // }) // this.view = new MapView({ // container: this.$refs.home, // map: this.webMap, // // center: this.$store.state.rangeCenter && this.$store.state.rangeCenter.length ? this.$store.state.rangeCenter : [104.05852944566121, 30.574795045027592], // center: [104.05852944566121, 30.574795045027592], // longitude, latitude // zoom: 16 // }) // 下面的是渲染用的，一种服务器渲染方法，一种拿的发布的服务 // esriConfig.apiKey = "AAPK5d6f96cc842d42bca9129f908bb6165cvG93-X543mGtlhSTujc5NqhZB-KZzA91tALN2dp8mJIwPjYob54znp7nwrNGMAa9" // this.$store.commit('getRangeCenter') // this.webMap = new Map({ // basemap: 'osm-streets', // // basemap: 'osm', // ground: 'world-elevation', // }) var baseUrl = "http://192.168.99.163:6080/arcgis/rest/services/scdzdt/%E7%94%B5%E5%AD%90%E5%9C%B0%E5%9B%BE%E5%88%87%E7%89%87/MapServer"; esriConfig.apiKey ="AAPK5d6f96cc842d42bca9129f908bb6165cvG93-X543mGtlhSTujc5NqhZB-KZzA91tALN2dp8mJIwPjYob54znp7nwrNGMAa9"; // 这个地方是用作发布的地图使用的，但是因为要支持缩放zoom，所以用下面一种 // let layer = new MapImageLayer({ // url: baseUrl // }) let layer = new TileLayer({ url: baseUrl, }) this.webMap = new Map({ basemap: new Basemap({ baseLayers: [layer] }), }); this.view = new MapView({ container: this.$refs.home, map: this.webMap, // center: (this.$store.state.rangeCenter && this.$store.state.rangeCenter.length>0) ? this.$store.state.rangeCenter : [104.05852944566121, 30.574795045027592], center: [104.05852944566121, 30.674795045027592], // longitude, latitude zoom: 6, }) this.view.ui._removeComponents(['zoom']) this.createSketch() // this.showBasemapToggle() this.createGraphicsLayer() this.view.when(() => { this.$refs.CustomZoom?.createZoom() // this.getLayerData('1') }) this.view.on('mouse-wheel', () => { // e.stopPropagation() setTimeout(() => { let currentZoom = this.view.zoom let height = (currentZoom - 4) / 15 * 100 + '%' this.innerHeight = { height } }, 200) }) // this.view.on('click', (e) => { // console.log(e); // }) }, clearHeatMap() { this.webMap.allLayers.items.forEach(item => { if (item.id === '热力图') { this.webMap.remove(item) } }) }, // 小区 getxq(){ this.axios.post('/test/selectXqjwdxx', {xzqhDms:[510105] }).then(res => { if (res.data.code * 1 === 200) { this.heatDatabase = res.data.data this.heatmap() } }) .catch() }, // 楼栋 getJson(){ this.axios.post('/test/selectLdjwdxx', {xzqhDms:[510105] }).then(res => { if (res.data.code * 1 === 200) { this.heatDatabase = res.data.data this.heatmap() } }) .catch() }, heatmap() { this.clearHeatMap() var heatmapRenderer = new HeatmapRenderer({//设置渲染器 field: "count", colorStops: [ { color: "rgba(0, 255, 150, 0)", ratio: 0 }, { color: "#32C5E9", ratio: 0.083 }, { color: "#67E0E3", ratio: 0.166 }, { color: "#9FE6B8", ratio: 0.249 }, { color: "#FFDB5C", ratio: 0.332 }, { color: "#ff9f7f", ratio: 0.415 }, { color: "#fb7293", ratio: 0.498 }, { color: "#E062AE", ratio: 0.581 }, { color: "#E690D1", ratio: 0.664 }, { color: "#e7bcf3", ratio: 0.747 }, { color: "#9d96f5", ratio: 0.83 }, { color: "#8378EA", ratio: 0.913 }, { color: "#96BFFF", ratio: 1 } ], blurRadius: 4, maxPixelIntensity: 50000, minPixelIntensity: 0 }); var data = this.heatDatabase // var data = { "heatData": [{ "lng": "104.05852944566121", "lat": " 30.574795045027592", "count": "4" }, { "lng": "104.06852944566121", "lat": " 30.574795045027692", "count": "1" }] }; var features = []; for (var i = 0; i < data.length; i++) { // var x = data.heatData[i].lng; // var y = data.heatData[i].lat; var x = data[i].jd; var y = data[i].wd; features.push({ geometry: { type: "point", x: x, y: y, }, attributes: { ObjectID: i,//重要！！！ count: parseInt(data[i].cshjg?data[i].cshjg.replace(',',''):data[i].jzj) // count: data.heatData[i].count }, }) } const hfields = [ new Field({ name: "count", alias: "count", type: "string" }) ]; var featureLayer = new FeatureLayer({ id:"热力图", fields: hfields, source: features,//点数据集 title: "热力图", objectIdField: "ObjectID",//重要！！！ renderer: heatmapRenderer//渲染器 }); this.webMap.add(featureLayer); }, //初始化标绘工具（点，线，面） createSketch() { const { graphicsLayerSketch, sketch } = GisHelper.createSketch(this.view, this.webMap) this.graphicsLayerSketch = graphicsLayerSketch this.sketch = sketch this.sketch.on('update', (event) => { if (event.state === 'complete') { this.sketchGraphics = event.graphics if (!this.isSaveRange) { return false } this.$refs.GisToolbar.handleRecordedVisible = false if (this.toolBarType === 'plot') { this.sketchComplete(event) } else if (this.toolBarType === 'searchBySpatial') { this.queryFeatureLayer(event.graphics[0].geometry) } } }) }, //创建graphic createGraphicsLayer() { //创建graphicsLayer，显示graphic this.graphicsLayer = new GraphicsLayer() this.webMap.add(this.graphicsLayer) }, //工具栏标绘 plotting(type, toolBarType, analyzeType) { this.analyzeType = analyzeType this.isSaveRange = true this.toolBarType = toolBarType if (toolBarType === 'searchBySpatial') { if (this.originalLayerList.length <= 0) { this.$message.error('暂无图层可分析') } else { this.sketch.create(type) } } else { this.sketch.create(type) } }, //画图的撤回，回复和取消 handleSketchRecorded(type) { if (type === 'undo') { this.sketch.undo() } else if (type === 'redo') { this.sketch.redo() } else if (type === 'cancel') { this.isSaveRange = false this.sketch.cancel() this.graphicsLayerSketch.remove(this.sketchGraphics[0]) } }, //定位点信息 position(center, rings) { this.view.goTo({ zoom: 16, target: center, }) if (!rings) { this.graphicsLayer.removeAll() } else { GisHelper.createPolygonGraphic(rings, this.graphicsLayer, 'mark').then(() => { this.graphicsLayerSketch.remove(this.sketchGraphics[0]) }) } }, //sketch绘制完成 async sketchComplete(event) { await this.assignRangeInfo(event) this.drawGraphic(this.rangeInfo['fwdxxs']) this.saveRangeInfo() this.toolBarType = '' }, //赋值点信息 assignRangeInfo(event) { return new Promise(resolve => { let geometry = event.graphics[0].geometry this.rangeInfo['zxdjd'] = geometry.type === 'point' ? geometry.longitude : geometry.centroid.longitude this.rangeInfo['zxdwd'] = geometry.type === 'point' ? geometry.latitude : geometry.centroid.latitude let point = [[this.rangeInfo['zxdjd'], this.rangeInfo['zxdwd']]] this.rangeInfo['fwdxxs'] = geometry.type === 'point' ? point : helper.mercator2lonlat(geometry.rings[0]) if (geometry.type === 'point') { resolve(this.rangeInfo) } else { GisHelper.calculateArea(geometry).then(areas => { this.rangeInfo['fwmj'] = areas resolve(this.rangeInfo) }) } }) }, //将点信息绘制为graphic drawGraphic(points) { GisHelper.createPolygonGraphic(points, this.graphicsLayer).then(() => { this.graphicsLayerSketch.remove(this.sketchGraphics[0]) }) }, //保存点信息 saveRangeInfo() { if (this.showSaveRange) { this.rangeDialogVisible = true } else { this.eventBus.$emit('update:sketchComplete', this.rangeInfo) } }, //底图切换 showBasemapToggle() { const basemapToggle = new BasemapToggle({ view: this.view, nextBasemap: 'satellite', container: this.$refs.baseMap, }) this.view.ui.add(basemapToggle, 'bottom-right') // Add to the view }, //测绘（距离，面积） createMeasure(type) { if (this.measurement) { this.measurement.clear() } this.measurement = GisHelper.createMeasure(this.view, type) }, //控制图层显示隐藏 changeClassify(visibleLayers) { //visibleLayers：需要显示的分类图层（项目中以分类的名称判断的） //whereInfo：转换成符合arcgis的sql条件语句 let whereInfo = '' visibleLayers.forEach(item => { whereInfo = whereInfo ? whereInfo + ` OR TYPE='${item}'` : `TYPE='${item}'` }) //this.originalLayerList，上一步生成的分类要素图层，由于这里只有一个图层，所以取得第0项 this.view.whenLayerView(this.originalLayerList[0]).then((layerView) => { layerView.filter = { where: whereInfo || 'nothing', } //图层隐藏时，图层上的气泡标志也隐藏 this.unitPriceGraphicsLayer.graphics.items.forEach(item => { item.visible = visibleLayers.indexOf(item.attributes.classifyType) >= 0 }) this.DoorGraphicsLayer.graphics.items.forEach(item => { item.visible = visibleLayers.indexOf(item.attributes.classifyType) >= 0 }) }) this.layerPopupVisible = false this.view.graphics.removeAll() }, //点击或者鼠标悬浮图层的id getLayerContentId(response, eventType) { let layer = response.results.filter((layer) => { return layer.graphic.attributes && layer.graphic.attributes?.TYPE }) if (layer.length <= 0) return let selectedLayer = layer[0].graphic this.selectedLayer = layer[0].graphic if (eventType === 'click') { this.editLayer = selectedLayer } let objId = selectedLayer?.attributes.OBJECTID this.activeLayerInfo = selectedLayer?.layer.source?.items.filter((item) => { return item?.attributes.OBJECTID === objId })[0] let obj = { id: this.activeLayerInfo?.id, layerType: layer[0]?.graphic?.attributes?.TYPE } return obj }, //高亮layer highLight() { this.view.graphics.removeAll() let selectedGraphic = new Graphic({ geometry: this.selectedLayer.geometry, symbol: { type: 'simple-fill', color: 'transparent', outline: { // autocasts as new SimpleLineSymbol() color: 'red', width: 2 // points } } }) this.view.graphics.add(selectedGraphic) }, //展示popup showMapPopup(geo = this.selectedLayer.geometry) { let point = new Point(geo.centroid.x, geo.centroid.y, this.view.spatialReference) this.view.popup.open({ location: point, title: '', content: this.activeLayerInfo.value2 }) }, //根据区域查询layer queryFeatureLayer(geometry) { featureLayerHelper.queryFeatureLayer(this.originalLayerList, this.view, geometry).then(layerList => { //areaQuickStatistics areaLandAnalyze //决策分析快速分析和其他分类，快速分析弹出弹窗，其他分类是跳转页面 let obj = { areaLandAnalyze: 'LandSituationAnalysis', areaLandTaxAnalyze: 'LandRevenueAnalysis', } if (this.analyzeType === 'areaQuickStatistics') { this.searchDialogVisible = true this.queryLayerList = layerList } else { let promiseList = this.submitQuery(layerList) Promise.all(promiseList).then(() => { this.$router.push({ name: obj[this.analyzeType], query: { rangeId: this.timestamp } }) }) } this.graphicsLayerSketch.remove(this.sketchGraphics[0]) this.toolBarType = '' }) }, //选择区域范围 selectArea(analyzeType) { if (this.originalLayerList.length <= 0) { this.$message.error('暂无图层可分析') return false } this.analyzeType = analyzeType this.areaSelectVisible = true this.getAreaList() }, checkedTree(checkedNode) { this.checkedArea = checkedNode[0] this.getRangeInfo(checkedNode[0].id) }, //选择区域，分析区域内的内容 analysisAreaLand(area) { let polygon = { type: 'polygon', // autocasts as Polygon rings: area.fwdxxs, } let graphic = new Graphic({ geometry: polygon, id: area.id, }) this.queryFeatureLayer(graphic.geometry) }, //分类查询图层 classify(type, typeName) { this.classifyTitle = typeName this.type = type this.getLayerData(type) }, //重新渲染分类图层前，删除原有的分类图层，常规图层（项目里面的土地图层），价格标记图层 removeLayer() { this.originalLayerList.forEach(layer => { this.webMap.remove(layer) }) this.webMap.remove(this.normalLayer) Object.keys(this.unitPriceGraphicsLayer).length > 0 && this.unitPriceGraphicsLayer.removeAll() Object.keys(this.otherBuildingGraphicsLayer).length > 0 && this.otherBuildingGraphicsLayer.removeAll() Object.keys(this.DoorGraphicsLayer).length > 0 && this.DoorGraphicsLayer.removeAll() this.view.popup.close() }, //获取分类信息后给项目图层数据赋值,并渲染项目里面的土地图层 getProjectLayerData(resData) { let rangeList = [] resData.tdTcxx.ringList.forEach((item) => { let range = { rings: item.rings, fwId: item.id, color: 'black' } rangeList.push(range) }) this.rings1 = resData.xmxxTcList //渲染项目里面的土地图层 let graphicList = featureLayerHelper.innitGraphicList({ ringList: rangeList }) this.initNormalFeatureLayer(graphicList, 'black') }, //获取分类图层后的数据处理（颜色，字段设置） formatClassifyRings() { this.rings1.forEach((item, index) => { //遍历小区信息【审批通过和未通过的小区】 this.layerControlList.push({ //【layerControlList:左下角下拉列表】 name: item.title, // label: item.id, outlineColor: this.outlineColorList[index], color: this.colorList[index] }) }) }, //获取分类图层数据接口请求 getLayerData(type) { let urlObj = { land: '/tdxx/cxTdxxZtlb', project: '/xmxxGis/cxXmxxTc' } this.layerControlList = [] this.removeLayer() if (!type) return this.axios.get(urlObj[this.topicType], { params: { type } }) .then(res => { if (res.data.code * 1 === 200) { this.topicType === 'project' ? this.getProjectLayerData(res.data.data) : (this.rings1 = res.data.data) this.formatClassifyRings() this.view.when(() => { this.initClassifyFeatureLayer() this.topicType === 'project' && this.createUnitPriceGraphicsLayer() }) } }) }, //渲染单价标注的marker createUnitPriceGraphicsLayer(name) { this.unitPriceGraphicsLayer = new GraphicsLayer() this.webMap.add(this.unitPriceGraphicsLayer) this.rings1.forEach((item) => { if (item.ringList.length >= 1) { GisHelper.markerUnitPrice(this.unitPriceGraphicsLayer, item, undefined, name) } }) }, //初始化分类的featureLayer initClassifyFeatureLayer() { this.originalLayerList = [] let graphicList = [] this.rings1.forEach((item) => { if (item.ringList.length >= 1) { graphicList.push(...featureLayerHelper.innitGraphicList(item))//遍历收集对象图层【多边形、点】 } }) //点现多边形的graphic 控制分类显示的列表 地图map 气泡弹窗 this.originalLayerList = [featureLayerHelper.createFeatureLayer(graphicList, this.layerControlList, this.webMap, this.$refs.customPopup)] //【】 }, //初始化普通的featureLayer（为了同时展示项目和土地图层，且土地图层不分类） initNormalFeatureLayer(graphicList, outlineColor) { let layer = featureLayerHelper.initNormalFeatureLayer(graphicList, { color: outlineColor }) this.webMap.add(layer) layer.when(() => { this.normalLayer = layer }) }, } }

这是放featureLayerHelper

import Graphic from '@arcgis/core/Graphic' import FeatureLayer from '@arcgis/core/layers/FeatureLayer' import ElementUI from 'element-ui' export const featureLayerHelper = { //根据图形点，绘制graphic createPolygonGraphic(vertices, graphicsLayer, mark) { let polygon = { type: 'polygon', // autocasts as Polygon rings: vertices, } let point = { type: 'point', longitude: vertices[0][0], latitude: vertices[0][1] } const attributes = { Name: 'Graphic', } graphicsLayer.removeAll() let symbol if (!mark) { symbol = { type: vertices.length === 1 ? 'simple-marker' : 'simple-fill', color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [227, 139, 79], width: 1 } } } else { symbol = { type: 'simple-fill', color: [43, 129, 255, 0], // Orange, opacity 80% outline: { color: [43, 129, 255], width: 2, style: 'short-dot' } } } return new Promise((resolve) => { let graphic = new Graphic({ geometry: vertices.length === 1 ? point : polygon, symbol, attributes: attributes, }) graphicsLayer.add(graphic) resolve() }) }, //初始化graphicList，用于生成featureLayer innitGraphicList(obj) { let {title=''} = obj let graphicList = [] if (obj.ringList?.length<=0) return obj.ringList.forEach((item) => { let {name='',id='',fwId='',value='',value2='',sjlx='',rings=[]} = item if (rings && rings.length > 0) { //与图形关联的字段值的名称-值对 const attributes = { Name: name, id: id, fwId: fwId, TYPE: title, value: value, value2: value2, dataType:sjlx, } //图形的类型和点信息等 let polygon = { type: 'polygon', // autocasts as Polygon rings: rings, } let point = { type: 'point', longitude: rings[0][0], latitude: rings[0][1] } //生成Graphic let graphic = new Graphic({//用于绘制多边形的图层对象 geometry: rings.length === 1 ? point : polygon, attributes: attributes, id: id, fwId: fwId, value: value, value2: value2, TYPE: title, }) graphicList.push(graphic) } }) //返回graphic列表，用以渲染featureLayer return graphicList }, //渲染可分类图层 createFeatureLayer(polygonGraphic, layerControlList, webMap, customPopup) { //polygonGraphic：一个graphic的列表，列表的每一项代表一个分类 if (polygonGraphic.length <= 0) {return false} let uniqueValueInfos = [] //layerControlList:用于featureLayer图层里面的分类，定义了基本信息和外观。 //根据分类生成不同颜色的layer，用于类型筛选和不同类型的显示隐藏切换 layerControlList.forEach((item) => { let {name='',color=null,outlineColor=null} = item uniqueValueInfos.push({ value: name, label: name, symbol: { type: 'simple-fill', color: color, outline: { // autocasts as new SimpleLineSymbol() width: 1, color: outlineColor } } }) }) //生成可切换类型的layer的属性定义 const typeRenderer = { type: 'unique-value', legendOptions: { title: 'Freeway type' }, field: 'TYPE', uniqueValueInfos: uniqueValueInfos } //图层气泡 let popupTemplate = customPopup ? { title: '土地信息', content: customPopup } : null //生成可分类的要素图层FeatureLayer const layer = new FeatureLayer({ source: polygonGraphic, // array of graphics objects objectIdField: 'OBJECTID', fields: [{name: 'OBJECTID', type: 'oid'}, {name: 'Name', type: 'string'} , {name: 'id', type: 'string'}, {name: 'fwId', type: 'string'}, {name: 'value', type: 'string'} , {name: 'value2', type: 'string'}, {name: 'TYPE', type: 'string'}], popupTemplate, renderer: typeRenderer, }) //将要素图层FeatureLayer，挂载到地图上 webMap.add(layer) return layer }, //根据特定条件(如id等查找图层) queryFeatureLayerBySql(view,featureLayer,queryData){ const parcelQuery = { where: queryData, // 查询条件 geometry: view.extent, // 被限制在地图可见的范围内 returnGeometry: true }; return new Promise((resolve)=>{ featureLayer.queryFeatures(parcelQuery).then((res)=>{ resolve(res); }) }) }, //查找图层 queryFeatureLayer(originalLayerList, view, geometry) { const loading = ElementUI.Loading.service({ lock: true, background: 'rgba(255, 255, 255, 0.5)' }) setTimeout(() => { loading.close() }, 3000000) const parcelQuery = { spatialRelationship: 'intersects', geometry: geometry, returnGeometry: true } let layerList = [] let promiseList = [] originalLayerList.forEach((layer) => { promiseList.push( layer.queryFeatures(parcelQuery) .then((results) => { this.displayResults(view, results) layerList = layerList.concat(results.features) }).catch() ) }) return new Promise(resolve => { Promise.all(promiseList).then(() => { loading.close() resolve(layerList) }) }) }, displayResults(view, results) { const symbol = { type: 'simple-fill', color: [20, 130, 200, 0.5], outline: { color: 'red', width: .5 }, } results.features.map((feature) => { feature.symbol = symbol return feature }) view.graphics.addMany(results.features) }, //渲染普通图层，没有分类 initNormalFeatureLayer(graphicList,rangeOthersInfo,customPopupInfo) { let {shape='',color=[121, 120, 249],imgName='',width='32px',height='32px'} = rangeOthersInfo let {popupTitle = '',customPopup = null} = customPopupInfo?customPopupInfo:{} //图层的类型及样式等 let symbol = shape === 'point' ? { type: 'picture-marker', url: require('../assets/images/' + imgName), width, height, yoffset: 8, } : { type: 'simple-fill', color: [...color, 0.7], outline: { // autocasts as new SimpleLineSymbol() width: 1, color } } //图层的弹窗 let popupTemplate = customPopupInfo ? { title: popupTitle, content: customPopup } : null //生成要素图层FeatureLayer let layer = new FeatureLayer({ source: graphicList, // graphic列表 objectIdField: 'OBJECTID', fields: [{name: 'OBJECTID', type: 'oid'}, {name: 'Name', type: 'string'} , {name: 'id', type: 'string'}, {name: 'fwId', type: 'string'}, {name: 'TYPE', type: 'string'}], popupTemplate, renderer: { type: 'simple', // autocasts as new SimpleRenderer() symbol, }, }) return layer }, //渲染带文字的图标 initTextGraphic(rangeInfo){ if (rangeInfo.zxdjd) { const attributes = { classifyType: rangeInfo.title, } let point = { type: 'point', longitude: rangeInfo.zxdjd, latitude: rangeInfo.zxdwd, } let symbol1 = { type: 'text', color: '#ffffff', backgroundColor: 'transparent', yoffset: 10, haloColor: '#ffffff', text:rangeInfo.value, font: { size: 12, } } let graphic = new Graphic({ attributes, geometry: point, symbol: symbol1, }) return graphic // this.textPopGraphicsLayer.add(graphic) } } }

这是放GisHelper

import GeometryService from '@arcgis/core/tasks/GeometryService' import AreasAndLengthsParameters from '@arcgis/core/tasks/support/AreasAndLengthsParameters' import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer' import Sketch from '@arcgis/core/widgets/Sketch' import Graphic from '@arcgis/core/Graphic' import Measurement from '@arcgis/core/widgets/Measurement' export const GisHelper = { //面积测量 calculateArea(geometry) { //url是ArcGIS公开的服务地址，服务器在国外，如果有自己的ArcGIS Server，可以直接使用ArcGIS server中自带的几何服务 let geometryService = new GeometryService({url: 'https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer'}) return new Promise(resolve => { geometryService.simplify([geometry]).then((simplifiedGeometries) => { let areasAndLengthParams = new AreasAndLengthsParameters({ areaUnit: 'square-meters', lengthUnit: 'meters', calculationType: 'geodesic', polygons: simplifiedGeometries }) geometryService.areasAndLengths(areasAndLengthParams).then((results) => { resolve(results.areas[0]) }) }) }) }, //测绘widgets（距离，面积） createMeasure(view, type) { let measurement if (type) { measurement = new Measurement({ view, activeTool: type }) view.ui.add(measurement, 'bottom-left') } return measurement }, //初始化标绘工具（点，线，面） createSketch(view, webMap) { const graphicsLayerSketch = new GraphicsLayer() webMap.add(graphicsLayerSketch) const sketch = new Sketch({ layer: graphicsLayerSketch, availableCreateTools: ['polygon', 'rectangle', 'circle','point'], view, creationMode: 'update' // Auto-select }) sketch.visibleElements = { selectionTools: { 'lasso-selection': false, 'rectangle-selection': false, }, settingsMenu: false, // undoRedoMenu: false, } return { graphicsLayerSketch, sketch } }, //图标标记地点 markRangeCenter(longitude, latitude, graphicsLayer) { let point = { type: 'point', longitude, latitude, } let symbol = { type: 'picture-marker', // autocasts as new PictureMarkerSymbol() url: require('../assets/images/position.png'), width: '14px', height: '14px' } let graphic = new Graphic({ geometry: point, symbol, }) graphicsLayer.add(graphic) return graphic }, //标记每个项目的均价 markerUnitPrice(graphicsLayer,obj,others,name) { let {imgName,width,height,yoffset} = others || {imgName:""} obj.ringList.forEach((item) => { if (item.zxdjd) { const attributes = { classifyType: obj.title, } let point = { type: 'point', longitude: item.zxdjd, latitude: item.zxdwd, } let symbol1 = { type: 'text', color: imgName?'#ffffff':'#595959', backgroundColor: 'transparent', yoffset: yoffset?10:22, haloColor: imgName?'#ffffff':'#595959', text:name===undefined?item.value:item[name].split('<br>')[0].split(':')[1], font: { // family: "Josefin Slab", size: 12, } } let graphic = new Graphic({ attributes, geometry: point, symbol: symbol1, }) let url = imgName?imgName:'backImg.png' let symbol2 = { type: 'picture-marker', // autocasts as new PictureMarkerSymbol() url: require('../assets/images/' + url), width: width?width:'120px', height: height?height:'70px', yoffset: yoffset?yoffset:18, } let graphic2 = new Graphic({ attributes, geometry: point, symbol: symbol2, }) graphicsLayer.add(graphic) graphicsLayer.add(graphic2) } }) }, // markerUnitPrice1(graphicsLayer,obj,others) { // let {imgName,width,height,yoffset} = others || {imgName:""} // obj.ringList.forEach((item) => { // if (item.zxdjd) { // const attributes = { // classifyType: obj.title, // } // let point = { // type: 'point', // longitude: item.zxdjd, // latitude: item.zxdwd, // } // let symbol1 = { // type: 'text', // color: imgName?'#ffffff':'#595959', // backgroundColor: 'transparent', // yoffset: yoffset?10:22, // haloColor: imgName?'#ffffff':'#595959', // text: item.value2.split('<br>')[0].split(':')[1], // font: { // // family: "Josefin Slab", // size: 12, // } // } // let graphic = new Graphic({ // attributes, // geometry: point, // symbol: symbol1, // }) // let url = imgName?imgName:'backImg.png' // let symbol2 = { // type: 'picture-marker', // autocasts as new PictureMarkerSymbol() // url: require('../assets/images/' + url), // width: width?width:'120px', // height: height?height:'70px', // yoffset: yoffset?yoffset:18, // } // let graphic2 = new Graphic({ // attributes, // geometry: point, // symbol: symbol2, // }) // graphicsLayer.add(graphic) // graphicsLayer.add(graphic2) // } // }) // }, //展示图片marker markerPicture(graphicsLayer, list){ list.forEach((item) => { if (item.zxdjd) { const attributes = { classifyType: item.title, } let point = { type: 'point', longitude: item.zxdjd, latitude: item.zxdwd, } let symbol2 = { type: 'picture-marker', // autocasts as new PictureMarkerSymbol() url: require('../assets/images/'+item.picUrl), width: '30px', height: '30px', } let graphic2 = new Graphic({ attributes, geometry: point, symbol: symbol2, popupTemplate : { content: item.value2 } }) graphicsLayer.add(graphic2) } }) }, //根据图形点，绘制graphic createPolygonGraphic(vertices, graphicsLayer, mark) { let polygon = { type: 'polygon', // autocasts as Polygon rings: vertices, } let point = { type: 'point', longitude: vertices[0][0], latitude: vertices[0][1] } const attributes = { Name: 'Graphic', } graphicsLayer.removeAll() let symbol if (!mark) { symbol = { type: vertices.length === 1 ? 'simple-marker' : 'simple-fill', color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [227, 139, 79], width: 1 } } } else { symbol = { type: 'simple-fill', color: [43, 129, 255, 0], // Orange, opacity 80% outline: { color: [43, 129, 255], width: 2, style: 'short-dot' } } } return new Promise((reslove) => { let graphic = new Graphic({ geometry: vertices.length === 1 ? point : polygon, symbol, attributes: attributes, }) graphicsLayer.add(graphic) reslove() }) }, displayResults(view, results) { const symbol = { type: 'simple-fill', color: [20, 130, 200, 0.5], outline: { color: 'red', width: .5 }, } results.features.map((feature) => { feature.symbol = symbol return feature }) view.graphics.addMany(results.features) }, }