arcgis api for javascript学习-画图形并标注信息
文章目录
- 前言
- 一、画Graphic
- 二、给画的graphic绑定信息
-
- 1.初始化infowindow
- 2.显示infowindow
- 3.保存infocontent
- 4.完整代码：
- 总结
前言
最近在博客中看见一个小demo，在实现draw的时候，添加了一个infowindow，可以在里面保存graphic的信息。
一、画Graphic
画graphic和前面这篇文章是一样的，请看这篇文章：arcgis api forJavaScript学习-Draw和graphic
二、给画的graphic绑定信息
1.初始化infowindow
//aa.attributes
function getQueryWinContent(attr) {
let content = "请输入保存内容";
if (attr) {
//第一次是false，当保存之后，回来查询就有值了
content = attr["info_content"];
console.log("content-->",content);
}
var html = "";
html = "" +
"" +
"";
html += "" +
" ";
html += "
" +
"";
html += "";
html += "";
return html;
}
2.显示infowindow
function showQueryGraphicWin(graphic) {
var pt = graphic.geometry;
map.infoWindow.resize(320, 650);
map.infoWindow.setTitle("我是标注");
map.infoWindow.setContent(graphic.attributes.content);//前面那串html
setTimeout(function () {
map.infoWindow.show(pt);
}, 100);
}
3.保存infocontent
//注意这个函数一定要放在require外面，如果放在里面，会报错，save未定义，这是因为这个函数如果放在里面，当页面加载出来的HTML元素时，save被封在了require里面，外面就访问不到。因此要把baseGraphic定义成全局变量。
function save() {
var info_content = document.getElementById("info_content").value;
baseGraphic.attributes["info_content"] = info_content;//将infowindow新的内容替换掉
alert("保存成功" + info_content);
}
4.完整代码：
<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>地图标注title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
#info {
top: 20px;
color: #444;
height: auto;
font-family: arial;
right: 20px;
margin: 5px;
padding: 10px;
position: absolute;
width: 115px;
z-index: 40;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
.titlePane {
padding: 0px;
}
button {
display: block;
}
style>
<script src="https://js.arcgis.com/3.15/">script>
<script>
var map, tb;
var baseGraphic;
require([
"esri/map", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function (
Map, Draw,
SimpleMarkerSymbol, SimpleLineSymbol,
PictureFillSymbol, CartographicLineSymbol,
Graphic,
Color, dom, on
) {
map = new Map("mapDiv", {
center: [114.309, 30.578],
zoom: 12
});
map.on("load", initToolbar);
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer");
map.addLayer(myTiledMapServiceLayer); //添加到地图中
// 点
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));
// console.log(map);
// console.log(map.graphics);
function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);
//绘制点事件
document.getElementById("Point").onclick = function (evt) {
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
}
//清除事件
document.getElementById("clear").onclick = function (evt) {
map.graphics.clear();
}
}
function addGraphic(evt) {
//deactivate the toolbar and clear existing graphics
tb.deactivate();
map.enableMapNavigation();
// figure out which symbol to use
var symbol;
if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = markerSymbol;
}
console.log("evt.attr-->",evt.attributes);//undefined
var aa = new esri.Graphic(evt.geometry, symbol, evt.attributes);
console.log("aa.attr-->",aa.attributes);//undefined
if (aa.attributes) {
//(undefined)false
aa.attributes = {
"info_content": evt.attributes["info_content"]};
}
var htmlstr = getQueryWinContent(aa.attributes);
//初始化属性
var attr = {
"content": htmlstr, "info_content": "我是保存的内容"};
baseGraphic = new esri.Graphic(evt.geometry, symbol, attr);
map.graphics.add(baseGraphic);//添加了graphic
console.log("baseGraphic-->",baseGraphic);
setTimeout(function () {
showQueryGraphicWin(baseGraphic);
}, 100);
//点击地图上的graphic，显示infowindow
//这个事件不能放在外面，报错map.graphics is null
map.graphics.on("click", function (event) {
console.log("graphics.click-->",event);
var htmlstr = getQueryWinContent(event.graphic.attributes);
event.graphic.attributes["content"]=htmlstr;
showQueryGraphicWin(event.graphic);
});
}
function showQueryGraphicWin(graphic) {
var pt = graphic.geometry;
//map.centerAt(pt);
map.infoWindow.resize(320, 650);
map.infoWindow.setTitle("我是标注");
map.infoWindow.setContent(graphic.attributes.content);//getQueryWinContent函数前面那串html
setTimeout(function () {
map.infoWindow.show(pt);
}, 100);
}
//aa.attributes
function getQueryWinContent(attr) {
let content = "请输入保存内容";
if (attr) {
//第一次是false，当保存之后，回来查询就有值了
content = attr["info_content"];
console.log("content-->",content);
}
var html = "";
html = "" +
"" +
"";
html += "" +
" ";
html += "
" +
"";
html += "";
html += "";
return html;
}
});
//注意这个函数一定要放在require外面，如果放在里面，会报错，save未定义，这是因为这个函数如果放在里面，当页面加载出来的HTML元素时，save被封在了require里面，外面就访问不到。因此要把baseGraphic定义成全局变量。
function save() {
var info_content = document.getElementById("info_content").value;
baseGraphic.attributes["info_content"] = info_content;//将infowindow新的内容替换掉
alert("保存成功" + info_content);
}
script>
head>
<body>
<div id="info">
<button id="Point">Pointbutton>
<button id="clear">清除button>
div>
<div id="mapDiv">div>
body>
html>
总结
完整思路：
- 添加graphic
- 添加infowindow
- 当修改了infowindow中的info_content内容时，更新graphic的attributes中的info_content
- 点击添加过的graphic，获取新的content，重新重构页面并显示。
注意小细节（代码中的变量的作用域很关键，自己操作很有可能写的代码会访问不到变量）。
参考：https://blog.csdn.net/qq_29808089/article/details/108457456