Service layer sketch

由于博客内容为空,无法提取关键信息生成摘要。
require(["dojo/parser", "dijit/registry", "dojo/_base/array", "dojo/string", "esri/map", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/ArcGISTiledMapServiceLayer", "esri/toolbars/draw", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "esri/tasks/Geoprocessor", "esri/tasks/FeatureSet", "esri/InfoTemplate", "CustomModules/geomUtils", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button", "dojo/domReady!"], function (parser, registry, array, string, Map, Extent, SpatialReference, ArcGISTiledMapServiceLayer, Draw, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, Geoprocessor, FeatureSet, InfoTemplate, geomUtils) { parser.parse(); var wgs84 = new SpatialReference({ wkid: 4326 }); var extent = new Extent(-117.38917350769043, 32.499704360961914, -116.51026725769043, 33.02292823791504, wgs84) var map = new esri.Map("map", { extent: extent }); map.infoWindow.resize(620, 300); var streetMap = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"); map.addLayer(streetMap); // 创建符号 var inputSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 2); var profileSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 255]), 3); // 地理处理服务 gpTask_SurfaceProfile = new Geoprocessor("https://elevation.arcgis.com/arcgis/rest/services/Tools/ElevationSync/GPServer/Profile"); var drawToolbar = new Draw(map); drawToolbar.on("draw-end", onDrawEnd); registry.byId("ProfileTool").on("click", function () { activateGPTask('LINE'); }); registry.byId("ExecuteProfileTool").on("click", function () { activateGPTask('POLYLINE'); }); registry.byId("ClearProfilesTool").on("click", function () { map.infoWindow.hide(); map.graphics.clear(); }); // ACTIVATE THE DRAW TOOLBAR function activateGPTask(geomType) { map.infoWindow.hide(); switch (geomType) { case 'LINE': drawToolbar.activate(Draw.LINE); break; case 'POLYLINE': drawToolbar.activate(Draw.POLYLINE); break; } } // CALLED WHEN USER FINISHES DRAWING ON THE SCREEN function onDrawEnd(evt) { // CREATE GRAPHIC FEATURE var userGraphic = new Graphic(evt.geometry, inputSymbol); // ADD GRAPHIC FEATURE TO MAP map.graphics.add(userGraphic); // CREATE PROFILE //executeGPTask(); var features = []; features.push(userGraphic); var featureSet = new FeatureSet(); featureSet.features = features; // TASK PARAMETERS var taskParams = { 'Input_Polylines': featureSet, 'Image_Width': 600, 'Image_Height': 250, 'Display_Segments': 'true' }; // EXECUTE GP TASK gpTask_SurfaceProfile.setOutputSpatialReference(wgs84); gpTask_SurfaceProfile.execute(taskParams, getGPResultsAsFeatures); // DEACTIVATE drawToolbar.deactivate(); } // GET GP RESULTS function getGPResultsAsFeatures(results, messages) { // PROFILE RESULTS var profileFeatures = results[0].value.features; for (var fIdx = 0; fIdx < profileFeatures.length; fIdx++) { var resultFeature = profileFeatures[fIdx]; var imgHTML = string.substitute('<img id="profileImage_${FID}" src="${profileURL}"></img>', resultFeature.attributes); resultFeature.setSymbol(profileSymbol); resultFeature.setInfoTemplate(new InfoTemplate("剖面线长:${length2D} 米", imgHTML)); map.graphics.add(resultFeature); } // SHOW INFO WINDOW FOR FIRST RESULT FEATURE if (profileFeatures.length > 0) { var firstFeature = profileFeatures[0]; map.infoWindow.setTitle(firstFeature.getTitle()); map.infoWindow.setContent(firstFeature.getContent()); var midPnt = geomUtils.getMidPoint(firstFeature.geometry); var scrPnt = map.toScreen(midPnt); map.infoWindow.show(scrPnt, map.getInfoWindowAnchor(scrPnt)); } } });
05-21
下载前可以先看下教程 https://pan.quark.cn/s/a426667488ae 标题“仿淘宝jquery图片左右切换带数字”揭示了这是一个关于运用jQuery技术完成的图片轮播机制,其特色在于具备淘宝在线平台普遍存在的图片切换表现,并且在整个切换环节中会展示当前图片的序列号。 此类功能一般应用于电子商务平台的产品呈现环节,使用户可以便捷地查看多张商品的照片。 说明中的“NULL”表示未提供进一步的信息,但我们可以借助标题来揣摩若干核心的技术要点。 在构建此类功能时,开发者通常会借助以下技术手段:1. **jQuery库**:jQuery是一个应用广泛的JavaScript框架,它简化了HTML文档的遍历、事件管理、动画效果以及Ajax通信。 在此项目中,jQuery将负责处理用户的点击动作(实现左右切换),并且制造流畅的过渡效果。 2. **图片轮播扩展工具**:开发者或许会采用现成的jQuery扩展,例如Slick、Bootstrap Carousel或个性化的轮播函数,以达成图片切换的功能。 这些扩展能够辅助迅速构建功能完善的轮播模块。 3. **即时数字呈现**:展示当前图片的序列号,这需要通过JavaScript或jQuery来追踪并调整。 每当图片切换时,相应的数字也会同步更新。 4. **CSS美化**:为了达成淘宝图片切换的视觉效果,可能需要设计特定的CSS样式,涵盖图片的排列方式、过渡效果、点状指示器等。 CSS3的动画和过渡特性(如`transition`和`animation`)在此过程中扮演关键角色。 5. **事件监测**:运用jQuery的`.on()`方法来监测用户的操作,比如点击左右控制按钮或自动按时间间隔切换。 根据用户的交互,触发相应的函数来执行...
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值