ArcGIS JavaScript for API（003）:geojsonlayer

根据图层名字就可以明白，这类图层数据源就是geojson，即json串格式的地理空间数据，属于矢量数据。

官网有这样一句话：Each GeoJSONLayer will only accept one geometry type.

也就是说每个图层仅支持一个中类型，这样体现了矢量数据的不可叠加性。

有了KML和shp为什么还要geojson呢？也许甲方爸爸只有这个数据，哈哈哈……，不要深究为什么用这个格式，掌握这个技能才是重点！

如果手上没有现成的数据可以从这个地址下载，河北省市级面数据，注意：下载需要一个积分，如果没有积分可留言留下邮箱地址，我回尽快发送给您。

市级河北省面数据，geojson格式，-Javascript文档类资源-CSDN下载

实例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.23/"></script><title>view-Popup-code</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style>
</head><body><script>require(["esri/config", "esri/Map", "esri/views/MapView","esri/tasks/Locator", "esri/layers/GeoJSONLayer"], function (esriConfig, Map, MapView, Locator, GeoJSONLayer) {const map = new Map({basemap: "streets" // Basemap layer service});const view = new MapView({map: map,center: [116, 42], // Longitude, latitude 中国中部zoom: 5, // Zoom levelcontainer: "viewDiv" // Div element});const geojsonlayer = new GeoJSONLayer({url: "./data/test.json",});map.add(geojsonlayer)});</script><div id="viewDiv"></div>
</body></html>

数据的存放位置如图所示：

显示效果如图如图所示：

说明，如果直接用浏览器打开你创建的html文件是无法加载json数据的，因为json数据需要被发布出来，最简单的方式是使用vscode 的live Server插件，以另一种是用发布程序例如 IIS，tomcat 发布。

如果没有现成的geojson文件，只有坐标数据该如何创建geojsonlayer，实例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.23/"></script><title>view-Popup-code</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style>
</head><body><script>require(["esri/config", "esri/Map", "esri/views/MapView","esri/tasks/Locator", "esri/layers/GeoJSONLayer"], function (esriConfig, Map, MapView, Locator, GeoJSONLayer) {const map = new Map({basemap: "streets" // Basemap layer service});const view = new MapView({map: map,center: [116, 42], // Longitude, latitude 中国中部zoom: 5, // Zoom levelcontainer: "viewDiv" // Div element});const geojsonlayer = new GeoJSONLayer({url: "./data/test.json",});map.add(geojsonlayer)const geojson = {type: "FeatureCollection",features: [{type: "Feature",id: 1,geometry: {type: "Polygon",coordinates: [[[100.0, 41.0],[101.0, 41.0],[101.0, 42.0],[100.0, 42.0],[100.0, 41.0]],[[105.0, 41.0],[106.0, 41.0],[106.0, 42.0],[105.0, 42.0],[105.0, 41.0]]]},properties: {prop0: "value0",name: "river"}}]};// create a new blob from geojson featurecollectionconst blob = new Blob([JSON.stringify(geojson)], {type: "application/json"});// URL reference to the blobconst url = URL.createObjectURL(blob);const geojsonlayer1 = new GeoJSONLayer({url:url,});map.add(geojsonlayer1)});</script><div id="viewDiv"></div>
</body></html>

主要分三步，1，组织json数据，2，通过blob创建url，3，创建图层，效果如下

可以看到显示出了两个矩形。这是在二维模型下，那么看一下三维模型下，是什么情况。

三维模式就是创建一个sceneview 而不是mapview

创建view 的代码修改如下，记得添加SceneView的引入

 const view = new SceneView({container: "viewDiv",center: [116, 42],map: map,zoom: 4});

显示结果如下，第二个矩形没有显示填充部分，仔细看值显示了外框，因为外框是白色的，不易被发现。

造成这个现象的原因具体不太清楚，但是有解决方案，解决方案是，每个面创建一个feature，而不是把所有的面都放在一个feature的coordinates数组内，主要是修改geojson 数据，修改代码如下：

            const geojson = {type: "FeatureCollection",features: [{type: "Feature",id: 1,geometry: {type: "Polygon",coordinates: [[[100.0, 41.0],[101.0, 41.0],[101.0, 42.0],[100.0, 42.0],[100.0, 41.0]]]},properties: {prop0: "value0",name: "river"}},{type: "Feature",id: 2,geometry: {type: "Polygon",coordinates: [[[105.0, 41.0],[106.0, 41.0],[106.0, 42.0],[105.0, 42.0],[105.0, 41.0]]]},properties: {prop0: "value0",name: "river"}}]};

显示效果如下：

ArcGIS JavaScript for API（003）:geojsonlayer相关推荐

Arcgis Javascript那些事儿（六）--arcgis js API本地环境配置
最近又重新搞起arcgis javascript开发,配置环境时总结了下原来的问题: 以前在webstorm中添加一个API,用来平时在webstorm中调试,然后在自己电脑iis中再配置一个API, ...
Arcgis Javascript那些事儿（七）--AMD详解
讲解arcgis中的amd知识前,首先介绍这两种Javascript模块规范:CommonJS和AMD.我主要介绍AMD,但是要先从CommonJS讲起. CommonJS 2009年,美国程序员Ry ...
Arcgis Javascript那些事儿（一）--Arcgis server发布feature access服务
1.什么是要素服务? 要素服务可用来通过 Internet 提供要素,并提供显示要素时所要使用的符号系统.之后,客户端可执行查询操作以获取要素,并执行相应的编辑操作.要素服务提供了可用于提高客户端编辑 ...
Arcgis Javascript那些事儿（十一）--网络分析服务使用
上一篇文章写了如何使用arcmap发布网络分析服务,发布的最后就是使用,下面就讲讲网络分析服务在arcgis javascript中的使用. 网络分析服务包括:最优路径分析,最近设施点分析,服务区分析 ...
Arcgis Javascript那些事儿（十）--发布网络分析服务
以前发布过几次网络分析服务,数据都是别人处理好的,按照教程一发,没有完全搞清楚流程,今天自己研究了下发布过程,写出来造福下giser. 一.数据准备数据准备是重中之重,许多教程和文档并没有给大家说明 ...
Arcgis Javascript那些事儿（二）--要素画图编辑
1.获取要素服务地址发布服务MyMapService后,可以在ArcGIS Server的Services Directory中可以看到一个名为MyMapService (FeatureServer ...
Arcgis Javascript那些事儿（九）--自定义infowindow
从开始使用js API,就一直使用infowindow,最近需要自定义的时候才发现里面问题和方法还挺多的,没有android端这么清晰,最近看了些博文和官网,自己总结了方法如下: 一.继承infowi ...
Arcgis javascript那些事儿（十七）——地理编码服务的发布与使用
一.引言地理编码是按照主要是地理位置描述与地理坐标的相互转换,主要包括地理编码与反地理编码. 地理编码指的是根据地名获取位置信息: 反地理编码指的是根据位置信息获取地名: 这个的使用我们要根据需求来 ...
Arcgis Javascript那些事儿（八）--图层获取与图层顺序
这两天写一些系统基本图层的时候要涉及到同一个map切换layer的功能,这里主要涉及到了图层获取与图层顺序的问题,单独拿出来总结了下. 一.图层layer获取 1.通过id获取首先从map中获取la ...

ArcGIS JavaScript for API（003）:geojsonlayer

ArcGIS JavaScript for API（003）:geojsonlayer相关推荐

最新文章

热门文章