加载arcgis server的rest服务瓦片数据ol.layer.Tile+ol.source.TileArcGISRest

加载arcgis online的在线瓦片数据ol.layer.Tile+ol.source.XYZ

加载arcgis server的rest服务矢量数据ol.layer.Vector+ol.source.Vector

上图所示是server的服务瓦片数据。

1、加载arcgis的服务瓦片数据:要注意将js写在地图标签的后面才能生效,不然地图出不来

var map = new ol.Map({

  target:"mapDiv",

  view:new ol.View({

    center:[0,0],

    zoom:5  //初始化的中心点是缩放

  })

});

var arcgisSource = new ol.source.TileArcGISRest({

  url:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer"

});

var arcgisLayer = new ol.layer.Tile({

  source:arcgisSource,

  extent:[-13884991,2870341,-7455066,6338219]

});

map.addLayer(arcgisLayer);

setMapView([-10997148, 4569099],5);

function setMapView(center,zoom){

  var view = map.getView();

  view.setCenter(center);

  view.setZoom(zoom);

}

<div id="mapDiv"></div>

2、加载arcgis online的在线瓦片数据

var arcgisSource = new ol.source.XYZ({

  attributions:new ol.Attribution({

    html:'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer">ArcGIS</a>'

  })

  url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}"

});

var arcgisLayer = new ol.layer.Tile({

  source:arcgisSource

});

map.addLayer(arcgisLayer);

setMapView(ol.proj.fromLonLat([-121.1, 47.5]),7);  //坐标转换问题?

3、加载arcgis server的rest服务矢量数据

var serviceUrl = 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' + 'services/PDX_Pedestrian_Districts/FeatureServer/';   //根目录
var layer = '0';  //参数设置
var esrijsonFormat = new ol.format.EsriJSON();  //ESRI的JSON数据格式解析类

//实例化矢量数据源对象(AJAX请求REST服务)
                    var arcGISSource = new ol.source.Vector({
                       loader: function (extent, resolution, projection) {
                          var url = serviceUrl + layer + '/query/?f=json&' +
                             'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
                             encodeURIComponent('{"xmin":' + extent[0] + ',"ymin":' +
                                    extent[1] + ',"xmax":' + extent[2] + ',"ymax":' + extent[3] +
                                   ',"spatialReference":{"wkid":102100}}') +
                                '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
                               '&outSR=102100';
                          $.ajax({

          url: url,

          dataType: 'jsonp',

          success: function (response) {
                                   if (response.error) {
                                       alert(response.error.message + '\n' + response.error.details.join('\n'));
                                  } else {
                                        // 从请求结果中读取要素
                                        var features = esrijsonFormat.readFeatures(response, {
                                            featureProjection: projection
                                        });
                                        if (features.length > 0) {
                                            arcGISSource.addFeatures(features);//将要素设置到数据源中
                                      }
                               }
                           }
                         });
                      },
                      strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
                           tileSize: 512
                      }))
                  });
                 arcGISLayers = new ol.layer.Vector({
                        source: arcGISSource
                 });
                 map.addLayer(arcGISLayers); //添加地图图层  
                 setMapView(ol.proj.fromLonLat([-121.1, 47.5]), 5);

