arcgis js 3.x 自定义infowindow

1.引言：

在gis开发中，我们常常能用到弹出窗口，比如我们在地图上点击某个点要素是，弹出一个窗口，显示它相关的属性信息，很显然，这实际是通过infotemplate配置的。但是在实际中，我遇到的是通过该窗口填入相关属性信息，并且需要将属性信息保存到数据库里与该点几何相对应的记录上。

2.思路：

1)通过html创建弹出窗口；

2）重写infowindow的样式；

3）对infowindow设置标题、内容和显示位置；

 

3.代码：

1）自定义的弹出窗口的div(注意：infowindow的setcontent实际是相当于一个infowindow的父节点appendchild了自定义div的节点

<div id=\"add_name\"><label>名称</label><input id=\"input_name\"placeholder=\"我的标记\"></div>" +

" <div id=\"add_bz\"><label >备注</label><textarea id=\"input_bz\" rows=\"3\" cols=\"26\" placeholder=\"我的备注\"></textarea></div>" +

"<div id=\"add_btn\">\n" +

" <button id=\"add_save_btn\">保存</button>\n" +

" <button id=\"add_del_btn\">删除</button>\n" +

" </div>

2)重新infowindow的样式

/*弹出框*/

.esriPopup .esriPopupWrapper {

box-shadow: 0 0 0.75em #777777;

-webkit-box-shadow: 0 0 0.75em #777777;

border-radius: 5px;

-webkit-border-radius: 5px;

overflow: hidden;

}

 

.esriPopup .contentPane {

position: relative;

max-height: 300px;

overflow: auto;

padding: 10px 6px 6px 10px;

background-color: #F7F7F7;

color: #333333;

width: 270px;

height: 170px;

overflow: hidden;

}

.esriPopup .sizer {

position: relative;

width: 270px;

z-index: 1;

background-color: white;

}

.esriPopup .titlePane {

color:blue;

background-color: white;

line-height: 20px;

padding-left: 6px;

border-radius: 5px 5px 0px 0px;

-webkit-border-radius: 5px 5px 0px 0px;

cursor: default;

}

3）对infowindow设置标题、内容和显示位置；

map.infoWindow.setTitle("添加标注");

map.infoWindow.setContent(" <div id=\"add_name\"><label>名称</label><input id=\"input_name\"placeholder=\"我的标记\"></div>" +

" <div id=\"add_bz\"><label >备注</label><textarea id=\"input_bz\" rows=\"3\" cols=\"26\" placeholder=\"我的备注\"></textarea></div>" +

"<div id=\"add_btn\">\n" +

" <button id=\"add_save_btn\">保存</button>\n" +

" <button id=\"add_del_btn\">删除</button>\n" +

" </div>");

//添加点线面并保存到数据库

d.on("draw-end", function (evt) {

map.infoWindow.show(evt.geometry)

//点击弹出框保存按钮

document.getElementById("add_save_btn").onclick = function () {

map.infoWindow.hide();

4.最终效果：