Leaflet(Esri)初识
加载本地地图
<html>
<head>
<metacharset=utf-8/>
<title>IdentifyingFeatures</title>
<metaname='viewport'content='initial-scale=1,maximum-scale=1,user-scalable=no'/> <!--从CDN上引入leaflet的文件-->
<linkrel="stylesheet"href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css"/>
<scriptsrc="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script> <!--从CDN上引入Esri的包-->
<scriptsrc="//cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.6/esri-leaflet.js"></script> <style>
body{margin:0;padding:0;}
#map{position:absolute;top:0;bottom:0;right:0;left:0;}
</style>
</head>
<body> <style>
#selectedFeatures{
position:absolute;
top:10px;
right:10px;
z-index:10;
background:white;
padding:1em;
}
</style> <divid="map"></div>
<script>
varmap=L.map('map').setView([34.03,103.8],13); L.esri.basemapLayer('Gray').addTo(map); varGSAU=L.esri.dynamicMapLayer('http://localhost:6080/arcgis/rest/services/GSAU/20141107NetworkAnalysise/MapServer',{
opacity:0.5,
useCors:false
}).addTo(map); varidentifiedFeature;
map.on('click',function(e){
if(identifiedFeature){
map.removeLayer(identifiedFeature);
}
GSAU.identify().on(map).at(e.latlng).run(function(error,featureCollection){
identifiedFeature=newL.GeoJSON(featureCollection.features[0],{
style:function(){
return{
color:'#5C7DB8',
weight:2
};
}
}).addTo(map);
});
});
</script>
</body>
</html> 这么多的链式函数???不要大惊小怪,通过查看leaflet(Esri)的API可以看到,大多函数返回的都是this.再打开控制台,键入this,奇迹出现了,就是window,是不是明白什么了????
Leaflet(Esri)初识的更多相关文章
- leaflet 整合 esri
此 demo 通过 proj4js 将 leaflet 与 esri 整合起来,同时添加了 ClusteredFeatureLayer 的支持. 下载 <html> <head> ...
- Esri的开源JS项目杂谈
一提到Esri大家首先想到的是庞大的ArcGIS产品大家族,其产品包含从桌面端,到服务器/云端,再到web/移动端.作为一名极客,不聊开源逼格似乎上不去啊.其实,Esri作为一个开放的平台,不仅有稳定 ...
- leaflet地图库
an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...
- esri-leaflet入门教程(1)-leaflet介绍
esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥 关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...
- leaflet+esri-leaflet+heatmap实现热力图
1.环境准备 1)下载leaflet.js插件, 官网传送:http://leafletjs.com/ 2)下载esri-leaflet.js插件, 官网传送:http://esri.github ...
- R+大地图时代︱ leaflet/leafletCN 动态、交互式绘制地图(遍地代码图)
好久没有学习R的新包了,甚是想念啊! 昨天.今天看到两个极好.不得不学的packages+早上被AWS的服务器整得郁闷ing-于是就来点颜色看看~ 本篇受Lchiffon老师的github启发,对两个 ...
- 【GIS】postgres(postgis) --》nodejs+express --》geojson --》leaflet
一.基本架构 1.数据存储层:PostgreSQL-9.2.13 + postgis_2_0_pg92 2.业务处理层:Nodejs + Express + PG驱动 3.前端展示层:Leaflet ...
- 使用 Leaflet 显示 ArcGIS 生成西安80坐标的地图缓存
Leaflet 是一个非常小巧灵活的 Geo js 库,esri 本身也在 Github 上有 leaflet 的相关项目.但是 leaflet 本身支持 Web Mercator Auxiliary ...
- leaflet实现风场图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
随机推荐
- 前端,Java,产品经理,微信小程序,Python等资源合集大放送
为了感恩大家长久以来的关注和支持,小编准备了一些福利,整理了包含前端,Java,产品经理,微信小程序,Python,网站源码,Android应用视频教程,微信公众平台开发教程及材料等资源合集大放送. ...
- js进阶 9-10 html中如何遍历下拉列表
js进阶 9-10 html中单选框和多选框如何遍历下拉列表 一.总结 一句话总结: 1.select元素的options.length可以获取选择长度,然后用options[i]精确定位到选项,用 ...
- 使用SecureCRT连接AWS的EC2
如果使用CentOS等linux系统,直接使用ssh命令即可访问AWS上的Linux-EC2实例. $ ssh -i XXX.pem ec2-user@{IP/hostname} 在Windows系统 ...
- 善用Linux与Windows中的筛选功能及其他有用功能
cmd中的检索目录结构是用 tree命令,检索本目录中这一级别的所有文件是dir,要是文件很多时需要用到检索功能 dir | find "abc" #####主要find之后要加双 ...
- Erlang 转至维基百科
Erlang(英语发音:/ˈɜrlæŋ/)是一种通用的并行程序设计语言,它由乔·阿姆斯特朗(Joe Armstrong)在瑞典电信设备制造商爱立信所辖的计算机科学研究室开发,目的是创造一种可以应付大规 ...
- BZOJ1010玩具装箱 - 斜率优化dp
传送门 题目分析: 设\(f[i]\)表示装前i个玩具的花费. 列出转移方程:\[f[i] = max\{f[j] + ((i - (j + 1)) + sum[i] - sum[j] - L))^2 ...
- cxf maven 依赖 No message body writer foud.. contenttype:application/json
最近使用cxf发布rest服务时遇到了如题的异常,最后发现是缺少依赖的问题.ps:我并没有使用spring cxf基本运行需要如下依赖 1 <dependency> <groupId ...
- iOS 使用贝塞尔曲线绘制路径
使用贝塞尔曲线绘制路径 大多数时候,我们在开发中使用的控件的边框是矩形,或者做一点圆角,是使得矩形的角看起来更加的圆滑. 但是如果我们想要一个不规则的图形怎么办?有人说,叫UI妹子做,不仅省事,还可以 ...
- Java易混点记录
1.Java 默认将所有成员变量和成员方法与 this 关联在一起,因此使用 this 在某些情况下是多余的. 2.只要类存在,程序就可以访问该类的类变量,语法如下: 类.类变量. 只要实例存在,程序 ...
- 链表Linked List
链表Linked List 1. 链表 数组是一种顺序表,index与value之间是一种顺序映射,以O(1)O(1)的复杂度访问数据元素.但是,若要在表的中间部分插入(或删除)某一个元素时,需要将后 ...