添加ArcGIS数据的更多相关文章

  1. ArcEngine批量添加XY数据

    使用ArcGIS Desktop “添加XY数据”或者“创建XY事件图层”工具 可以导入Excel坐标数据,生成临时图层并添加至ArcMap.ArcGlobe或者ArcScene中.在ArcEngin ...

  2. ArcGIS数据生产与精细化制图之中国年降水量分布图的制作

    原文:ArcGIS数据生产与精细化制图之中国年降水量分布图的制作 楼主按:在今年的Esri中国用户大会上,我听了几场关于ArcGIS用于制图方面的讲座,也在体验区与Esri中国的技术老师有一些交流.一 ...

  3. thinkphp添加空数据的解决办法

    thinkphp真是个麻烦的东西,各种小问题,其中字段映射的表单名不能与数据库的字段名称相同,否则会添加空数据! 还有自动完成的名称要与字段映射后的名称相同,否则自动完成不会起作用! 还有自动验证的字 ...

  4. Python中,添加写入数据到已经存在的Excel的xls文件,即打开excel文件,写入新数据

    背景 Python中,想要打开已经存在的excel的xls文件,然后在最后新的一行的数据. 折腾过程 1.找到了参考资料: writing to existing workbook using xlw ...

  5. “ArcGIS数据应用和地图打印输出

    中国科学院计算技术研究所教育中心 关于开展“ArcGIS数据应用和地图打印输出” 培训班的通知 各相关单位: 随着信息化.网络化.数字化向纵深发展,互联网与空间地理信息系统相互交织,数字地球.“智慧地 ...

  6. 更新ACCESS数据库出现“字段太小而不能接受所要添加的数据的数量。试着插入或粘贴较少的数据。”的解决方法

    今天进行数据调试时出现“字段太小而不能接受所要添加的数据的数量.试着插入或粘贴较少的数据.”,跟踪发现是在更新数据库的数据时出现的. 打开数据库表格发现出错的数据字段类型被定义为“文本”,也就是数据最 ...

  7. 向SDE图层中添加大量数据时,出现ORA-00604以及ORA-01000的解决办法

    转自原文 向SDE图层中添加大量数据时,出现ORA-00604以及ORA-01000的解决办法 写了一个小程序,从一个列表中读取坐标串,每个坐标串生成一个IPolygon,然后将这些Polygon添加 ...

  8. java+ mysql 给所有的表添加假数据

    需求:别的项目, 代码扣过来了, 数据库也拿过来了, 但是数据库全是空表, 一共700 张表,需求是给表添加假数据,让它能运行起来. 一下是代码实现: 1.数据库连接: public static C ...

  9. ASP.NET MVC用存储过程批量添加修改数据

    用Entity Framework 进行数据库交互,在代码里直接用lamda表达式和linq对数据库操作,中间为程序员省去了数据库访问的代码时间,程序员直接可以专注业务逻辑层的编写.但是对于比较复杂的 ...

随机推荐

  1. RxSwift 之变换操作

    https://www.aliyun.com/jiaocheng/349821.html RxSwift入坑解读-你所需要知道的各种概念 http://www.open-open.com/lib/vi ...

  2. How an Event Enters a Cocoa Application

    How an Event Enters a Cocoa Application An event is a low-level record of a user action that is usua ...

  3. Unity5.0 状态机新增的entry/exit

    相关官方日志 https://blogs.unity3d.com/cn/2014/06/26/shiny-new-animation-features-in-unity-5-0/

  4. (翻译) Inheritance and the prototype chain 继承和原型链

    JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++) ...

  5. js中的变量提升和函数提升

    从上周开始,我所在的学习小组正式开始了angular的学习,angular是全面支持es6的,所以语法上和以前的angular有了很大的不同,比如变量声明时就抛弃了var,而选择了let和const: ...

  6. 使用plsql创建package

    1. 2.需要在packages中新建相同的包名:否则无法编译,报没有声明

  7. HDU 4089

    很容易列出方程 设dp[i][j]为排在第i位置,总共有j个人排队到达目标状态的概率 i=1 dp[i][j]=p4+p1*dp[i][j]+p2*dp[j][j] 2<=i<=k dp[ ...

  8. JAVA学习之 异常处理机制

    今天就来说说java的异常处理机制,异常处理不是第一接触,尤其是写过非常多c#的代码,基本都会写到异常处理的代码,事实上c#的异常处理与java的异常处理基本都是一样的,仅仅是在一些细节上不是非常一样 ...

  9. C++中对字符串进行插入、替换、删除操作

    #include <iostream> #include <string> using std::cout; using std::endl; using std::strin ...

  10. node.js mongodb ReplSet

    随着web2.0兴起,高并发大数据量的应用对数据库高速响应的性能要求日趋明显,传统的关系型数据库在这方面显得有些乏力.有矛自有盾,内存DB的出现弥补了传统关系型db的不足.眼下市面流行的内存db主要有 ...