Leaflet(Esri)初识

简介: 加载本地地图 IdentifyingFeatures body{margin:0;padding:0;} #map{position:absolute;top:0;bottom:0;right:0;left:0;} #s...
加载本地地图
<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,是不是明白什么了????
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
2月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
73 0
|
5月前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
158 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
5月前
|
定位技术 容器
openlayers
openlayers
133 1
openlayers
|
5月前
|
定位技术
ArcGIS中各版本ArcMap安装OpenStreetMap编辑工具集插件ArcGIS Editor for OSM
ArcGIS中各版本ArcMap安装OpenStreetMap编辑工具集插件ArcGIS Editor for OSM
178 1
|
JavaScript 前端开发 定位技术
OpenLayers入门(一)
OpenLayers入门(一)
823 0
OpenLayers入门(一)
|
定位技术
GIS开发:mapbox gl几种底图的加载
GIS开发:mapbox gl几种底图的加载
276 0
|
定位技术
GIS开发:分享Mapbox Vector tiles
GIS开发:分享Mapbox Vector tiles
218 0
GIS开发:分享Mapbox Vector tiles
ArcGIS配置OSM数据工具ArcGIS Editor for OSM的方法
本文介绍ArcGIS Editor for OpenStreetMap这一工具集插件的下载与安装方法~
412 1
ArcGIS配置OSM数据工具ArcGIS Editor for OSM的方法
|
JavaScript 定位技术
基于Leaflet.draw的gis图形标绘实战
本文将通过编码的方式讲解如何引入Leaflet.draw组件,并绘制点、线、面、圆对象,同时可以计算线的距离,面积,圆半径和点的经纬度等信息。通过本文可了解基本操作,可以基于leaflet扩展相关的绘制组件,为空间检索等
642 0
基于Leaflet.draw的gis图形标绘实战
|
前端开发 定位技术 API
OpenLayers入门(二)
OpenLayers入门(二)
438 0
OpenLayers入门(二)