Javascript
在线展示geojson-icode9专业技术文章分享
如果你想要在线展示 GeoJSON 数据，可以使用一些在线工具或平台来实现。以下是几种常用的在线展示 GeoJSON 的方法：
-
GeoJSON.io：GeoJSON.io 是一个免费的在线工具，可以让你在地图上直接加载和编辑 GeoJSON 数据。你可以将你的 GeoJSON 文件拖放到网页上，或者从本地文件系统中加载。在 GeoJSON.io 中，你还可以添加图层、编辑几何要素、更改样式等。网址：geojson.io
-
GitHub Gist：GitHub Gist 是一个代码片段共享平台，你可以将你的 GeoJSON 数据上传到 Gist，然后通过 Gist 页面的嵌入功能将地图嵌入到你的网页中。你可以选择将 GeoJSON 文件作为代码片段进行上传，并在描述字段中指定文件类型为 GeoJSON。然后，将生成的嵌入代码复制到你的网页中。网址：gist.github.com
-
Mapbox Studio：Mapbox Studio 是一个用于创建和自定义地图的在线平台。它支持加载和展示 GeoJSON 数据，并提供各种样式和操作选项。你可以在 Mapbox Studio 中上传和加载你的 GeoJSON 文件，然后创建漂亮的地图样式，并将其嵌入到你的网页中。网址：studio.mapbox.com
-
ArcGIS Online：如果你使用 ArcGIS 平台，你可以将 GeoJSON 数据上传到 ArcGIS Online，并在 ArcGIS Online 地图查看器中进行展示。你可以在 ArcGIS Online 中创建一个地图，然后上传你的 GeoJSON 文件，并将其添加为图层。最后，你可以选择公开你的地图，并将其分享到任何网页上。网址：www.arcgis.com
通过上述方法之一，你可以在线展示和共享你的 GeoJSON 数据，并将其嵌入到你的网页中，以便其他人可以查看和交互。
ArcGIS 平台支持广泛的坐标系，包括以下常用的坐标系：
-
WGS84 (World Geodetic System 1984)：WGS84 是一种广泛使用的地理坐标系，它采用经度和纬度来表示地球表面上的点。在 ArcGIS 中，经常使用 WGS84 坐标系来表示经纬度数据。
-
Web Mercator (WGS84 Web Mercator Auxiliary Sphere)：Web Mercator 是一种用于在线地图的投影坐标系，也被称为 Web Mercator Auxiliary Sphere (Web Mercator 辅助球体) 或它的 EPSG 代号为 3857。该坐标系在世界范围内使用广泛，特别适用于 Web 地图应用。
-
UTM (Universal Transverse Mercator)：UTM 是一种通用的投影坐标系，使用 60 个纵向区域和 20 个横向带来划分地球表面。每个带有一个横向投影坐标系，通常用于大区域或国家的地图制作。
-
State Plane Coordinate System (SPCS)：State Plane Coordinate System 是一组为美国各州或地区定义的坐标系。每个州或地区都有自己的投影方法和坐标单位，适用于较小的区域。
-
Gauss-Kruger：Gauss-Kruger 是一种德国和中国常用的投影坐标系，适用于大陆区域的地图制作。
除了上述常用的坐标系，ArcGIS 还支持许多其他的本地和投影坐标系，例如 Lambert Conformal Conic、Albers Equal Area Conic、Robinson、等等。在 ArcGIS 中，你可以选择合适的坐标系来表示和处理你的地理数据，以满足特定的需求和分析要求。
以下是一个使用 ArcGIS JavaScript API 在 WGS84 坐标系上显示地图的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>ArcGIS JavaScript - Displaying WGS84 Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<style>
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function(Map, MapView, TileLayer) {
// 创建一个基础地图图层
var basemapLayer = new TileLayer({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
});
// 创建一个地图实例，并添加基础地图图层
var map = new Map({
basemap: {
baseLayers: [basemapLayer]
}
});
// 创建一个地图视图实例，并指定容器元素
var view = new MapView({
container: "viewDiv",
map: map,
center: [0, 0], // 经度和纬度坐标（WGS84）
zoom: 2 // 初始缩放级别
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
HTML
这个示例使用 ArcGIS JavaScript API 创建了一个基于 WGS84 坐标系的地图。它加载了一个在线的卫星影像图作为基础地图，并将视图中心设置为经度和纬度为 0 的位置。你可以将上述代码保存为一个 HTML 文件，并在 Web 浏览器中运行该文件，就可以看到一个使用 WGS84 坐标系的地图视图。你可以通过调整中心位置和缩放级别来探索和查看不同的地理区域。
以下是一个使用 ArcGIS JavaScript API 在 WGS84 坐标系上显示 GeoJSON 数据的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>ArcGIS JavaScript - Displaying GeoJSON in WGS84</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<style>
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GeoJSONLayer"
], function(Map, MapView, GeoJSONLayer) {
// 创建一个基础地图
var map = new Map({
basemap: "streets"
});
// 创建 GeoJSONLayer
var geojsonLayer = new GeoJSONLayer({
url: "path/to/your/geojson/file.geojson", // 替换为你的 GeoJSON 文件路径
popupTemplate: {
title: "{name}" // 根据 GeoJSON 属性设置弹出窗口的标题
}
});
// 将 GeoJSONLayer 添加到地图中
map.add(geojsonLayer);
// 创建一个地图视图实例
var view = new MapView({
container: "viewDiv",
map: map,
center: [0, 0], // 经度和纬度坐标（WGS84）
zoom: 2 // 初始缩放级别
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
HTML
在上述示例中，我们添加了一个 GeoJSONLayer，并通过 url 属性指定了要加载的 GeoJSON 文件的路径。请将 url 替换为你实际的 GeoJSON 文件的路径。我们还设置了一个 Popup Template，可以根据 GeoJSON 属性设置弹出窗口的标题，这里使用了 name 属性。将代码保存为 HTML 文件并在浏览器中运行，你将会在地图上看到 GeoJSON 数据的要素，并可以通过点击要素查看弹出窗口。
在 ArcGIS JavaScript API 中，可以使用 spatialReference 属性来设置坐标系。以下是一些示例代码，展示如何设置不同的坐标系：
- 设置 Web Mercator 投影坐标系（Web Mercator Auxiliary Sphere）：
var spatialReference = {
wkid: 3857 // Web Mercator Auxiliary Sphere 的 WKID
};
JavaScript
- 设置 WGS84 地理坐标系：
var spatialReference = {
wkid: 4326 // WGS84 的 WKID
};
JavaScript
- 设置 UTM 投影坐标系（UTM Zone 11N）：
var spatialReference = {
wkid: 32611 // UTM Zone 11N 的 WKID
};
JavaScript
- 设置自定义局部坐标系（Lambert Conformal Conic）：
var spatialReference = {
wkid: 102009, // Lambert Conformal Conic 的 WKID
centralMeridian: -96, // 中央经线
latitudeOfOrigin: 39, // 原点纬度
standardParallel1: 33, // 第一标准纬度
standardParallel2: 45 // 第二标准纬度
};
JavaScript
以上示例代码中，我们使用 spatialReference 对象，并指定一个 wkid 属性来设置坐标系的 Well-Known ID (WKID)。你可以根据需要选择合适的 WKID 来设置坐标系。需要注意的是，不同的投影坐标系和地理坐标系所对应的 WKID 是不同的。
当你创建地图或图层时，可以将 spatialReference 对象作为参数传递，以指定要使用的坐标系。例如：
var map = new Map({
basemap: "streets",
spatialReference: spatialReference
});
var layer = new FeatureLayer({
url: "path/to/your/feature/layer",
spatialReference: spatialReference
});
JavaScript
在上述示例中，我们将 spatialReference 对象作为参数传递给地图和图层的构造函数，以确保它们使用指定的坐标系。将代码适当地修改为满足你的需求，并引入正确的 WKID 可以设置坐标系。
标签： 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
-
React入门教程：从零开始搭建你的第一个React应用12-26
-
Vue2入门教程：轻松掌握前端开发基础12-25
-
Vue3入门指南：快速搭建你的第一个Vue3项目12-25
-
JS基础知识入门教程12-25
-
React基础知识详解：从入门到初级应用12-25
-
Vue3基础知识详解与实战指南12-25
-
Vue3学习：从入门到初步掌握12-25
-
Vue3入门：新手必读的简单教程12-25
-
【JS逆向百例】爱疯官网登录逆向分析12-23
-
Vue3教程：新手入门到实践应用12-21
-
VueRouter4教程：从入门到实践12-21
-
Vue3项目实战：从入门到上手12-20
-
Vue3项目实战：新手入门教程12-20
-
VueRouter4项目实战：新手入门教程12-20
-
如何实现JDBC和jsp的关系？-icode9专业技术文章分享12-20
