arcgis for js 实现点、线、面、手动线、手动面缓冲区分析功能
2018-01-05 13:53
441 查看
1.案例中使用的地图服务都可以在arcgis server manager中创建地图服务器切片地址和buffer服务地址；
实现全部代码如下；
2.可以自定义动态选择缓冲区距离长度，缓冲区投影坐标系，缓冲区距离单位等；
3.先实现过程中在缓冲区坐标系中遇到些问题（Buffer Spatial Reference WKID），在下一篇中重点介绍下；
代码如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义缓冲区图形</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8087/arcgis_js_api/library/3.22/3.22/esri/css/esri.css" />
<script src="http://localhost:8087/arcgis_js_api/library/3.22/3.22/init.js"></script>
<script src="../js/jquery-1.3.1.js"></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;var draw;
var gsvc,_Draw;
var _GeometryService;
require([
"dojo/dom-construct",
"esri/Color",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/map",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/graphic",
"esri/geometry/Extent",
"esri/tasks/BufferParameters",
"esri/tasks/GeometryService","dojo/_base/array",
"esri/SpatialReference",
"dojo/domReady!"
], function(
domConstruct, Color,
ArcGISTiledMapServiceLayer, Map,SimpleFillSymbol,SimpleLineSymbol,
Draw,SimpleMarkerSymbol,Graphic,Extent,BufferParameters,GeometryService,array,SpatialReference
) {
map;
_Draw=Draw;
_GeometryService=GeometryService;
map = new Map("map", {
extent: new Extent({
"xmin":126.08797131337525,"ymin":41.88483304829672,"xmax":130.05572254059723,"ymax":47.20292839632739,
"spatialReference":{"wkid":4326}})
});
var oilAndGasLayer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/itms/MapServer");
map.addLayer(oilAndGasLayer);
gsvc=GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
console.log(GeometryService.UNIT_STATUTE_MILE);
map.on("load",function(){
draw=new Draw(map);
draw.on("draw-complete",doBuffer);
});
function doBuffer(result){
debugger;
switch (result.geometry.type) {
case "point":
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new
SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
break;
case "polyline":
var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
break;
case "polygon":
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new
SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
break;
}
var graphic = new Graphic(result.geometry,symbol);
map.graphics.add(graphic);
var params = new BufferParameters();
params.distances = [dojo.byId("distance").value];
params.bufferSpatialReference = new SpatialReference({wkid: dojo.byId("bufferSpatialReference").value});
params.outSpatialReference = map.spatialReference;
params.unit= eval("_GeometryService."+dojo.byId("unit").value);
params.geometries= [graphic.geometry ];
if (result.geometry.type === "polygon") {
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([0,0,255,0.65]), 2
),
new Color([0,0,255,0.35])
);
var graphic = new Graphic(result.geometry,symbol);
map.graphics.add(graphic);
gsvc.buffer(params, function(features) {
showBuffer(features);
});
} else {
gsvc.buffer(params, function(features) {
showBuffer(features);
});
}
}
function showBuffer(features) {
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.65]), 2
),
new Color([255, 0, 0, 0.35])
);
for (var j = 0, jl = features.length; j < jl; j++) {
map.graphics.add(new Graphic(features[j],symbol));
}
draw.deactivate();
map.showZoomSlider();
}
});
function point (){
draw.activate(_Draw.LINE);map.hideZoomSlider();
}
</script>
</head>
<body>
<button onclick="point()">Line</button>
<button onclick="draw.activate(_Draw.POLYLINE);map.hideZoomSlider();">Polyline</button>
<button onclick="draw.activate(_Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button>
<button onclick="draw.activate(_Draw.POLYGON);map.hideZoomSlider();">Polygon</button>
<button onclick="draw.activate(_Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button>
<div id="map" style="height:90%;border:1px solid #000;"></div>
Buffer Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="102100" />
Buffer Distance: <input type="text" id="distance" size="10" value="25" />
<select id="unit">
<option value="UNIT_STATUTE_MILE">Miles</option>
<option value="UNIT_FOOT">Feet</option>
<option value="UNIT_KILOMETER">Kilometers</option>
<option value="UNIT_METER">Meters</option>
<option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
<option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
</select>
<input type="button" value="Clear Graphics" onclick="map.graphics.clear();" />
</body>
</html>
实现全部代码如下；
2.可以自定义动态选择缓冲区距离长度，缓冲区投影坐标系，缓冲区距离单位等；
3.先实现过程中在缓冲区坐标系中遇到些问题（Buffer Spatial Reference WKID），在下一篇中重点介绍下；
代码如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义缓冲区图形</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8087/arcgis_js_api/library/3.22/3.22/esri/css/esri.css" />
<script src="http://localhost:8087/arcgis_js_api/library/3.22/3.22/init.js"></script>
<script src="../js/jquery-1.3.1.js"></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;var draw;
var gsvc,_Draw;
var _GeometryService;
require([
"dojo/dom-construct",
"esri/Color",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/map",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/graphic",
"esri/geometry/Extent",
"esri/tasks/BufferParameters",
"esri/tasks/GeometryService","dojo/_base/array",
"esri/SpatialReference",
"dojo/domReady!"
], function(
domConstruct, Color,
ArcGISTiledMapServiceLayer, Map,SimpleFillSymbol,SimpleLineSymbol,
Draw,SimpleMarkerSymbol,Graphic,Extent,BufferParameters,GeometryService,array,SpatialReference
) {
map;
_Draw=Draw;
_GeometryService=GeometryService;
map = new Map("map", {
extent: new Extent({
"xmin":126.08797131337525,"ymin":41.88483304829672,"xmax":130.05572254059723,"ymax":47.20292839632739,
"spatialReference":{"wkid":4326}})
});
var oilAndGasLayer = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/itms/MapServer");
map.addLayer(oilAndGasLayer);
gsvc=GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
console.log(GeometryService.UNIT_STATUTE_MILE);
map.on("load",function(){
draw=new Draw(map);
draw.on("draw-complete",doBuffer);
});
function doBuffer(result){
debugger;
switch (result.geometry.type) {
case "point":
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new
SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
break;
case "polyline":
var symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
break;
case "polygon":
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new
SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
break;
}
var graphic = new Graphic(result.geometry,symbol);
map.graphics.add(graphic);
var params = new BufferParameters();
params.distances = [dojo.byId("distance").value];
params.bufferSpatialReference = new SpatialReference({wkid: dojo.byId("bufferSpatialReference").value});
params.outSpatialReference = map.spatialReference;
params.unit= eval("_GeometryService."+dojo.byId("unit").value);
params.geometries= [graphic.geometry ];
if (result.geometry.type === "polygon") {
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([0,0,255,0.65]), 2
),
new Color([0,0,255,0.35])
);
var graphic = new Graphic(result.geometry,symbol);
map.graphics.add(graphic);
gsvc.buffer(params, function(features) {
showBuffer(features);
});
} else {
gsvc.buffer(params, function(features) {
showBuffer(features);
});
}
}
function showBuffer(features) {
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.65]), 2
),
new Color([255, 0, 0, 0.35])
);
for (var j = 0, jl = features.length; j < jl; j++) {
map.graphics.add(new Graphic(features[j],symbol));
}
draw.deactivate();
map.showZoomSlider();
}
});
function point (){
draw.activate(_Draw.LINE);map.hideZoomSlider();
}
</script>
</head>
<body>
<button onclick="point()">Line</button>
<button onclick="draw.activate(_Draw.POLYLINE);map.hideZoomSlider();">Polyline</button>
<button onclick="draw.activate(_Draw.FREEHAND_POLYLINE);map.hideZoomSlider();">Freehand Polyline</button>
<button onclick="draw.activate(_Draw.POLYGON);map.hideZoomSlider();">Polygon</button>
<button onclick="draw.activate(_Draw.FREEHAND_POLYGON);map.hideZoomSlider();">Freehand Polygon</button>
<div id="map" style="height:90%;border:1px solid #000;"></div>
Buffer Spatial Reference WKID: <input type="text" id="bufferSpatialReference" size="5" value="102100" />
Buffer Distance: <input type="text" id="distance" size="10" value="25" />
<select id="unit">
<option value="UNIT_STATUTE_MILE">Miles</option>
<option value="UNIT_FOOT">Feet</option>
<option value="UNIT_KILOMETER">Kilometers</option>
<option value="UNIT_METER">Meters</option>
<option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
<option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
</select>
<input type="button" value="Clear Graphics" onclick="map.graphics.clear();" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- arcgis api for js之echarts开源js库实现地图统计图分析
- Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)
- Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)
- ArcGis for JS 利用QueryTask查询实现对地图的定位功能
- Arcgis for JS之Cluster聚类分析的实现
- (转）Arcgis for JS之Cluster聚类分析的实现
- Arcgis for js之GP实现缓冲区计算
- arcgis for js路网分析功能实现
- Arcgis for js之GP实现缓冲区计算
- arcgis for js实现缓冲区分析功能
- Arcgis for JS之Cluster聚类分析的实现
- Arcgis for JS之Cluster聚类分析的实现
- arcgis for js在缓冲区分析中关于 bufferSpatialReference的设置不正确不能执行或者执行错误问题；
- Arcgis for js之GP实现缓冲区计算
- Arcgis for JS之Cluster聚类分析的实现
- arcgis api for js之echarts开源js库实现地图统计图分析
- Arcgis for JS之Cluster聚类分析的实现(基于区域范围的)
- ArcGIS.Server.9.3和ArcGIS API for JavaScript实现基本的地图功能
- ArcGIS API for Silverlight 使用GP服务实现要素裁剪功能
- 【转】ArCGIS API for Silverlight 实现闪烁标注功能