Arcgis

前言ArcGIS API如同国内用的不多，除了设计院以外，大多数还是用的百度和高德API。ArcGIS API的文档是全英文，因而分享一些小性能的实现思路。 需要ArcGIS中，新增加的图层永远在最下面，就像这样： 而在业务逻辑上，有时咱们须要某个图层置顶。比方用来统计面积大小的图层，如果它被其余图层笼罩掉，就不能失常的统计面积和显示被选中的地块了： 本文就来解决这个问题 先说原理，非常简单，应用到生命周期钩子函数。 尝试的其余办法首先尝试了add图层是能不能手动设置order，也就是给它设置的地位很高，比方100： 为了便于交换，咱们临时把这个图层叫做areaSumLayer。 // 业务上须要置顶的图层let areaSumLayer: GraphicsLayer// 增加图层时设置的很高map.add(areaSumLayer,100);事实上这样不行，因为后面提到它的逻辑是：“新增加的图层永远在最下面”即便以前的图层设置的很高，新图层还会更高，比方地位在101。 因而咱们的思路是：无奈在创立areaSumLayer时保障它当前是置顶的而是在创立其余图层时保护一下areaSumLayer的地位 生命周期钩子什么是生命周期？所有的前端组件都应用了这个思维。生命周期指的是从一个组件从创立到沦亡的过程。 拿前端框架Angular举例，最常见的包含： ngOnInit()： 组件创立ngOnChanges()： 绑定的数据发生变化时ngOnDestoryed(): 组件销毁https://angular.cn/guide/lifecycle-hooks 或者VUE中： created()： 组件创立mounted()： 组件渲染结束beforeUpdate()：产生变更前updated(): 产生变更unmounted(): 组件登记https://cn.vuejs.org/guide/essentials/lifecycle.html这些生命周期钩子是在框架开发者编写时就写好的，要应用这些周期函数，只须要用回调的形式，传入一个咱们本人写好的办法，这个办法会在适当的机会（生命周期产生时）被主动调用，用到的就是订阅者-观察者模式。 ArcGIS API接下来看看ArcGIS的图层有什么生命周期（官网称之为事件event）： https://developers.arcgis.com/javascript/latest/api-reference...before-add：增加前after-add：增加后before-changes：变更前change：变更after-changes：变更后before-remove：销毁前after-remove：销毁后有这么多生命周期，而咱们的业务上用到的是增加后，也就是“当新图层增加后，咱们手动的更新一下须要置顶的areaSumLayer图层。 after-add是这样用的： https://developers.arcgis.com/javascript/latest/api-reference...map.layers.on("after-add", function(event){ console.log(event.item.id);});map.layers.on是开启监听，map就是Map类创立的对象"after-add"是监听的事件类型，咱们须要监听增加图层之后的事件event是本人写的回调函数中的变量办法体是咱们要在回调时执行的操作失常状况下，当有新的图层被增加进来时，控制台就会输入它的ID。 接下来是寻找：areaSumLayer有没有曾经被增加须要用到collection汇合的find办法： https://developers.arcgis.com/javascript/latest/api-reference... find办法是寻找某个图层在不在图层汇合中，应用的还是回调函数： // 如果此时图层汇合中有面积的图层 if (map.layers.find(function (layer) { return layer.id === areaSumLayer.id })){ console.log("true"); }逐条解释： 咱们定义了一个办法： function (layer) { return layer.id === areaSumLayer.id}layer是回调时的变量，能够轻易写，但要和办法体中对应办法的内容就是：判断回调变量的图层id和咱们的id是否相等，如果相等，阐明咱们要查问的图层在这个汇合中，返回true接下来解决“调整图层程序”的步骤： // 从新增加面积图层map.remove(areaSumLayer);map.add(areaSumLayer);就是先暗藏再从新增加因而合起来就变成了这样： /** * 地图生命周期 * 当图层创立后，把预览图片的图层从新增加一下，使其永远置顶 */ map.layers.on('after-add', (event) => { // 如果此时图层汇合中有areaSumLayer图层 if (map.layers.find(function (layer) { return layer.id === areaSumLayer.id })) { // 从新增加areaSumLayer图层 map.remove(areaSumLayer); map.add(areaSumLayer); } })此时，只有有别的图层增加结束，钩子函数就会从新把areaSumLayer置顶。 ...

