ArcGIS+API+for+JS测距

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第一个地图应用</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v33_api/library/3.3/jsapi/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v33_api/library/3.3/jsapi/js/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost/arcgis_js_v33_api/library/3.3/jsapi/init.js"></script>
<script src="dojo/jsapi_vsdoc10_v33.js" type="text/javascript"></script>
<script type="text/javascript" src="script/ajax.js"></script>
<style type="text/css">
#MyMapDiv
{
position: absolute;
width: 80%;
height: 90%;
border: 1px solid #000;
top: 0px;
left: 0px;
}
#bookmarks
{
position: absolute;
width: 20%;
height: 50%;
top: 20%;
left: 80%;
border: 1px;
background-color:rgba(000,250,250,0.1);

}
#OverViewDiv
{
position: absolute;
width: 20%;
height: 20%;
top: 0px;
left: 80%;
background-color: Red;
border: 1px;
}
#btn
{
position: absolute;
width: 20%;
height: 30%;
top: 70%;
left: 80%;
background-color:rgba(0,25,25,0.1);
border: 1px;
}
.btncl
{
text-align:center;
}
</style>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.dijit.Bookmarks");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dojo.date.locale");
dojo.require("dojo.number");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("esri.dijit.Measurement");
dojo.require("dijit.TitlePane");
dojo.require("dijit.form.CheckBox");
dojo.require("esri.SnappingManager");

//初始化并绘制几何对象
function Init() {
font = new esri.symbol.Font();
font.setSize("10pt");
font.setFamily("微软雅黑");
//wkid = 4326;
wkid = 3857
IsGraphicQuery = false;
var startExtent = new esri.geometry.Extent({ "xmin": -99404826.5442801,
"ymin": -57677327.4766502
, "xmax":102848773.290696, "ymax":48038123.0479141,
"spatialReference": { "wkid": wkid }
});
Map = new esri.Map("MyMapDiv", { extent: startExtent });
MapServer = "http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
var layer = new esri.layers.ArcGISTiledMapServiceLayer(MapServer);
//var layer = new esri.layers.ArcGISImageServiceLayer(MapServer);
Map.addLayer(layer);
GraphicDrawLayer = new esri.layers.GraphicsLayer(); //创建图层
Map.addLayer(GraphicDrawLayer);

//测量1
// function initToolbar(mymap) {
// var measurement = new esri.dijit.Measurement({
// map: mymap
// }, dojo.byId('bookmarks'));
// measurement.startup();
// }
// dojo.connect(Map, 'onLoad', function (Map) {
// initToolbar(Map);
// });
//测量2 ctrl捕捉
var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([195, 176, 23]), 2), null);

//需要捕捉的图层
var parcelsLayer = new esri.layers.FeatureLayer(MapServer+"/1", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
parcelsLayer.setRenderer(new esri.renderer.SimpleRenderer(sfs));
dojo.connect(Map, "onLoad", function (Map) {
//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac.
var snapManager = Map.enableSnapping({ snapKey: dojo.keys.copyKey });
var layerInfos = [{ layer: parcelsLayer}];
snapManager.setLayerInfos(layerInfos);
var measurement = new esri.dijit.Measurement({
map: Map
}, dojo.byId('bookmarks'));
measurement.startup();
});

//显示鹰眼
dojo.connect(Map, "onLoad", function (Map) {
var MapViewer = new esri.dijit.OverviewMap({
map: Map,
color: "#293955", //显示透明框的颜色参数
expandFactor: 2//显示透明框的大小参数
}, dojo.byId("OverViewDiv"));
MapViewer.startup();
});
//显示比例尺
dojo.connect(Map, 'onLoad', function (Map) {
var scalebars = new esri.dijit.Scalebar({ map: Map, scalebarUnit: "metric" }); // 指定比例尺单位,有效值是"english"(mi) or "metric"(km).默认"english"
});
//移动鼠标显示鼠标坐标
function showCoordinates(evt) {
var mp = evt.mapPoint;
var screenPt = Map.toScreen(mp);
var str = "<p style=\"display:block\">" + "屏幕坐标(x,y):" + "(" + screenPt.x +
"," + screenPt.y + ")" + "</p>";
dojo.byId("context").innerHTML = str + "地图坐标(x,y):" + "(" + mp.x + ", " +
mp.y + ")";
}
dojo.connect(Map, 'onMouseMove', showCoordinates);

ToolBar = new esri.toolbars.Draw(Map); //使用toolbar上的绘图工具
//点符号
PointSymbol = new esri.symbol.SimpleMarkerSymbol();
PointSymbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE;
PointSymbol.setSize(12);
PointSymbol.setColor(new dojo.Color("#FFFFCC"));
//线符号
PolyLineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new
dojo.Color([255, 0, 0]), 3);
//面符号
PolygonSymbol = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
new dojo.Color([255, 0, 0]), 1),
new dojo.Color([255, 255, 0, 0.25])
);
dojo.connect(Map, 'onLoad', function (Map) {
dojo.connect(ToolBar, "onDrawEnd", function (geometry) {
if (geometry.type == "polygon") {
ToolBar.deactivate();
var graphicPolygon = new esri.Graphic(geometry, PolygonSymbol);
Map.graphics.add(graphicPolygon);
}
if (geometry.type === "point") {
ToolBar.deactivate();
var graphicpoint = new esri.Graphic(geometry, PointSymbol);
Map.graphics.add(graphicpoint); //用默认的图层添加
}
if (geometry.type === "polyline") {
ToolBar.deactivate();
var graphicpolyline = new esri.Graphic(geometry, PolyLineSymbol);
Map.graphics.add(graphicpolyline);
GraphicDrawLayer.add(graphicpolyline); //使用自己创建的图层添加
}
});
dojo.connect(dijit.byId('MyMapDiv'), 'resize', MapResize);
});
}

