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 ...
随机推荐
- Opencv Sift和Surf特征实现图像无缝拼接生成全景图像
Sift和Surf算法实现两幅图像拼接的过程是一样的,主要分为4大部分: 1. 特征点提取和描述 2. 特征点配对,找到两幅图像中匹配点的位置 3. 通过配对点,生成变换矩阵,并对图像1应用变换矩阵生 ...
- iPhone6/6Plus下app状态栏内容放大问题处理
分为兼容模式和高分辨率模式. 兼容模式 当你的 app 没有提供 3x 的 LaunchImage 时,系统默认进入兼容模式,大屏幕一切按照 320 宽度渲染,屏幕宽度返回 320:然后等比例拉伸到大 ...
- NSUserDefaults:通常用来保存一些小巧的数据,如用户的用户名密码,或者是用户的使用习惯,如是否自动打开背景音乐等。
1,NSUserDefaults通常用来保存一些小巧的数据,如用户的用户名密码,或者是用户的使用习惯,如是否自动打开背景音乐等. 2,使用它的原因就是:代码简短,使用方便 3,使用方法如下: -(vo ...
- 新技能 get —— 五笔打字
推荐一个图表记忆网站,五笔字根表图五笔字根表五笔输入法下载口诀五笔打字练习_查询: 1. 键盘的认识 键盘的版式就是那样设定的,主要是 26 个拉丁字母,分三排: QWERT(撇区), YUIOP(捺 ...
- QQ登录, 腾讯开放平台和QQ互联的坑
原文:QQ登录, 腾讯开放平台和QQ互联的坑 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012881042/article/details/7 ...
- jquery 源码学习(四)构造jQuery对象-工具函数
jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下. 作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原 ...
- Linux在出现/java: cannot execute binary file
位这样的情况下通常的虚拟机(32和64)不匹配造成的.再次,你的虚拟机下一场比赛JDK的版本号的 在与X64它是64位置,另32位置 版权声明:本文博主原创文章.博客,未经同意不得转载.
- Docker简单的使用命令
Hello World 使用[docker run]命令在docker container中执行应用程序 <pre name="code" class="plain ...
- 一组西门子S7 报文
03 00 00 16 11 E0 00 00 00 01 00 C1 02 10 00 C2 02 03 01 C0 01 0A(第一次握手报文) 03 00 00 16 11 D0 00 01 0 ...
- Method and apparatus for training a memory signal via an error signal of a memory
Described herein is a method and an apparatus for training a memory signal via an error signal of a ...