Arcgis api for js实现服务端地图的增删改查
< !DOCTYPE html >
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head >
meta http - equiv = "Content-Type"content = "text/html; charset=utf-8" / >
<title > WebGIS < /title>
<link rel="stylesheet" type="text/css " href="https: //js.arcgis.com/3.21/dijit/themes/tundra/tundra.css"/>
< link rel = "stylesheet"type = "text/css"href = "https://js.arcgis.com/3.21/esri/css/esri.css" / >
<script type = "text/Javascript"src = "https://js.arcgis.com/3.21/init.js" > </script>
<style type="text/css ">
.MapClass{
width:100%;
height:500px;
border:1px solid #000;
}
</style>
<script type="text / javascript ">
require(["esri / map ",
"dojo / on ",
"dojo / query ",
"esri / layers / ArcGISDynamicMapServiceLayer ",
"esri / toolbars / draw ",
"esri / layers / FeatureLayer ",
"esri / graphic ", "esri / dijit / editing / Add ",
"esri / dijit / editing / Delete ","esri / dijit / editing / Update ","esri / tasks / query ","dojo / json ","dojo / domReady ! "],
function (Map,on,query, ArcGISDynamicMapServiceLayer, Draw,FeatureLayer,Graphic,Add,Delete,Update,Query,jsonUtil) {
var map = new esri.Map("MyMapDiv ");
var layer = new ArcGISDynamicMapServiceLayer("http: //localhoust:6080/arcgis/rest/services/2000/MapServer");
map.addLayer(layer);
//用于操作的要素图层
var featureLayer = new FeatureLayer("http://localhoust:6080/arcgis/rest/services/2000/FeatureServer/13",
{
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
//在添加要素时，利用Draw工具获得geometry对象
var d = new Draw(map, {
showTooltips: true
});
//要操作的graphic
var g;
query("button").on("click",
function(event) {
var value = this.innerHTML;
switch (value) {
case "添加要素":
d.activate(Draw.POLYGON);
break;
case "删除要素":
//创建Graphic对象，删除OBJECTID为34的元素，
//因为OBJECTID是主键，所以只需要指定主键即可
g = new Graphic("", "", {
"OBJECTID": 34
});
//创建删除对象
var de = new Delete({
"featureLayer": featureLayer,
"deletedGraphics": [g]
});
//执行删除结果
de.performRedo();
//刷新图层
layer.refresh();
break;
case "修改要素":
//用于修改要素的函数,查询更新为36的要素
updateFeature(223614);
break;
case "查询要素":
//用于查询要素的函数，查询主键为36的要素
searchFeather(1);
break;
}
});
//当画图完毕时，添加要素
on(d, "draw-complete",
function(result) {
//要素只赋予了geometry，属性信息为空
var graphic = new Graphic(result.geometry, null, {});
graphic.attributes.add("");
var add = new Add({
"featureLayer": featureLayer,
//给哪一个要素图层添加要素
"addedGraphics": [graphic] //用于添加的要素
})
//执行添加函数
add.performRedo();
//刷新视图
layer.refresh();
//关闭绘图对象
d.deactivate();
});
//根据id修改要素
function updateFeature(id) {
//注意:（第二个参数）这里传入一个回调函数，用于处理查询出来的数据
searchFeather(id,
function(result) {
//获得旧的要素
var oldgraphic = result[0];
//新的要素
var newgraphic = new Graphic(oldgraphic.toJson());
//此处可以Draw重新画图
//var newgraphic=new Graphic(newGeometry,null,newAttributes);
var newAttributes = newgraphic.attributes;
newAttributes.MAINPERSON = "Wxz"newgraphic.attributes = newAttributes;
//创建更新对象
var update = new Update({
"featureLayer": featureLayer,
"postUpdatedGraphics": [newgraphic],
//修改之后的要素
"preUpdatedGraphics": [oldgraphic] //修改之前的要素
})
//执行刷新操作
update.performRedo();
//刷新视图
layer.refresh();
alert("修改成功");
})
}
//根据id查询要素
function searchFeather(id, callback) {
//得到要素图层的主键属性
var idProperty = featureLayer.objectIdField;
//定义查询参数
var query = new Query();
//是否返回几何形状
query.returnGeometry = false;
//图层的主键名称（根据自己要求修改）
query.objectIds = [id];
//查询条件1=1意思是：只根据主键查询，忽略where子句
query.where = "1=1";
//进行查询
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW,
function(result) {
//如果callback不存在，说明仅仅是查询操作
if (!callback) {
//因为我们根据主键查询，一定只有一个元素
var graphic = result[0];
//获得属性
var attributes = graphic.attributes;
//得到该属性信息转换成字符串
var result = jsonUtil.stringify(attributes)
//将结果弹出一下
alert(result);
} else //如果callback存在，说明是更新操作
{
callback(result);
}
});
}
});
< /script>
</head > <body > <div id = "MyMapDiv"class = "MapClass" > </div>
<button class="btn">添加要素</button > <button class = "btn" > 删除要素 < /button>
<button class="btn">修改要素</button > <button class = "btn" > 查询要素 < /button>
</body > </html>
Arcgis api for js实现服务端地图的增删改查的更多相关文章
- springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装
springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（二）
前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...
- WCFRESTFul服务搭建及实现增删改查
WCFRESTFul服务搭建及实现增删改查 RESTful Wcf是一种基于Http协议的服务架构风格, RESTful 的服务通常是架构层面上的考虑. 因为它天生就具有很好的跨平台跨语言的集成能力 ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
随机推荐
- Python里的黄金库，学会了你的工资至少翻一倍
作者:[已重置]链接:https://zhuanlan.zhihu.com/p/26054228来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 阅读本文大概需要5分钟 ...
- Windows程序设计(1)
1. Windows程序设计基础 1.1 代码风格 #include "stdafx.h" #include <windows.h> void Alert(int i) ...
- 自由切换 网页上的 ico 图标
自由切换 网页上的 ico 图标: 第一步: 进入这个网站 :https://www.uupoop.com/ico/?action=make 第二步: 进入网站后,然后选择 ...
- JavaWeb的登陆与注销功能
JavaWeb 登录与注销 大致流程 一般我们在Web应用中 登录页面一般是以 login.jsp的首页 大致流程如下: 当我们在前台写入用户名和密码之后,点击登录按钮 会将表单提交给一个LoginS ...
- Win10搭建VM12.0.1虚拟机，虚拟机网络同宿主机ping不通的解决办法
准备系统学习Linux系统,在电脑搭建了一个CentOS虚拟机,希望能从宿主机连接至虚拟机. 尝试了很多办法,碰到各种坑,最后这个方法成功了! 分享给大家,希望有所帮助. 一.环境 1.宿主机:Win ...
- Kali中密码暴力破解工具hydra的使用
前言 hydra是著名黑客组织thc的一款开源的暴力破解密码工具,功能非常强大,kali下是默认安装的,几乎支持所有协议的在线破解.密码能否破解,在于字典是否强大.本文仅从安全角度去讲解工具的使用,请 ...
- elasticsearch 之 深入探秘type底层数据结构
1.理论知识 type,是一个index中用来区分类似的数据的,类似的数据,但是可能有不同的fields,而且有不同的属性来控制索引建立.分词器.field的value,在底层的lucene中建立索引 ...
- Java 多线程基础（十二）生产者与消费者
Java 多线程基础(十二)生产者与消费者 一.生产者与消费者模型 生产者与消费者问题是个非常典型的多线程问题,涉及到的对象包括“生产者”.“消费者”.“仓库”和“产品”.他们之间的关系如下: ①.生 ...
- 文档翻译经验分享（Markdown）
该教程基于VSCode 加一些插件 youdao translate https://marketplace.visualstudio.com/items?itemName=Yao-Translate ...
- 什么才是市场急需的前端工程师？要价1.8W，HR不敢还嘴！
据统计,国外的前端开发人员和后端开发人员比例约1:1,但是在国内比例却在1:3以下, Web前端开发职位人才缺口巨大.前端工程师的发展之路十分有“钱”景. 每天,HR 群都有人在吐槽招不到前端工程师. ...