Arcgis Online - GeoJson篇
- 1.什麼是GeoJson
- 2.怎樣獲得GeoJson
-
- （1）使用ArcMap添加資料
- （2）轉換為GeoJson檔案
- 3.使用ArcGIS API for JavaScript展示GeoJson要素
- 4.結束
1.什麼是GeoJson
GeoJSON是一種對各種地理資料結構進行編碼的格式，基于Javascript對象表示法的地理空間資訊資料交換格式。
GeoJSON對象可以表示幾何、特征或者特征集合。GeoJSON支援下面幾何類型：點、線、面、多點、多線、多面和幾何集合。GeoJSON裡的特征包含一個幾何對象和其他屬性，特征集合表示一系列特征。
- GeoJSON對象可能有任何數目成員（名/值對）。
- GeoJSON對象必須有一個名字為"type"的成員。這個成員的值是由GeoJSON對象的類型所确定的字元串。
type成員的值必須是下面之一：“Point”, “MultiPoint”, “LineString”,
“MultiLineString”, “Polygon”, “MultiPolygon”, “GeometryCollection”,
“Feature”, 或者 “FeatureCollection”。
- GeoJSON對象可能有一個可選的"crs"成員，它的值必須是一個坐标參考系統的對象。
- GeoJSON對象可能有一個"bbox"成員，它的值必須是邊界框數組。
百度百科 - GeoJson
2.怎樣獲得GeoJson
當你擁有.shp檔案或是.mdb檔案時，使用ArcMap軟體（本案例中使用的ArcMap版本為10.6）将其打開，操作如下圖：
（1）使用ArcMap添加資料
點選添加後，可以看到所需要的要素圖層已經加入到ArcMap中了。
（2）轉換為GeoJson檔案
使用ArcMap中的轉換工具進行格式轉換，擷取GeoJson檔案。
選擇選要轉換的要素圖層，勾選下方“GeoJSON(可選)”。
(此處的“格式化的JSON”不勾選可以減小檔案的大小，因為使用不格式化的方式會使檔案的内容進行壓縮，類似于js檔案中的min.js檔案)
點選确定即可進行轉換。
轉換完成後，打開GeoJSON檔案，格式如下：
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:4326"
}
},
"features": [
{
"type": "Feature",
"id": 0,
"geometry": {
"type": "LineString",
"coordinates": [
[
118.81748098990269,
32.031701848104085
],
[
118.81764035969546,
32.031691692101084
]
]
},
"properties": {
"FID": 0,
"OBJECTID": 1,
"OID_": 0,
"PipePointN": "f4a4785a35bf4f6d94a50b6a45afa3e5",
"StartPotio": 332747.46000000002,
"StartPot_1": 345603.83500000002,
"EndPotionX": 332762.47600000002,
"EndPotionY": 345602.76199999999,
"Shape_Leng": 15.054287927300001,
"StartPoint": "qhqys8528",
"EndPointNu": "qhqys8529",
"StartBuryi": "2.1",
"EndBurying": "2.1",
"StartAltit": "5.654",
"EndAltitud": "5.654",
"Texture": "砼",
"BuryingMet": "4",
"LineType": "0",
"PipeDiamet": "600",
"Constructi": "未知",
"OwnershipU": "南京市排水管理處",
"UsageStatu": "2",
"FlowDirect": "0",
"Subordinat": "瑞金路",
"NorthAzimu": 94.087243753899998
}
},
{
"type": "Feature",
"id": 1,
"geometry": {
"type": "LineString",
"coordinates": [
[
118.81727411207272,
32.031720870277802
],
[
118.81748098990269,
32.031701848104085
]
]
},
"properties": {
"FID": 1,
"OBJECTID": 2,
"OID_": 0,
"PipePointN": "fcfcfc817ce347f79c8581bbcee0431a",
"StartPotio": 332727.96899999998,
"StartPot_1": 345605.87300000002,
"EndPotionX": 332747.46000000002,
"EndPotionY": 345603.83500000002,
"Shape_Leng": 19.597258099299999,
"StartPoint": "qhqys8530",
"EndPointNu": "qhqys8528",
"StartBuryi": "2.07",
"EndBurying": "2.14",
"StartAltit": "5.654",
"EndAltitud": "5.654",
"Texture": "砼",
"BuryingMet": "4",
"LineType": "0",
"PipeDiamet": "600",
"Constructi": "未知",
"OwnershipU": "南京市排水管理處",
"UsageStatu": "2",
"FlowDirect": "0",
"Subordinat": "瑞金路",
"NorthAzimu": 95.969217759499998
}
},
{
"type": "Feature",
"id": 2,
"geometry": {
"type": "LineString",
"coordinates": [
[
118.81762183376144,
32.031793328940623
],
[
118.81764035969546,
32.031691692101084
]
]
},
"properties": {
"FID": 2,
"OBJECTID": 3,
"OID_": 0,
"PipePointN": "973708c023264a75a849564f49a275dc",
"StartPotio": 332760.75199999998,
"StartPot_1": 345613.98599999998,
"EndPotionX": 332762.47600000002,
"EndPotionY": 345602.76199999999,
"Shape_Leng": 11.355630849300001,
"StartPoint": "qhqys8531",
"EndPointNu": "qhqys8529",
"StartBuryi": "0.97",
"EndBurying": "1.31",
"StartAltit": "6.443",
"EndAltitud": "6.443",
"Texture": "砼",
"BuryingMet": "4",
"LineType": "0",
"PipeDiamet": "300",
"Constructi": "未知",
"OwnershipU": "南京市排水管理處",
"UsageStatu": "2",
"FlowDirect": "0",
"Subordinat": "後标營路",
"NorthAzimu": 171.267647646
}
}
]
}
由于檔案内容非常多，此處僅展示部分資料，僅供參考GeoJSON檔案的格式。
3.使用ArcGIS API for JavaScript展示GeoJson要素
案例完整效果如下圖：
圖中可以看出，已經将GeoJson檔案加入到圖層中，在地圖中進行展示，但此時該要素圖層可以看出位置并不準确，與地圖上的道路發生了偏移，這種情況是因為本案例使用了谷歌的地圖底層，使用百度、高德也會發生類似的問題，主要是因為本國所使用的地圖均使用了加密算法，不能直接與wgs84的坐标進行直接比對，是以需要使用ArcMap對.shp檔案或是mdb檔案提前進行空間偏移，以此做到兩邊的坐标統一，再加入到地圖中即可。
此處的實作代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>GeoJSONLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<script>require([
"esri/config",
"esri/request",
"esri/Color",
"esri/layers/BaseTileLayer",
"esri/Map",
"esri/layers/GeoJSONLayer",
"esri/views/MapView"
], function (esriConfig, esriRequest, Color, BaseTileLayer,Map, GeoJSONLayer, MapView) {
// 如果GeoJSON檔案與你的網站不在同一個域中，則需要啟用CORS的伺服器或代理。
const url = "http://localhost:8888/GeoJson/qhqys_ln_geo.json";
const geojsonLayer = new GeoJSONLayer({
url: url,
copyright: "USGS Earthquakes"
});
const map = new Map({
basemap: "gray"
});
let TintLayer = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null,
tint: {
value: null,
type: Color
}
},
getTileUrl: function (level, row, col) {
return this.urlTemplate
.replace("{z}", level)
.replace("{x}", col)
.replace("{y}", row);
},
fetchTile: function (level, row, col) {
var url = this.getTileUrl(level, row, col);
return esriRequest(url, {
responseType: "image",
allowImageDataAccess: true
}).then(
function (response) {
var image = response.data;
var width = this.tileInfo.size[0];
var height = this.tileInfo.size[0];
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
context.drawImage(image, 0, 0, width, height);
return canvas;
}.bind(this)
);
}
});
//高德地圖底層
//esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");
//gaoDeLayer = new TintLayer({
// urlTemplate:
// "http://webst01.is.autonavi.com/appmaptile?,
// tint: new Color("#004FBB"),
// title: "高德地圖"
//});
//谷歌地圖底層
esriConfig.request.corsEnabledServers.push("http://www.google.cn/");
let digitalTileLayer = new TintLayer({
urlTemplate:
"http://www.google.cn/maps/vt/[email protected]&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",
tint: new Color("#004FBB"),
title: "谷歌地圖"
});
map.add(digitalTileLayer);
const view = new MapView({
container: "viewDiv",
center: [118.829248, 32.026729],
zoom: 14,
map: map
});
map.add(geojsonLayer);
});</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
4.結束
使用GeoJson的方式展示地圖要素整篇看起來難度應該不大，但是對于不太了解地圖測繪、GIS開發的程式員來說過程其實非常艱辛，可能短短的一段代碼都是經過了很長時間的調試才能确定問題的，希望這篇文章能幫助到其他遇到類似問題的同學，本人也是第一次編寫部落格，不足之處還請諒解。
後續會陸續發出如何使用ArcMap進行坐标轉換、空間校正的方法，以及本人使用Arcgis Online進行開發的案例，敬請期待。