arcgis for js開發，根據給定的經緯度在地圖上進行標註

阿新 • • 發佈：2019-01-11

本人對地理資訊相關知識一竅不通，由於公司目前要基於arcgis做資料展現，於是進行arcgis for js的開發學習，思路很清晰，但是困難很多，搞了兩三天，才在釋出的地圖圖層上根據給定的經緯度資料進行標註，不過這個做好了，下面就目標清晰了，無非是從後臺取資料，然後在前臺進行展現；

基於js的arcgis開發，需要學習以下知識：

1. 地理資訊相關的基礎知識

2. dojo js框架的學習

3. arcgis for js api的熟悉（https://developers.arcgis.com/javascript/jsapi/polygon-amd.html）

以下是程式碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My fisrt ArcGis Map</title>
<link rel="stylesheet" type="text/css"
href="http://localhost:8080/gis/arcgis_js/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css"
href="http://localhost:8080/gis/arcgis_js/js/esri/css/esri.css" />
<script type="text/javascript"
src="http://localhost:8080/gis/arcgis_js/init.js"></script>
<script type="text/javascript">

var myMap;

require([
"esri/map", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol","esri/symbols/PictureMarkerSymbol","esri/geometry/Point","esri/layers/GraphicsLayer",
"esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/SpatialReference","esri/InfoTemplate",
"esri/graphic",
"dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, Draw,
SimpleMarkerSymbol, SimpleLineSymbol,PictureMarkerSymbol,Point,GraphicsLayer,
PictureFillSymbol, CartographicLineSymbol, SpatialReference,InfoTemplate,
Graphic,
Color, dom, on
) {

myMap = new Map("arcgisDiv");

dojo.connect(myMap, "onClick", showCoordinatesAndAddPoint);
dojo.connect(myMap, "onLoad", graphicLoad);

var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(
"http://192.168.254.161:8080/arcgis/rest/services/GISServer/farmland/ImageServer");

myMap.addLayer(myTiledMapServiceLayer);

function showCoordinatesAndAddPoint(evt) {
//get mapPoint from event
var mp = evt.mapPoint; // 可以從mp物件的屬性中查詢到圖層對應的wkid的值，這個值和下面紅色註釋的值要保持一致

//display mouse coordinates
dojo.byId("info").innerHTML = mp.x + ", " + mp.y;

// 102100
var newPoint = new Point(mp.x, mp.y, new SpatialReference({ wkid: 102100 }));

var picSymbol = new PictureMarkerSymbol("http://localhost:8080/gis/images/chaosu.png", 20, 20);
var picGraphic = new Graphic(newPoint, picSymbol);

myMap.graphics.add(picGraphic);

}

function graphicLoad()
{

// new SpatialReference({ wkid: 102100 }) 這個引數必須加，而且wkid的值要和圖層保持一致，否則顯示不出來，這個值可以從

var newPoint = new Point(13184586.725552682, 3951448.604221201, new SpatialReference({ wkid: 102100 }));

var picSymbol = new PictureMarkerSymbol("http://localhost:8080/gis/images/chaosu.png", 20, 20);
var picGraphic = new Graphic(newPoint, picSymbol);

var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("hello world");
infoTemplate.setContent("hello world說說撒 hello world");

picGraphic.setInfoTemplate(infoTemplate);
myMap.graphics.add(picGraphic);

}
});

</script>
</head>
<body class="tundra">
<div id="arcgisDiv"
style="width: 900px; height: 600px; border: 1px solid #000;"></div>
<div id="info"></div>
</body>
</html>

arcgis for js開發，根據給定的經緯度在地圖上進行標註

arcgis for js開發，根據給定的經緯度在地圖上進行標註

arcgis for js 開發系列之地圖新增折線

arcgis for js 開發系列之熱力圖

arcgis for js 開發系列之地圖實現右鍵點選事件

arcgis for js 開發系列之地圖地圖繪製矩形

arcgis for js 開發系列之地圖氣泡窗

arcgis for js 開發系列之地圖新增圖片標註

Arcgis for Android開發檔案一（離線地圖解決方案）

arcgis api for js 開發

arcgis for js 根據多邊形自動縮放

Arcgis for Js實現graphiclayer的空間查詢

（轉）Arcgis for Js之Graphiclayer擴展詳解

用JS寫，根據用戶輸入的年月份判斷是這年的第幾天

ArcGIS for qml - 地址地標轉換為經緯度（地理編碼）

arcgis for js SSL證書無效

WebAppBuilder獨立於Portal之arcgis for js應用框架研究

arcgis for js 通用氣泡

Arcgis for Js QueryTask查詢結果集的定位

arcgis for js 從入門到放棄一：初識和配置詳解

arcgis for js 3.x 學習記錄（一）

arcgis for js開發， 根據給定的經緯度在地圖上進行標註

相關推薦

arcgis for js開發，根據給定的經緯度在地圖上進行標註