译：ArcGIS JS API 4.x 历史版本及要害更新4.0 公布工夫: 2016-05这是 4.x 系列 API 的第一个正式版本。因为之前的 4.x 版本处于测试阶段，因而此处不思考记录它们。 4.1 公布工夫: 2016-09WebMap.version 属性重命名为 WebMap.sourceVersion。WebScene.version 属性重命名为 WebScene.sourceVersion。ClosestFacilityParameters.returnPolygonBarriers 属性重命名为 ClosestFacilityParameters.returnPolygonBarriers。FeatureLayer.createQueryParameters 属性重命名为 FeatureLayer.createQuery。Popup 的 dockOptions.position 属性值当初除了承受字符串之外，也承受函数。NavigationToggle 已被增加到 SceneView 的 default.widgets (默认组件) 之中。The Geoprocessor.getResultImageLayer() 办法被 Geoprocessor.getResultMapImageLayer() 代替。对于签名的变更，请查看SDK 文档。GroupLayer、Map 和他们的子类中的layer-add、layer-remove和 layer-reorder事件已被移除，取而代之的是 esri/core/Collection的 change 事件。4.2 公布工夫: 2016-12VectorTileLayer 的ACCESS_TOKEN属性已被移除。为了进步安全性，浏览器开始在不平安的页面上阻止 Geolocation API，这意味着定位按钮将无奈在不平安的网页（即 http 协定的链接）上应用。 谷歌浏览器首先在版本 50（2016 年 4 月）中实现了这个性能。苹果也打算在 Safari 10（2016 年 9 月）中实现了这一点。 Mozilla/Firefox 正打算做同样的事件。 在 4.0 和 3.17 版本中，JSAPI 不再在 Chrome 浏览器中显示非平安 Web 应用程序的定位按钮。 从版本 4.2 和 3.19 开始，JSAPI 不再在浏览器上任何不平安的网页程序中显示定位按钮。 请留神，localhost 被认为是“潜在平安的”，可用于便捷测试。4.3 公布工夫: 2017-03sizeRendererCreator.createVisualVariable()重命名为 sizeRendererCreator.createVisualVariables() ，因为它的返回值类型改成数组了。4.4 公布工夫: 2017-07从 4.4 版开始，locator.locationToAddress() 办法返回一个正确的 AddressCandidate。 此谬误修复会影响五个 AddressCandidate 属性中的两个：address 和 attributes。 请留神，其余 AddressCandidate 属性(extent、location 和 score) 没有变动。 ...

题外话（能够跳过间接看上面操作）：哎。。。。。。。。。。。。。为啥让我解决数据啊，我连arcmap、idesktop咋用都不晓得。只能一点点问共事，我重大狐疑我老大是不是错认为我会解决数据。1.加载高程tif数据，左侧有layer列表能够看到。2.关上转换工具箱，ArctoolboxData Management Tools >> Projections and Transformations >> Raster >> project Raster3.转换投影1标抉择原始tif，3标输出84坐标再确定就ok了。4.idsktop导入数据集，这里我抉择导入栅格模式，因为前面我要改款式。5.关上数据集，而后左下角图层管理器中导入已有的专题图模板。6.把非凡值通明掉，而后暗藏原图层，最初右键地图抉择地图输入为图片，这里抉择范畴是寰球范畴。7.最初生成的图片就能够拿去做贴图了。不是天文相干业余毕业的，有不正确的中央请见谅。

