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">
<!--<button id="booksbtn" style="width: 50px; height: 50px;" onclick="addBook()">
添加标签</button>-->
</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 ...
随机推荐
- do while(false)实用技巧
今天看项目源码的时候发现有些地方用了do{} while(false)的用法,查了下发现这样确实有些优点,mark下. 1.最重要的优点,用在略微复杂的宏定义中. #define AB1 a; b; ...
- 如何让linux定时任务crontab按秒执行
如何让linux定时任务crontab按秒执行? linux定时任务crontab最小执行时间单位为分钟如果想以秒为单位执行,应该如何设置呢?思路 正常情况是在crontab中直接定义要执行的任务,现 ...
- 【bzoj1798】维护序列
线段树维护两个标记. *0的操作在实质上没有任何影响. #include <cstdio> #include <cctype> #define rep(i,a,b) for ( ...
- Android DisplayMetrics类获取屏幕大小
DisplayMetrics public class DisplayMetrics extends Object java.lang.Object ↳ android.util.Disp ...
- Python--关于连接符+
连接符 + 连接符 + 实则是创建了新的对象并占用新的内存(dict.set不能使用) String 由于Python必须为每一个使用连接符+的字符串分配新的内存,并产生新的字符串.下面两种方式会更有 ...
- java并发编程-Executor框架
Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService,Completion ...
- const char * char * const
2 区分 const * 与 * const 的差别 ( 1 ) 指针本身是常量不可变 ( char * ) const pCount; const (char *) pCount; ( 2 ) ...
- C# 跨线程调用控件
在C# 的应用程序开发中, 我们经常要把UI线程和工作线程分开,防止界面停止响应. 同时我们又需要在工作线程中更新UI界面上的控件, 下面介绍几种常用的方法 阅读目录 线程间操作无效 第一种办法:禁 ...
- jQuery对input select操作小结
//遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] ...
- ionic 安装遇到的问题以及解决方案
公司里要用到 Ionic 做移动App 混合开发 一个环境搭建折腾了好几天.一是公司权限问题,二是网络问题,你懂得. Ionic 环境搭建官网有教程.本来几行命令就能搞定的事,一旦遇到网络问题,就蛋疼 ...