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 ...

随机推荐

eventloop & actor模式 & Java线程模型演进 & Netty线程模型总结
eventloop的基本概念可以参考:http://www.ruanyifeng.com/blog/2013/10/event_loop.html Eventloop指的是独立于主线程的一条线程,专门 ...
SaltStack实战
SaltStack实战 #安装安装注意几点 python-libs-2.6.6-64.el6.x86_64 conflicts with file from package python-2.6.6 ...
kafka原理存储
http://www.open-open.com/lib/view/open1421150566328.html
java实现httpclient2
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...
Authentication和Authorization的区别
搞不太清楚Authentication和Authorization的区别,在网上搜了一下,lucky16的一篇文章讲的通俗,看了就懂,记录下来: 你要登机,你需要出示你的身份证和机票,身份证是为了证明 ...
linux 真·随笔
复制操作命令行模式下输入 6,9 co 12 复制第6行到第9行之间的内容到第12行后面. vim如何删除文件中所有东西 ggdG :%d 移动光标到指定行的行尾 $:移动光标到行尾 n$:移动到第 ...
vs2012中VC连接mysql
在MySQL的安装目录下你会找到include和lib文件夹(完全安装模式下),里面分别是C接口的头文件和库文件,库文件只用libmysql.lib就好了,即把libmysql.lib拷贝到了VC++ ...
c# string.format json字符串 formatException错误
正常字符串的string.format是没问题的但是在拼接json的字符串的时候因为里面包含了 {} 花括号里面又嵌套了 {0} {1} {2}这些要替换的关键字所以会报错. 经过百度. 字符串 ...
a标签中的点击事件
我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...
Cognition math based on Factor Space (2016.05)
Cognition math based on Factor Space Wang P Z1, Ouyang H2, Zhong Y X3, He H C4 1Intelligence Enginee ...

ArcGIS+API+for+JS测距

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

随机推荐

热门专题