作者这里用的esri版本是419这里须要提前初始化draw包"esri/views/draw/Draw" this.$message.success("开始绘制");var draw = new Draw({view:this.view})var action = draw.create("polygon", { mode: "click"//点击形式加点});// 获取焦点this.view.focus();// 顶点增加事件action.on("vertex-add", (evt) =>{this.createPolygon(evt)});//顶点移除事件action.on("vertex-remove", (evt) =>{this.createPolygon(evt)});// 鼠标挪动事件action.on("cursor-update", (evt) =>{this.createPolygon(evt)});// 绘制实现事件action.on("draw-complete", (evt) =>{this.createPolygon(evt)this.$message.success("完结绘制");});这里用到了graphic和polygon两个包 "esri/Graphic""esri/geometry/Polygon"async createPolygon(event) { //获取所有顶点 var vertices = event.vertices; //革除之前绘制 this.view.graphics.removeAll(); var Graphic = await arcgisPackage.Graphic; var Polygon = await arcgisPackage.Polygon; // 生成绘制的图形 var graphic = new Graphic({ geometry: new Polygon({ hasZ: false, hasM: false, rings: [vertices], spatialReference: this.view.spatialReference }), symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [ 51,51, 204, 0.9 ], style: "solid", outline: { // autocasts as new SimpleLineSymbol() color: "white", width: 1 } } }); this.view.graphics.add(graphic); console.log(graphic.geometry.toJSON());}更多文章原作者链接 ...

援用了两个包'esri/widgets/Zoom' var zoom = new Zoom({ view: this.view});zoom.zoomOut(); var zoom = new Zoom({ view: this.view});zoom.zoomIn(); 视角定位"esri/geometry/Point" let pt = new Point(点位);this.view.goTo(pt)

这是wtms服务地址，肯定要记得加tile http://***.***.***.***:6080/arcgis/rest/services/***/***/MapServer/tile/export const CustomWMTS = async (val) => { let BaseTileLayer = await arcgisPackage.BaseTileLayer; let Request = await arcgisPackage.Request; let TDT = await BaseTileLayer.createSubclass({ properties: { urlTemplate: null, layerType:'wmts' }, getTileUrl: function (level, row, col) { let url =val + level + '/' + row + '/' + col return url; }, fetchTile: function (level, row, col) { let url = this.getTileUrl(level, row, col); return Request(url, { responseType: "image", }).then((response) =>{ let image = response.data; let width = this.tileInfo.size[0]; let height = this.tileInfo.size[0]; let canvas = document.createElement("canvas"); let context = canvas.getContext("2d"); canvas.width = width; canvas.height = height; context.drawImage(image, 0, 0, width, height); return canvas; }) }, }); let layer = await new TDT(); return layer}

arcgis for js 等级着色 1.依据公布的数据设置多种symbol款式 let less35 = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: "#38627a", style: "solid", outline: { width: 0.2, color: [255, 255, 255, 0.5] }}let less36 = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: "#FF66CC", style: "solid", outline: { width: 0.2, color: 'red' }}2.创立一个renderer,设置要害id（就是依据哪个字段进行分等级，我这里抉择的是OBJECTID_1）,接入之前创立款式并且依据值分等级 let render2 = { type:'class-breaks', field: "OBJECTID_1", classBreakInfos: [ { minValue: 0, maxValue: 1000, symbol: less35, label: "< 35%" // label for symbol in legend }, { minValue: 1000, maxValue: 2000000.3499, symbol: less36, label: "< 35%" // label for symbol in legend } ]}3.于featureLayer中应用，不晓得的能够看我另外的文章 ...

this.view.on('click', (evt) => { let layer = this.map.findLayerById('layerbjx') // 创立查问对象 let query = layer.createQuery() // 将点击的点放入查问对象中 query.geometry = { type: 'point', longitude: evt.mapPoint.longitude, latitude: evt.mapPoint.latitude } // 设置缓冲区 query.distance = 6 // 设置查问形式（相交） query.spatialRelationship = 'intersects' layer.queryFeatures(query).then((res) => { // 失去features对象 console.log(res.features) }) })

1.申明三个包 esri/layers/GraphicsLayeresri/Graphicesri/geometry/Point2.申明GraphicsLayer并且add到map外面3.初始化图片标记点并且add到GraphicsLayer async ShowLocation() { let that = this const Graphic = await arcgisPackage.Graphic const GraphicsLayer = await arcgisPackage.GraphicsLayer const Point = await arcgisPackage.Point let layer = new GraphicsLayer() that.map.add(layer) var symbol = { type: "picture-marker", url: require('../../../assets/img/onepicture/ta.png'),//图片地址 width: "64px", height: "64px" }; var point = new Point(103.880812,27.802255); var gp = new Graphic(point,symbol); layer.graphics.add(gp); },

workspaceIds在下图地位处dataSourceName是你的源数据名称 let layer = new FeatureLayer({ url: config.dynamicSpaceLayer, spatialReference: this.view1.spatialReference, dynamicDataSource: { type: 'data-layer', dataSource: { type: 'table', workspaceId: 'shp', dataSourceName: shpUrl } }/* popupTemplate: { title: '图斑详情', content: '{*}' } */})arcgis manager后盾参考资料链接

arcgis地图服务限度特定区域，其余不显示的地图遮罩起来 办法一：应用canvas的clearRect办法，实现镂空成果办法二：应用canvas的path实现镂空成果 clearRect办法： var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#fff"; ctx.fillRect(0,0,300,150); ctx.clearRect(20,20,100,50);

dojoRequire(["esri/map", "esri/geometry/Point", "esri/layers/ImageParameters", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/GraphicsLayer", ], (Map, Point, ImageParameters, ArcGISDynamicMapServiceLayer,GraphicsLayer) => { map = new Map("map", { basemap: "satellite", center: [113.36112, 23.12467], zoom: 11, }); var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer", { "opacity" :1.0, }); map.addLayer(dynamicMapServiceLayer); })