Hello ArcGIS
<!DOCTYPE html><html> <head><link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"><script src="https://js.arcgis.com/4.11/"></script>
<script> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView) {
var map = new Map({ basemap: "topo-vector" });
var view = new MapView({ container: "viewDiv", map: map, center: [121,23.7], zoom: 8 });
}); </script></head>
<body><div id="viewDiv" style="width:500px; height:800px" ></div></body></html>
WebTileLayer | ArcGIS API for JavaScript 4.11
WebTileLayer | ArcGIS API for JavaScript 4.11
EPSG:3857介接網址：https://wmts.nlsc.gov.tw/wmts
TWD97 介接網址：https://wmts.nlsc.gov.tw/97/wmts
連線範例：https://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/15/14127/27366
Web Tile
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WMTSLayer - 4.11</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<style>
#viewDiv {
padding: 0;
margin: 0;
height: 800px;
width: 500px;
}
</style>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
var map, view;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WebTileLayer"
], function(Map, MapView, WebTileLayer) {
var map = new Map({
basemap: "topo"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [121, 23.7],
zoom: 8
});
var tiledLayer = new WebTileLayer({
urlTemplate:
"http://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/{level}/{row}/{col}.png"
});
map.add(tiledLayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
GEOJSON是網路上最常用的gis格式之一。
geojson.io 線上將資料轉換為GeoJSON格式
USGS earthquake GeoJSON Summary Format
GeoJSONLayer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>GeoJSONLayer - 4.11</title>
<style>
#viewDiv {
padding: 0;
margin: 0;
height: 800px;
width: 600px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/layers/GeoJSONLayer",
"esri/views/MapView"
], function(Map, GeoJSONLayer, MapView) {
// If GeoJSON files are not on the same domain as your website, a CORS enabled server
// or a proxy is required. use https://cors.io proxy. Will take sometimes to load
const url =
"https://cors.io/?https://od.cdc.gov.tw/eic/ns1hosp_20160603.json";
const geojsonLayer = new GeoJSONLayer({
url: url,
});
const map = new Map({
basemap: "topo",
layers: [geojsonLayer]
});
const view = new MapView({
container: "viewDiv",
center: [121, 23.7],
zoom: 8,
map: map
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
顯示RSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>ArcGIS 顯示 GeoRSS</title>
<!-- 可 copy 到 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
或 https://developers.arcgis.com/javascript/3/sandbox/sandbox.html
等 sandbox
或 線上 html 編輯器 執行
-->
<link rel="stylesheet" href="http://js.arcgis.com/3.20/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map { height: 100%; margin: 0; padding: 0; }
#meta {
position: absolute;
left: 20px;
bottom: 20px;
width: 20em;
height: 5em;
z-index: 40;
background: #fff;
color: #777;
padding: 5px;
border: 2px solid #666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: arial;
font-size: 0.9em;
}
#meta h3 {
color: #666;
font-size: 1.1em;
padding: 0px;
margin: 0px;
display: inline-block;
}
#loading {
float: right;
}
</style>
<script src="http://js.arcgis.com/3.20/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/GeoRSSLayer", "esri/InfoTemplate",
"dojo/parser", "dojo/_base/array", "dojo/dom-style",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, GeoRSSLayer, InfoTemplate,
parser, arrayUtils, domStyle
) {
map = new esri.Map("map",{
basemap: "oceans",
center: [160, 15],
zoom:1
});
// create layout dijits
parser.parse();
var georssUrl = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.atom";
// other examples of GeoRSS feeds:
// var georssUrl = "http://geocommons.com/overlays/188692.atom"; // U.S. Breweries in 2009 http://geocommons.com/overlays/188692
// var georssUrl = "http://geocommons.com/overlays/116926.atom"; // S.F. and East Bay Breweries http://geocommons.com/overlays/116926
var georss = new GeoRSSLayer(georssUrl);
georss.on("load", function() {
domStyle.set("loading", "display", "none");
// create an info template
var template = new InfoTemplate("${name}", "${description}");
// set the info template for the feature layers that make up the GeoRSS layer
// the GeoRSS layer contains one feature layer for each geometry type
var layers = georss.getFeatureLayers();
arrayUtils.forEach(layers, function(l) {
l.setInfoTemplate(template);
});
});
map.addLayer(georss);
});
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="meta">
<span id="loading"><img src="https://dl.dropboxusercontent.com/u/2654618/loading_black.gif" /></span>
<h3>Display GeoRSS on a map</h3>
<br>
The map displays a simple GeoRSS file with points, lines and polygons.
</div>
</div>
</div>
</body>
</html>