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

随机推荐

关于Dagger 2 的使用方式
什么是Dagger2 Dagger是为Android和Java平台提供的一个完全静态的,在编译时进行依赖注入的框架,原来是由Square公司维护,现在由Google维护. 我们知道Dagger是一个依 ...
nginx配置文件结构
nginx配置文件结构全局参数配置系统全局参数如:worker_processes 工作子进程数量.error_log 错误日志路径.pid 进程IDEvent一般是配置nginx工作模式及连 ...
最精简的django程序
一.程序框架 1.结构图
javascript数组常用方法汇总
1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔数组的各个元素.如果不指定分隔符,默认使 ...
基于讯为4412开发板的Android开发流程
讯为4412开发板使用三星2410芯片,基于arm9架构,由于自己电脑硬件的局限,只能跑Android4.0.3系统. 1.Uboot这个直接使用官方镜像烧写就可以了,一般情况不用去重复烧写. 略 ...
Linux编程之驱动
增加自己写的驱动程序:http://blog.chinaunix.net/uid-23065002-id-115739.html http://os.51cto.com/art/201108/2840 ...
Circular progress bar in Unity 3D
Circular progress bar in Unity 3D - UnityScripthttp://stackoverflow.com/questions/22662706/circular- ...
利用SVN进行任意文件对比
都知道SVN可以比较已经上传的文件的内容,看到两个文件有什么不同的地方. 但是有时候并不想上传想要比较的文件,能不能利用SVN这样一个功能去比较别的两个文件呢? 琢磨来琢磨去, 发现只要在资源管理器里 ...
BSD Apache GPL LGPL MIT
当Adobe.Microsoft.Sun等一系列巨头开始表现出对”开源”的青睐时,”开源”的时代即将到来! 最初来自:sinoprise.com/read.php?tid-662-page-e-fpa ...
并发编程 06—— CompletionService ：Executor 和 BlockingQueue
Java并发编程实践目录并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式并发编程 04—— 闭 ...

ArcGIS+API+for+JS测距

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

随机推荐

热门专题