arcgisapiforjs自定义弹出信息提示框资源-CSDN下载

共4个文件

png：1个

js：1个

css：1个

自定义弹出框

arcgis

3星 · 超过75%的资源需积分: 43 129 浏览量 2018-02-09 16:07:24 上传评论 2 收藏 18KB ZIP 举报

在GIS领域，ArcGIS API for JavaScript 是Esri公司提供的一个强大的Web地图开发工具，它允许开发者构建交互式、数据驱动的地图应用。在这个场景中，我们关注的是如何利用这个API来实现自定义的弹出信息提示框。弹出框在地图应用中常常用于展示详细信息，如图层特征的数据，或者提供用户交互的界面。 ArcGIS API for JavaScript 提供了内置的InfoWindow（信息窗口）功能，用于显示地图上的点、线或面要素的详细信息。然而，有时内置的样式可能无法满足特定的设计需求，这时就需要进行自定义。自定义弹出框的核心在于创建一个HTML元素，并结合CSS来定义其外观和布局。 1. **创建自定义HTML结构**：你需要先创建一个HTML结构，这通常包括一个容器元素（如div），以及用于显示内容的子元素。你可以根据需要添加标题、内容区域、按钮等组件。 2. **CSS样式定义**：描述中提到可以直接修改CSS样式来达到自定义效果。可以设定弹出框的大小、位置、颜色、字体、边框、阴影等，使其与你的应用设计保持一致。例如，使用CSS定位（position属性）来控制弹出框在地图上的位置，通过调整z-index确保弹出框位于其他元素之上。 3. **JavaScript交互**：ArcGIS API for JavaScript 提供了事件监听和处理函数，可以用来响应用户的操作，如点击地图上的点或点击按钮。你需要编写JavaScript代码来显示、隐藏弹出框，以及更新其内容。例如，使用`dojo/on`模块监听地图点击事件，获取到相关的地图要素，然后填充到自定义弹出框中。 4. **集成到ArcGIS API**：将自定义弹出框与ArcGIS API 结合，可以通过设置地图的`infoWindow`属性为自定义的HTML元素。你也可以利用`Map.infoWindow.hide()`和`Map.infoWindow.show()`方法来控制弹出框的显示和隐藏。 5. **优化用户体验**：为了提高用户体验，你还可以添加动画效果，比如淡入淡出、滑动等，使得弹出框的出现和消失更加平滑。同时，确保弹出框在不同屏幕尺寸下都能正常显示，以适应响应式设计。 6. **测试与调试**：在开发过程中，记得对各种浏览器和设备进行测试，确保自定义弹出框在不同的环境下都能正常工作。使用开发者工具（如Chrome的DevTools）来检查CSS样式和JavaScript代码，找出并修复潜在的问题。通过深入理解ArcGIS API for JavaScript 和CSS，我们可以创建出符合项目需求的个性化弹出信息提示框，提升地图应用的交互性和视觉效果。这个过程中，良好的代码组织和文档记录也非常重要，以便于后期的维护和扩展。

资源详情

资源评论

资源推荐

收起资源包目录

弹出窗体.zip （4个子文件）

弹出窗体

text.html 3KB

myModules

InfoWindow.css 1KB

InfoWindow.js 4KB

images

site.png 15KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Custom Info Window</title> <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css"> <link rel="stylesheet" href="myModules/InfoWindow.css"> <style> html, body, #mapDiv { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script> var dojoConfig = { parseOnLoad:true, packages: [{ "name": "myModules", "location": location.pathname.replace(/\/[^/]+$/, "") + "/myModules" }] }; </script> <script src="http://js.arcgis.com/3.9/init.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> require([ "dojo/dom", "dojo/dom-construct", "esri/map", "myModules/InfoWindow", "esri/layers/ArcGISTiledMapServiceLayer", "esri/symbols/PictureMarkerSymbol",//图片点符号 "esri/renderers/SimpleRenderer", //简单渲染 "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/string", "dojo/domReady!" ], function( dom, domConstruct, Map, InfoWindow, ArcGISTiledMapServiceLayer, PictureMarkerSymbol, SimpleRenderer, FeatureLayer, InfoTemplate, string ) { //create the custom info window specifying any input options var infoWindow = new InfoWindow({ domNode: domConstruct.create("div", null, dom.byId("mapDiv")) }); var map = new Map("mapDiv", { logo:false, basemap: "gray", center: [-98.57, 39.82], zoom: 4, zoom: 4, slider: true, infoWindow: infoWindow }); //define the info template that is used to display the popup content. var template = new InfoTemplate(); template.setTitle("重庆市木洞镇长寿村"); template.setContent("贫困户：10<br>贫困人口：30<br>帮扶干部：15<br>"); //template.setContent("信息提示框"); var featurelayercity = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0", { mode: FeatureLayer.MODE_SNAPSHOT, infoTemplate: template, outFields: ["*"] }); var pmsRed = new PictureMarkerSymbol('images/site.png', 20, 20).setOffset(0, 15); //简单渲染 var sr=new SimpleRenderer(pmsRed); featurelayercity.setRenderer(sr); map.addLayer(featurelayercity); //resize the info window map.infoWindow.resize(350, 200); }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>