4+版本
參考文檔
https://developers.arcgis.com/labs/javascript/display-point-line-and-polygon-graphics/
http://desktop.arcgis.com/zh-cn/arcmap/latest/get-started/main/get-started-with-arcmap.htm
基本型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
<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: [-118.80500, 34.02700], // longitude, latitude
zoom: 13
});
});
</script>
</html>
添加點線面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(Map, MapView, Graphic, GraphicsLayer) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80657463861, 34.0005930608889], // longitude, latitude
zoom: 13
});
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
//點
var point = {
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
var simpleMarkerSymbol = {//設置樣式
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
//------------
//線
var simpleLineSymbol = {
type: "simple-line",
color: [226, 119, 40], // orange
width: 2
};
var polyline = {
type: "polyline",
paths: [
[-118.821527826096, 34.0139576938577],
[-118.814893761649, 34.0080602407843],
[-118.808878330345, 34.0016642996246]
]
};
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: simpleLineSymbol
})
graphicsLayer.add(polylineGraphic);
//面
var polygon = {
type: "polygon",
rings: [
[-118.818984489994, 34.0137559967283],
[-118.806796597377, 34.0215816298725],
[-118.791432890735, 34.0163883241613],
[-118.79596686535, 34.008564864635],
[-118.808558110679, 34.0035027131376]
]
};
var simpleFillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8], // orange, opacity 80%
outline: {
color: [255, 255, 255],
width: 1
}
};
var polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol
});
graphicsLayer.add(polygonGraphic);
});
</script>
</html>
添加多個點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(Map, MapView, Graphic, GraphicsLayer) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80657463861, 34.0005930608889], // longitude, latitude
zoom: 12
});
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
//點
var point = {
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
var point2 = {
type: "point",
longitude: -119.00657463861,
latitude: 34.0005930608889
};
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
graphicsLayer.add(pointGraphic);
graphicsLayer.add(new Graphic({
geometry: point2,
symbol: simpleMarkerSymbol
}));
//------------
});
</script>
</html>
點擊後彈出自定義提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(Map, MapView, Graphic, GraphicsLayer) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80657463861, 34.0005930608889], // longitude, latitude
zoom: 12
});
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
//點
var point = {
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
//*** ADD ***//
// Create attributes
var attributes = {
Name: "My point", // The name of the
Location: " Point Dume State Beach", // The owner of the
};
// Create popup template
var popupTemplate = {
title: "{Name}",
content: "I am located at <b>{Location}</b>."
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
attributes: attributes,
popupTemplate: popupTemplate
});
graphicsLayer.add(pointGraphic);
});
</script>
</html>
這裏用到了一個挺奇怪的語法
var attributes = {
Name: "My point", // The name of the
Location: " Point Dume State Beach", // The owner of the
};
相當於臨時定義了一個數據字典，在popupTemplate中，括號內的部分會按照attributes 中設定的值進行替換。也就是說，直接設置成這樣也是可以的
var popupTemplate = {
title: "My point111",
content: "I am located at <b> Point Dume State Beach222</b>."
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
//attributes: attributes,
popupTemplate: popupTemplate
});
自定義點圖標與位置標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(Map, MapView, Graphic, GraphicsLayer) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80657463861, 34.0005930608889], // longitude, latitude
zoom: 12
});
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// Add a blue location pin
var pictureGraphic = new Graphic({
geometry: {
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
},
symbol: {
type: "picture-marker",
url: "num_1.png",//圖片地址
width: "18px",
height: "18px"
}
});
graphicsLayer.add(pictureGraphic);
// Add text below the pin
var textGraphic = new Graphic({
geometry: {
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
},
symbol: {
type: "text",
color: [25,25,25],//字顏色
haloColor: [255,255,255],//字邊框顏色
haloSize: "1px",
text: "This is my location!",
xoffset: 0,//與座標的x軸偏移
yoffset: -25,//與座標的y軸偏移
font: {
size: 12
}
}
});
graphicsLayer.add(textGraphic);
});
</script>
</html>
可以看出，這是用兩個對象分別實現的，即通過symbol的type屬性來區分標記的類型。
3+版本
https://developers.arcgis.com/javascript/3/
還是要吐槽一下3版本的官方文檔，對web開發真的很不友好，找點api真叫一個累。不過相關的博客文章到是有很多。
添加點及彈出信息框
<!DOCTYPE html>
<html>
<!--
參考文章
https://blog.csdn.net/idomyway/article/details/84798010
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Tiled map service</title>
<link rel="stylesheet" href="http://127.0.0.1:8020/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="http://127.0.0.1:8020/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/init.js"></script>
<script>
var map;
var td;
require(["esri/map",
"esri/InfoTemplate",
"esri/symbols/PictureMarkerSymbol",
"dojo/on",
"esri/Color",
"dojo/query",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/graphic",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
],
function(
Map,
InfoTemplate,
PictureMarkerSymbol,
on,
Color,
query,
Point,
Polyline,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Draw,
SimpleMarkerSymbol,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer,
Graphic,
GraphicsLayer,
QueryTask) {
var map = new Map("map", {
//basemap: "streets",
center: [123.415, 41.65],
zoom: 5,
showAttribution: false
});
//地圖服務
var tiled = new ArcGISTiledMapServiceLayer("http://11.22.33.44:9898/test/arcgis/rest/services/MapServer?Authorization=Basic TUtMWUzYTViYzY0NWQwOmM5N2M0MjM2Mzd");
map.addLayer(tiled);
map.on("load", function(featureSet) {
simpleMarkerSymbol = new PictureMarkerSymbol({
"url":"num_1.png",//本地圖片地址
"height":15,
"width":20,
"type":"esriPMS",
"angle": 0,
});
//創建客戶端圖層
var graphicsLayer=new GraphicsLayer();
//將客戶端圖層添加到地圖中
map.addLayer(graphicsLayer);
var geometry=new Point({
"x": 123.415,
"y": 41.65
});
var graphic=new Graphic(geometry,pSymbol);
graphic.setSymbol(simpleMarkerSymbol);
// map.on("click", function(evt) {
//
// });
var infoTemplate = new InfoTemplate("標題信息",
"<p>FID:111</p>" + //html代碼
"<p>NAME:222</p>" +
"<p>address:333</p>"
);
graphicsLayer.add(graphic);
graphicsLayer.setInfoTemplate(infoTemplate);
});
map.on("zoom-end", function(params){//縮放事件
console.log(params);
console.log(params.level);
console.log(params.anchor);
console.log(map);
});
//end
}
);
</script>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
</script>
</html>
繪製熱力圖
主要參考的這篇文章
https://www.jianshu.com/p/3b36a05872e2
裏面寫的很詳細，只是代碼不夠純淨，我又扒了一份。
還是要說一句官方文檔，我已經把所有熱力圖相關的文檔都看一了遍，如果不是看了上面那篇文章，我是怎麼也想不到esri.layers.FeatureLayer對象是可以往裏添加點的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Tiled map service</title>
<link rel="stylesheet" href="http://127.0.0.1:8020/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="http://127.0.0.1:8020/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/init.js"></script>
<script>
var map;
var td;
require(["esri/map",
"esri/renderers/HeatmapRenderer",
"esri/InfoTemplate",
"esri/symbols/PictureMarkerSymbol",
"dojo/on",
"esri/Color",
"dojo/query",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/graphic",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
],
function(
Map,
HeatmapRenderer,
InfoTemplate,
PictureMarkerSymbol,
on,
Color,
query,
Point,
Polyline,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Draw,
SimpleMarkerSymbol,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer,
Graphic,
GraphicsLayer,
QueryTask) {
var map = new Map("map", {
//basemap: "streets",
center: [123.415, 41.65],
zoom: 5,
showAttribution: false
});
//地圖服務
var tiled = new ArcGISTiledMapServiceLayer("http://11.22.33.44:9898/arcgis/rest/services/MapServer?Authorization=Basic NTUtMWUzYTViYzY0NWQwOmMzdlMDBhOWZlMWY4QxMTQzMWNl");
map.addLayer(tiled);
map.on("load", function(featureSet) {
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"fields": [{
"name": "num",
"type": "esriFieldTypeInteger",
"alias": "num"
}]
}
var featureCollection = {
layerDefinition: layerDefinition,
featureSet: null
};
//創建FeatureLayer圖層
var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"],
opacity: 1
});
var heatmapRenderer = new HeatmapRenderer({
field: "num",
colors: ["rgba(255, 0, 0, 0)", "rgb(0, 255, 0)", "rgb(255, 255, 0)", "rgb(255, 0, 0)"],
blurRadius: 12,
// maxPixelIntensity: 20,
// minPixelIntensity: 2
});
featureLayer.setRenderer(heatmapRenderer); //heatmapRendererhtml中創建的渲染器
map.addLayer(featureLayer);
//隨便添加3條測試數據
var point = new esri.geometry.Point(123.415, 41.65, new esri.SpatialReference({
wkid: 4326//沒看出有什麼用，先放着了
})); //初始化起點
var graphic = new esri.Graphic(point);
graphic.setAttributes({
"num": 123//點的權重
});
featureLayer.add(graphic);
point = new esri.geometry.Point(123.615, 41.65, new esri.SpatialReference({
wkid: 4326
})); //初始化起點
graphic = new esri.Graphic(point);
graphic.setAttributes({
"num": 12
});
featureLayer.add(graphic);
point = new esri.geometry.Point(123.515, 41.75, new esri.SpatialReference({
wkid: 4326
})); //初始化起點
graphic = new esri.Graphic(point);
graphic.setAttributes({
"num": 432
});
featureLayer.add(graphic);
});
//end
}
);
</script>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
</script>
</html>
js彈出指定點的信息框
通過js彈出指定Graphic對象的InfoTemplate信息。本來想着觸發Graphic的click事件來實現的，但是並沒有找到相應的api。
於是換了一種方式，通過infoWindow來模擬出Graphic點擊後的樣子。infoWindow可以設置出現位置，並且在出現時，會頂替掉Graphic的InfoTemplate。
相關方法代碼
var pt = new esri.geometry.Point(123, 41, map.spatialReference);//創建點對象
map.centerAt(pt);//對地圖中心進行重新定位//graphic.geometry
map.infoWindow.setTitle("標題信息");//graphic.getTitle()
map.infoWindow.setContent("html格式 內容代碼");//graphic.getContent()
map.infoWindow.show(pt, map.getInfoWindowAnchor(pt));//顯示信息
//map.infoWindow.hide();//隱藏信息
還需要一種方式去存儲地圖上所有點的座標與詳情信息，很簡單不寫了。
彈出多個信息框
依然沒有找到相關api，只能使用其他方法來實現了。
先隨便寫一個有彈出框的頁面
然後觀察地圖渲染後的js源碼。
其中，藍色底色的部分即是信息框的代碼，並且可以得知arcgis是通過其中的left，top屬性來定位的。
現在需要做的就是，把自定義的彈窗代碼加入到map_root下，並動態的進行定位。前者可以通過jquery輕鬆實現，後者需要用到這個api—map.toScreen(new esri.geometry.Point(lng, lat)); 。這會把地理座標轉換爲瀏覽器座標。當拖動地圖時，也需要重新定位，會用到這幾個事件
//地圖邊緣改變
map.on('extent-change', function (e) {
});
//鼠標拖拽
map.on('mouse-drag', function (e) {
});
//鼠標滾輪
map.on('mouse-wheel', function (e) {
});
理論上來說mouse-drag應該能處理好拖拽時的變化，但是實際上顯示會出現bug，我後面的代碼裏沒有使用。這也導致了只有在鼠標拖拽完成之後，纔會重新對彈窗進行定位。
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.31/esri/css/esri.css">
<script src="https://js.arcgis.com/3.31/"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="custom_window_info_template" style="display: none;">
<div id="custom_position" class="esriPopup esriPopupVisible custom_" style="z-index: 40; left: 683px; top: 398px;">
<div class="esriPopupWrapper" style="position: absolute; left: 16px; top: -29px;">
<div class="sizer">
<div class="titlePane" style="user-select: none;">
<div class="spinner hidden" title="正在搜索..."></div>
<div id="custom_title" class="title">title 內容</div>
<div class="titleButton prev hidden" title="上一個要素"></div>
<div class="titleButton next hidden" title="下一個要素"></div>
<div class="titleButton maximize hidden" title="最大化"></div>
<div class="titleButton close hidden" title="關閉"></div>
</div>
</div>
<div class="sizer content">
<div id="custom_content" class="contentPane">html 格式內容</div>
</div>
<div class="sizer">
<div class="actionsPane">
<div class="actionList hidden">
<!--
<a title="縮放至" class="action zoomTo" href="javascript:void(0);"><span>縮放至</span></a>
-->
</div>
</div>
</div>
<div class="pointer"></div>
</div>
<div class="outerPointer left"></div>
</div>
</body>
<script>
require(["esri/map",
"esri/geometry/Point"
], function(Map,
Point) {
var map = new Map("map", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
map.on("load", function(featureSet) {
// var pt = new Point(-118, 34.5);
// map.infoWindow.setTitle("title");
// map.infoWindow.setContent(
// "html"
// );
// map.infoWindow.show(pt, map.getInfoWindowAnchor(pt));
jQuery("#map_root").append("<div id=\"mapInfo\"></div>");
var customWindowInfo = function(title, content, lng, lat){
jQuery("#custom_window_info_template #custom_position").attr("lng", lng);
jQuery("#custom_window_info_template #custom_position").attr("lat", lat);
jQuery("#custom_window_info_template #custom_title").html(title);
jQuery("#custom_window_info_template #custom_content").html(content);
var tempSc = map.toScreen(new esri.geometry.Point(lng, lat));
jQuery("#custom_window_info_template #custom_position").css("left", tempSc.x + "px");
jQuery("#custom_window_info_template #custom_position").css("top", tempSc.y + "px");
jQuery("#mapInfo").append(jQuery("#custom_window_info_template #custom_position").prop("outerHTML"));
};
customWindowInfo("title title", "content content", -118, 34.5);
customWindowInfo("title title", "content content222", -118, 34.8);
map.on('extent-change', function (e) {
reChangeCustomWindow();
});
map.on('mouse-drag', function (e) {
//reChangeCustomWindow();
});
map.on('mouse-wheel', function (e) {
reChangeCustomWindow();
});
reChangeCustomWindow = function(){
jQuery("#mapInfo").find(".custom_").each(function(i){
var obj = jQuery(this);
var lng = obj.attr("lng");
var lat = obj.attr("lat");
var tempLocation = map.toScreen(new esri.geometry.Point(lng, lat));
obj.css("left", tempLocation.x);
obj.css("top", tempLocation.y);
});
};
});
});
</script>
</html>