这个是放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: [], //一个用于图层分类的范围信息列表每一项都是一个对象包含idtitle分类图层的titleringList该分类图层的范围点信息和基本信息 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?fjsapi, // url: https://192.168.99.190:6443/arcgis/rest/services/MyMapService3/MapServer?fjsapi, // 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.length0) ? 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 }) }, } }这是放featureLayerHelperimport 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?.length0) 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,colornull,outlineColornull} 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,width32px,height32px} 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) } } }这是放GisHelperimport 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:nameundefined?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) }, }