//绘图
//以上注释都了
function DrawPolygonGraphic() {
ToolBar.activate(esri.toolbars.Draw.POLYGON);
}
function DrawPolylineGraphic() {
ToolBar.activate(esri.toolbars.Draw.POLYLINE);
}
function DrawPointGraphic() {
ToolBar.activate(esri.toolbars.Draw.POINT);
}
// 绘制结束
dojo.ready(Init);
</script>
</head>
<body class="tundra">
<div id="view" style="position: absolute; width: 100%; height: 100%;">
<div id="MyMapDiv">
</div>
<div id="OverViewDiv">
</div>
<div id="measurementDiv"></div>
<div id="bookmarks">

</div>
<div id="btn">
<button class="btncl" onclick="DrawPointGraphic()">创建点</button>
<button class="btncl" onclick="DrawPolylineGraphic()">创建线</button>
<button class="btncl" onclick="DrawPolygonGraphic()">创建面</button>
</div>
<div id="context" style="height:50px; position: absolute; top: 88%; width: 100%;">
</div>
</div>
</body>
</html>

ArcGIS+API+for+JS测距的更多相关文章

arcgis api for js入门开发系列四地图查询(含源代码)
备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的上一篇实现了demo的地图工具栏,本篇新增地图查询功能, ...
arcgis api for js入门开发系列一arcgis api离线部署
在我的GIS之家QQ群里,很多都是arcgis api for js开发的新手,他们一般都是GIS专业的学生,或者从计算机专业刚刚转向来的giser,他们难免会遇到各种webgis开发的简单问题,由于 ...
arcgis api for js入门开发系列十一地图统计图
上一篇实现了demo的叠加SHP图层,本篇新增地图统计图,截图如下: 地图统计图实现的思路如下:利用拓展arcgis api的js文件(MapChartGraphic.js以及MapChartGrap ...
arcgis api for js入门开发系列二十打印地图的那些事
前面我写过关于利用arcgis api for js打印地图的,但是打印地图服务都是基于arcgis server发布的,arcgis api加载在线地图,比如天地图.百度地图.高德地图等,底图都是打 ...
转：arcgis api for js入门开发系列四地图查询
原文地址:arcgis api for js入门开发系列四地图查询 arcgis for js的地图查询方式,一般来说,总共有三种查询方式:FindTask.IdentifyTask.QueryTas ...
Arcgis API for JS——打印控件乱码
在通过Arcgis API for JS编写打印控件进行地图下载时,总发现地图字体乱码,如下图: 解决方法: 在装有ArcGIS Server,要调用服务的电脑或服务器上找到下图文件夹
ArcGIS API for js Legend（图例）
1.说明有关怎么把ArcGIS API for js部署到IIS上,请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html 2.运行效果 ...
arcgis api for js 地图查询
arcgis api for js入门开发系列四地图查询(含源代码) 上一篇实现了demo的地图工具栏,本篇新增地图查询功能,包括属性查询和空间查询两大块,截图如下: 属性查询效果图: 空间查询效 ...
arcgis api for js 4.X 出现跨域问题
arcgis api for js 4.X 出现跨域问题 XMLHttpRequest cannot load http://localhost/4.3/4.3/esri/workers/mutabl ...

随机推荐

Ubuntu安装Vim编辑器
1 安装Vim编辑器由于Ubuntu预安装的是tiny版本,就会导致我们在使用上的产生不便. 所以我们要安装vim的full版本. 1.1 卸载旧版vi sudo apt-get remove vi ...
(六)ICMP、ping
ping命令是ICMP协议 127.0.0.1 ifconfig -all
android开发文档工具集（持续更新中...）
http://www.androiddevtools.cn/ android 产品->交互->视觉->开发->测试各种工具地址下载, 各种文档下载应有尽有,强烈推荐. ht ...
Python相对、绝对导入浅析
这篇文章从另外一个不同的视角来分析一下Python的import机制,主要的目的是为了搞懂import中absolute.relative import遇到的几个报错. 这里不同的视角是指从Pytho ...
并发编程 17—— Lock
Java并发编程实践目录并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式并发编程 04—— 闭 ...
oracle with as
http://blog.csdn.net/a9529lty/article/details/4923957/
iOS开发网络篇—文件的上传
iOS开发网络篇—文件的上传说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代 ...
stopPropagation, preventDefault 和 return false
e.stopPropagation()此方法用于阻止事件冒泡或者事件捕获.IE8及以下中没有此方法,使用e.cancelBubble=false 来阻止事件冒泡. 当标准W3C中,事件包括捕获阶段和冒 ...
sql2008 无法附加数据库
sql2008 因为数据库正在使用,所以无法获得对数据库的独占访问权---还原或删除数据库的解决方法数据库还原出现 3154错误 --主备份 --RESTORE DATABASE [NET_CN] ...
Echarts源码总括
Echarts采用MVC模型,典型的以数据驱动视图的逻辑. 所有的用于绘图的元素存放于Echarts::Zrender::storage中,所有的动画对象存放于Echarts::Zrender::an ...

ArcGIS+API+for+JS测距

ArcGIS+API+for+JS测距的更多相关文章

随机推荐

热门专题