ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
2016-08-18 18:40
393 查看
原文:ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
View Code
效果截图:
![](https://images2015.cnblogs.com/blog/505874/201606/505874-20160607084042761-812841421.png)
esri的github,这里有很多有用的东西,非常值得学习http://esri.github.io/。
本文参考了 http://blog.csdn.net/gisshixisheng/article/details/26132921 谢谢lzugis的分享。
欢迎转载 http://www.cnblogs.com/deliciousExtra/p/5565787.html
1. 开篇
模仿是最好的学习,这次我们继续山寨百度,通过自定义Infowindow来实现百度风格的BubblePopup<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DExtra-BubublPoopup</title> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"> <link rel="stylesheet" href="../dist/dijit/css/dextraPopup.css"> <link rel="stylesheet" href="css/mainApp.css"> <script> var dojoConfig = { parseOnLoad:true, packages: [{ name: 'custom', location: location.pathname.replace(/\/[^/]+$/, '') + '/custom'//从cdn加载自己定义的模块方法 }, { name: 'dextra', location: '/extra.arcgis.3.x/dist/'//从cdn加载自己定义的模块方法 }] }; </script> <script src="https://js.arcgis.com/3.16/"></script> <script> require([ "dojo/dom", "dojo/on", "esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "esri/layers/GraphicsLayer", "dextra/layers/GoogleVectorLayer", "dextra/dijit/DEBubblePopup", "dojo/domReady!"], function (dom, on, Map, Graphic, SimpleMarkerSymbol, InfoTemplate, GraphicsLayer, GoogleVectorLayer,DEBubblePopup) { var infoWindow = new DEBubblePopup(); var map = new Map("map", { showAttribution: false, center: [102.3, 24.6], autoResize: true, sliderPosition: "bottom-right", logo: false, infoWindow:infoWindow, zoom:12 }); var googleVect = new GoogleVectorLayer(); map.addLayer(googleVect); var measureLayer = new GraphicsLayer({id: "infoWindowTest"}); map.addLayer(measureLayer); on(dom.byId("infowindow"), "click", function (e) { on.once(map, "click", function (evt) { console.log(map._container); var sms = new SimpleMarkerSymbol({ "color": [255, 0, 0], "size": 12, "xoffset": 0, "yoffset": 0, "type": "esriSMS", "style": "esriSMSCircle", "outline": { "color": [0, 0, 0, 255], "width": 1, "type": "esriSLS", "style": "esriSLSSolid" } }); var point = map.toMap(evt.screenPoint); var attr = {"Xcoord": point.x, "Ycoord": point.y, "Plant": "Mesa Mint"}; var infoTemplate = new InfoTemplate("Locations", "Latitude: ${Ycoord} Longitude: ${Xcoord}Plant Name:${Plant}"); var graphic=new Graphic(point, sms,attr,infoTemplate); measureLayer.add(graphic); }); }); }); </script> <style> #measureTools { position: absolute; top: 50px; left: 50px; z-index: 1000; } </style> </head> <body> <div id="measureTools"> <button id="infowindow">弹出框</button> </div> <div id="map" ></div> </body> </html>
View Code
效果截图:
![](https://images2015.cnblogs.com/blog/505874/201606/505874-20160607084042761-812841421.png)
3.1 小结
可以看到,通过继承InfoWindowBase我们完全可以实现自己的的infoWindow,编写更具个性化的插件。最后像新手玩家推荐一下esri的github,这里有很多有用的东西,非常值得学习http://esri.github.io/。
本文参考了 http://blog.csdn.net/gisshixisheng/article/details/26132921 谢谢lzugis的分享。
欢迎转载 http://www.cnblogs.com/deliciousExtra/p/5565787.html
相关文章推荐
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
- ArcGIS JS 学习笔记3 实现百度风格的BubblePopup
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS JS 学习笔记4 实现地图联动
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS JS 学习笔记4 实现地图联动
- ArcGIS JS 学习笔记4 实现地图联动
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
- ArcGIS JS 学习笔记4 实现地图联动
- 第51讲:Scala中链式调用风格的实现代码实战及其在Spark编程中的广泛运用学习笔记
- 一个无聊男人的疯狂《数据结构与算法分析-C++描述》学习笔记 习题2.8 随机数组的三种生成算法(补) 将bash的实现翻译成比较纯正的bash风格
- node.js 学习笔记003 :使用superagent和cheerio实现简单网页爬虫
- node.js 学习笔记002 : 使用utility实现字符串加密
- sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map)