1. 加载本地地图
  1. <html>
  2. <head>
  3. <metacharset=utf-8/>
  4. <title>IdentifyingFeatures</title>
  5. <metaname='viewport'content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
  6.  
  7. <!--从CDN上引入leaflet的文件-->
  8. <linkrel="stylesheet"href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css"/>
  9. <scriptsrc="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
  10.  
  11. <!--从CDN上引入Esri的包-->
  12. <scriptsrc="//cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.6/esri-leaflet.js"></script>
  13.  
  14. <style>
  15. body{margin:0;padding:0;}
  16. #map{position:absolute;top:0;bottom:0;right:0;left:0;}
  17. </style>
  18. </head>
  19. <body>
  20.  
  21. <style>
  22. #selectedFeatures{
  23. position:absolute;
  24. top:10px;
  25. right:10px;
  26. z-index:10;
  27. background:white;
  28. padding:1em;
  29. }
  30. </style>
  31.  
  32. <divid="map"></div>
  33. <script>
  34. varmap=L.map('map').setView([34.03,103.8],13);
  35.  
  36. L.esri.basemapLayer('Gray').addTo(map);
  37.  
  38. varGSAU=L.esri.dynamicMapLayer('http://localhost:6080/arcgis/rest/services/GSAU/20141107NetworkAnalysise/MapServer',{
  39. opacity:0.5,
  40. useCors:false
  41. }).addTo(map);
  42.  
  43. varidentifiedFeature;
  44. map.on('click',function(e){
  45. if(identifiedFeature){
  46. map.removeLayer(identifiedFeature);
  47. }
  48. GSAU.identify().on(map).at(e.latlng).run(function(error,featureCollection){
  49. identifiedFeature=newL.GeoJSON(featureCollection.features[0],{
  50. style:function(){
  51. return{
  52. color:'#5C7DB8',
  53. weight:2
  54. };
  55. }
  56. }).addTo(map);
  57. });
  58. });
  59. </script>
  60. </body>
  61. </html>    
  62.  
  63. 这么多的链式函数？？？不要大惊小怪，通过查看leaflet（Esri）的API可以看到,大多函数返回的都是this.再打开控制台，键入this,奇迹出现了，就是window，是不是明白什么了？？？？

Leaflet(Esri)初识的更多相关文章

  1. leaflet 整合 esri

    此 demo 通过 proj4js 将 leaflet 与 esri 整合起来,同时添加了 ClusteredFeatureLayer 的支持. 下载 <html> <head> ...

  2. Esri的开源JS项目杂谈

    一提到Esri大家首先想到的是庞大的ArcGIS产品大家族,其产品包含从桌面端,到服务器/云端,再到web/移动端.作为一名极客,不聊开源逼格似乎上不去啊.其实,Esri作为一个开放的平台,不仅有稳定 ...

  3. leaflet地图库

    an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...

  4. esri-leaflet入门教程（1）-leaflet介绍

    esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥 关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...

  5. leaflet+esri-leaflet+heatmap实现热力图

    1.环境准备 1)下载leaflet.js插件,  官网传送:http://leafletjs.com/ 2)下载esri-leaflet.js插件,  官网传送:http://esri.github ...

  6. R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图（遍地代码图）

    好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...

  7. 【GIS】postgres（postgis） --》nodejs+express --》geojson --》leaflet

    一.基本架构 1.数据存储层:PostgreSQL-9.2.13 + postgis_2_0_pg92 2.业务处理层:Nodejs + Express + PG驱动 3.前端展示层:Leaflet ...

  8. 使用 Leaflet 显示 ArcGIS 生成西安80坐标的地图缓存

    Leaflet 是一个非常小巧灵活的 Geo js 库,esri 本身也在 Github 上有 leaflet 的相关项目.但是 leaflet 本身支持 Web Mercator Auxiliary ...

  9. leaflet实现风场图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

随机推荐

  1. MapKit

    MapKit MapKit框架的使用 nMapKit框架使用前提 p导入框架 p p导入主头文件 #import <MapKit/MapKit.h> MapKit框架使用须知 pMapKi ...

  2. 【codeforces 768C】Jon Snow and his Favourite Number

    [题目链接]:http://codeforces.com/contest/768/problem/C [题意] 给你n个数字; 让你每次把这n个数字排序; 然后对奇数位的数字进行异或操作,然后对新生成 ...

  3. boost::any在降低模块之间耦合性的应用

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在开发大型系统中,遵循这样一个原则:模块之间低耦合,模块内高内聚.比如系统中模块有界面模块和算法模块两种,一般是界面模 ...

  4. android studio报错提示： Gradle DSL method not found: 'android() 解决方案

    原文错误提示: Error:(16, 0) Gradle DSL method not found: 'Android()'Possible causes:<ul><li>Th ...

  5. 一个里程碑，新网站实现全站https

    本地验证node服务没问题后,上传到阿里云服务器上,发现无法访问.一开始以为是SSL证书有问题,去腾讯云SSL证书重新下载,还是不行.然后改node应用文件代码app.js,猜测是crt证书应该改成p ...

  6. 单核、多线程与时间片，以Node.js为例

    去年写了篇文章<线程与进程的理解>,当时认为线程和CPU的单核多核无关,操作系统可以有很多个线程.但今天看<深入浅出Node.js>一书时,多次提到单线程无法利用多核CPU一类 ...

  7. Spring处理跨域请求

    [nio-8080-exec-8] o.s.web.cors.DefaultCorsProcessor        : Skip CORS processing: request is from s ...

  8. CAP和最终一致性

    查阅资料整理了最终一致性.CAP 相关的内容.由于图省事儿,没有做文字的整理记载,只有 slides 和一些查阅过的链接,大家将就着看.欢迎指正. slides: slides 链接:请戳这里 背景 ...

  9. 如何只安装dependencies

    npm install --production 这样就会跳过devDependencies配置 参考链接 https://docs.npmjs.com/cli/install (如果想安装devDe ...

  10. zabbix从听说到学会

    一.zabbix简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供 ...