很早以前自己根据工作中的情况封装了一套gisApi，里面实现了gis的基本功能，直接调用方法就可以使用。
//document.write("<script src="http://localhost:8080/agsupport/resources/components/arcgis_js_api/init.js"></script>");
require(["esri/toolbars/navigation","esri/geometry/webMercatorUtils","dojo/dom", "dojo/_base/array", "dojo/date/locale", "dojo/parser", "dijit/registry", "dojo/_base/Color", "dojo/number", "dojo/dom-style", "dojo/on",
"esri/layers/WMTSLayerInfo", "esri/renderers/ClassBreaksRenderer", "esri/layers/WMTSLayer","esri/symbols/Font","esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer","esri/map", "esri/layers/FeatureLayer","esri/layers/GraphicsLayer", "esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol","esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang","esri/dijit/Geocoder", "esri/toolbars/draw", "esri/tasks/geometry","esri/urlUtils","esri/geometry/webMercatorUtils",
"esri/config","esri/dijit/OverviewMap",'esri/layers/WMSLayer', 'esri/layers/WMSLayerInfo', 'esri/geometry/Extent',
"dijit/layout/ContentPane","dijit/layout/BorderContainer" ,"dijit/TooltipDialog", "dijit/popup","dojo/domReady!",
"esri/dijit/TimeSlider", "esri/layers/TimeInfo", "esri/TimeExtent","esri/tasks/ProjectParameters","esri/tasks/Geoprocessor","esri/toolbars/edit","esri/symbols/Font",
"esri/symbols/TextSymbol"
], function(
navigation,webMercatorUtils,dom, array, locale, parser, registry, Color, number, domStyle, on,
WMTSLayerInfo,ClassBreaksRenderer,WMTSLayer,Font,ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer,
Map, FeatureLayer,GraphicsLayer, SimpleFillSymbol, SimpleLineSymbol, SimpleRenderer,Graphic, esriLang,Geocoder,draw,geometry,urlUtils,webMercatorUtils
,edit,font,textSymbol
) {
});
var gis = {
gisMap : null,
navigation : null,
draw : null,
edit : null,
mlLength : 0,
methodUrl : "http://localhost:8080/agsupport/resources/images/marker/symbol_bg.png",//计算长度面积显示图标url
init : {
//初始化地圖opts = {logo:false,center:[x,y],zoom:2}
initMap:function(divId,opts){
gis.gisMap = new esri.Map(divId,{
logo : opts.logo,
attributionWidth : 1,
autoWidth : false,
center : opts.center,
zoom : opts.zoom
});
gis.init.initDefaultSymbol();
return gis.gisMap;
},
//初始化绘图图标
initDefaultSymbol : function(){
gis.defaultLineSymbol = new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new esri.Color("#FFA500"), 2);
gis.defaultMarkerSymbol = new esri.symbol.SimpleMarkerSymbol(
esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 8,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID, "red", 2),
new esri.Color("#f6f5ec"));
gis.clearSymbol = new esri.symbol.SimpleMarkerSymbol(
esri.symbol.SimpleMarkerSymbol.STYLE_X, 10,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID, "red", 2),
new esri.Color("#f6f5ec"));
},
//初始化工具事件
initTools : function(){
gis.navigation = new esri.toolbars.Navigation(gis.gisMap);
gis.draw = new esri.toolbars.Draw(gis.gisMap);
gis.edit = new esri.toolbars.Edit(gis.gisMap);
gis.toolLowGraphicsLayer = new esri.layers.GraphicsLayer();
gis.gisMap.addLayer(gis.toolLowGraphicsLayer, 9999);
gis.toolHighGraphicsLayer = new esri.layers.GraphicsLayer();
gis.gisMap.addLayer(gis.toolHighGraphicsLayer, 10000);
gis.textGraphicsLayer = new esri.layers.GraphicsLayer(); //文字显示图层
gis.gisMap.addLayer(gis.textGraphicsLayer, 10001);
gis.moveTextGraphicsLayer = new esri.layers.GraphicsLayer(); //测量时鼠标移动须清除的图层
gis.gisMap.addLayer(gis.moveTextGraphicsLayer, 10002);
}
},
layer :{
//初始化切片服务
initTiledLayer : function(url,layerId){
return new esri.layers.ArcGISTiledMapServiceLayer (url,{id:layerId});
},
//初始化动态地图服务
initDynamicLayer : function(url,layerId){
return new esri.layers.ArcGISDynamicMapServiceLayer(url,{id:layerId});
},
//初始化栅格服务
initImageLayer : function(url,layerId){
return new esri.layers.ArcGISImageServiceLayer(url,{id:layerId});
},
//初始化Feature服务
initFeatureLayer : function(url,layerId){
return new esri.layers.FeatureLayer(url, {
outFields : [ "*" ],
id : layerId
});
},
//初始化切片服务并添加到地图中,url地图服务地址、layerId为服务id、order为图层叠加顺序
initTiledAddMap : function(url,layerId,order){
gis.gisMap.addLayer(gis.layer.initTiledLayer(url,layerId),order);
},
//初始化动态地图服务并添加到地图中,url地图服务地址、layerId为服务id、order为图层叠加顺序
initDynamicAddMap : function(url,layerId,order){
gis.gisMap.addLayer(gis.layer.initDynamicLayer(url,layerId),order);
},
//初始化栅格服务并添加到地图中,url地图服务地址、layerId为服务id、order为图层叠加顺序
initImageAddMap : function(url,layerId,order){
gis.gisMap.addLayer(gis.layer.initImageLayer(url,layerId),order);
},
//初始化Feature服务并添加到地图中,url地图服务地址、layerId为服务id、order为图层叠加顺序
initFeatureAddMap : function(url,layerId,order){
gis.gisMap.addLayer(gis.layer.initFeatureLayer(url,layerId),order);
},
//获取并创建GraphicsLayer
getGraphicsLayer : function(layerId){
var graphicsLayer = gis.gisMap.getLayer(layerId);
if (graphicsLayer == undefined&&graphicsLayer==null) {
graphicsLayer = new esri.layers.GraphicsLayer();
graphicsLayer.id = layerId;
gis.gisMap.addLayer(graphicsLayer);
}
return graphicsLayer;
},
//根据layerId设置图层显示和隐藏,layerId图层id、flag(true/false);
setLayerVisibility : function(layerId,flag){
var layer = gis.gisMap.getLayer(layerId);
if(layer!=null&&layer!=undefined){
layer.setVisibility(flag);
}else{
alert("系统中无此id图层");
}
}
},
deactivate : function(){
if (gis.navigation) {
gis.navigation.deactivate();
}
if (gis.draw) {
gis.draw.deactivate();
}
if(gis.edit){
gis.edit.deactivate();
}
if (gis.mapClickConnect) {
dojo.disconnect(gis.mapClickConnect);
gis.mapClickConnect = null;
}
if (gis.mapMouseMoveConnect) {
dojo.disconnect(gis.mapMouseMoveConnect);
gis.mapMouseMoveConnect = null;
}
if (gis.drawConnect) {
dojo.disconnect(gis.drawConnect);
gis.drawConnect = null;
}
},
tools :{
//平移操作
pan : function(){
gis.deactivate();
gis.navigation.activate(esri.toolbars.Navigation.PAN);
},
//放大
zoomIn : function(){
gis.deactivate();
gis.navigation.activate(esri.toolbars.Navigation.ZOOM_IN);
},
//缩小
zoomOut : function(){
gis.deactivate();
gis.navigation.activate(esri.toolbars.Navigation.ZOOM_OUT);
},
//全图
zoomToFullExtent : function(){
gis.deactivate();
gis.navigation.zoomToFullExtent();
},
//前一视图
zoomToPrevExtent : function(){
gis.deactivate();
gis.navigation.zoomToPrevExtent();
},
//后一视图
zoomToNextExtent : function(){
gis.deactivate();
gis.navigation.zoomToNextExtent();
},
//测量距离
measureLength : function(){
gis.mapClickConnect = dojo.connect(gis.gisMap, "onClick",
function(event) {
var mapPoint = event.mapPoint;
if (gis.beforeMapPoint != undefined
&& gis.beforeMapPoint != null) {
var path = [ gis.beforeMapPoint, mapPoint ];
var polyline = esri.geometry.Polyline(
gis.gisMap.spatialReference).addPath(path);
var lineGraphic = new esri.Graphic(polyline,
gis.defaultLineSymbol);
gis.toolLowGraphicsLayer.add(lineGraphic);
var length = gis.method.getLength(polyline);
gis.mlLength = gis.mlLength + length;
var text = "";
if(gis.mlLength >= 1000){
text = (gis.mlLength/1000).toFixed(2) + "千米";
}else{
text = gis.mlLength.toFixed(2) + "米";
}
if (gis.beforeMapPoint
&& gis.beforeMapPoint.x != mapPoint.x
&& gis.beforeMapPoint.y != mapPoint.y) {
gis.method
.showTextBySymbol(
gis.textGraphicsLayer,
mapPoint, text, false);
}
} else {
gis.method.showTextBySymbol(
gis.textGraphicsLayer, mapPoint, "起点",
false);
}
var pointGraphic = new esri.Graphic(mapPoint,
gis.defaultMarkerSymbol);
gis.toolHighGraphicsLayer.add(pointGraphic);
gis.beforeMapPoint = mapPoint;
});
gis.mapMouseMoveConnect = dojo.connect(gis.gisMap, "onMouseMove",
function(event) {
var mapPoint = event.mapPoint;
if (gis.beforeMapPoint != undefined
&& gis.beforeMapPoint != null) {
var path = [ gis.beforeMapPoint, mapPoint ];
var polyline = new esri.geometry.Polyline(
gis.gisMap.spatialReference).addPath(path);
var length = gis.method.getLength(polyline);
var mlLength = gis.mlLength + length;
var text = "";
if(mlLength >= 1000){
text = (mlLength/1000).toFixed(2) + "千米";
}else{
text = mlLength.toFixed(2) + "米";
}
gis.method.showTextBySymbol(
gis.moveTextGraphicsLayer, mapPoint, text , true);
}
});
gis.drawConnect = dojo.connect(gis.draw, "onDrawComplete", function(
result) {
gis.deactivate();
if (gis.beforeMapPoint != null) {
var path = result.geometry.paths[0];
var bPoint = path[path.length - 2];
var lPoint = path[path.length - 1];
var xoffset = 0;
var difX = bPoint[0] - lPoint[0];
if (difX > 0) {
xoffset = -13;
} else {
xoffset = 13;
}
gis.clearSymbol.setOffset(xoffset, 0);
var infoTemplate = new esri.InfoTemplate(
"ernal Pool Locations", "df");
var cleanPointGraphic = new esri.Graphic(gis.beforeMapPoint,
gis.clearSymbol, {});
gis.toolHighGraphicsLayer.add(cleanPointGraphic);
dojo.connect(gis.toolHighGraphicsLayer, "onClick", gis.tools.cleanPointGraphicClick);
}
gis.beforeMapPoint = null; // 重置前一个点
gis.mlLength = 0; // 重置长度
gis.moveTextGraphicsLayer.clear();
});
gis.draw.activate(esri.toolbars.Draw.POLYLINE);
},
//测量面积
measureArea : function(){
gis.drawConnect = dojo.connect(gis.draw,"onDrawComplete",
function(result) {
gis.deactivate();
var area = gis.method.getArea(result.geometry,
"square-meters");
var text = "面积：";
if(area >= 1000000){
area = area/1000000;
text += area.toFixed(2) + "平方千米";
}else{
text += area.toFixed(2) + "平方米";
}
var point = result.geometry.rings[0][result.geometry.rings[0].length - 1];
gis.method.showTextBySymbol(
gis.textGraphicsLayer, esri.geometry
.Point(point,gis.gisMap.spatialReference), text , false);
var graphic = new esri.Graphic(result.geometry,
gis.defaultLineSymbol);
gis.toolLowGraphicsLayer.add(graphic);
gis.clearSymbol.setOffset(text.length*10+12, 16);
var cleanPointGraphic = new esri.Graphic(esri.geometry
.Point(point,gis.gisMap.spatialReference), gis.clearSymbol, {});
gis.toolHighGraphicsLayer.add(cleanPointGraphic);
dojo.connect(gis.toolHighGraphicsLayer, "onClick", gis.tools.cleanPointGraphicClick);
});
gis.draw.activate(esri.toolbars.Draw.POLYGON);
},
cleanPointGraphicClick : function(){
gis.toolLowGraphicsLayer.clear();
gis.textGraphicsLayer.clear();
gis.toolHighGraphicsLayer.clear();
}
},
method :{
/**
* 计算线的长度
* @geometry 线的geometry对象
* @unit 计算结果单位"meters";"kilometers";
* @return 返回长度结果
* @author chy
*/
getLength : function(geometry, unit){
if (!unit) {
unit = "meters";
}
var length = 0;
require([ "esri/geometry/geometryEngine" ], function(geometryEngine) {
if (geometry.spatialReference.isWebMercator()
|| geometry.spatialReference.wkid == "4326") {// 在web麦卡托投影和WGS84坐标系下的计算方法
length = geometryEngine.geodesicLength(geometry, unit);
} else {// 在其他投影坐标系下的计算方法
//geometry.spatialReference = map.spatialReference;
length = geometryEngine.planarLength(geometry, unit);
}
});
return length;
},
/**
* 计算面积
* @geometry 面的geometry对象
* @unit 计算结果单位"square-meters";"square-kilometers";
* @return 返回面积结果
* @author chy
*/
getArea : function(geometry, unit){
if (!unit) {
unit = "square-meters";
}
var area = 0;
require([ "esri/geometry/geometryEngine" ], function(geometryEngine) {
if (geometry.spatialReference.isWebMercator()
|| geometry.spatialReference.wkid == "4326") {
area = geometryEngine.geodesicArea(geometry, unit);
} else {
area = geometryEngine.planarArea(geometry, unit);
}
});
return area;
},
//计算长度和面积时显示图标
showTextBySymbol : function(graphicsLayer, mapPoint, text, clear){
var textBg = new esri.symbol.PictureMarkerSymbol(gis.methodUrl, 7, 16);
textBg.setOffset(text.length * 5, 16);
textBg.setWidth(text.length*10+8);
var bgGraphic = new esri.Graphic(mapPoint, textBg);
if (clear && clear == true) {
graphicsLayer.clear();
}
var font = new esri.symbol.Font();
font.setSize("10pt");
font.setFamily("微软雅黑");
var textSymbol = new esri.symbol.TextSymbol(text);
textSymbol.setFont(font);
textSymbol.setColor(new dojo.Color([ 0, 0, 0, 0.7 ]));
textSymbol.setOffset(text.length * 5, 12);
var labelGraphic = new esri.Graphic(mapPoint, textSymbol);
graphicsLayer.add(bgGraphic);
graphicsLayer.add(labelGraphic);
},
/**
* 根据图层id获取图层对象
* @layerId 图层id
* @return 返回图层对象
* @author chy
*/
getLayerById : function(layerId){
var layer = gis.gisMap.getLayer(layerId);
if(layer!=null&&layer!=undefined){
return layer;
}else{
alert("系统中无此id图层");
}
},
/**
* 查询图层对象
* @sql 查询sql语句;sql = "objectid=1"
* @featuresLayer featuresLayer图层对象
* @callback 回调函数
* @author chy
*/
queryFeatures : function(sql,featuresLayer,callback){
var query = new esri.tasks.Query();
if(sql==""||sql==null){
query.where = "1=1";
}else{
query.where = sql;
}
featuresLayer.queryFeatures(query, function(results) {
callback(results);
});
},
/**
* 根据featuresUrl获取图层属性表信息
* @sql 查询sql语句;sql = "objectid=1"
* @featuresUrl 图层features服务地址
* @return 返回图层查询结果
* @author chy
*/
ajaxQueryFeatures : function(sql,featuresUrl){
var returnVal = null;
if(sql==""&&sql==null){
sql = "1=1";
}
$.ajax({
type : "POST",
url : featuresUrl+"/query",
dataType : "json",
async : false,
data : {
f : 'json',
where : sql,
returnGeometry:true
},
error:function(){
alert("服务器未正常响应，请重试");
},
success : function(results) {
returnVal = results;
}
});
return returnVal;
},
/**
* 计算点是否在线上
* @linePoint1 线起点坐标
* @linePoint2 线终点坐标
* @pointRef 点坐标
* @return 返回true/false
* @author chy
*/
onTheLine : function(linePoint1, linePoint2, pointRef){
if ((pointRef.X - linePoint1.X) * (pointRef.X - linePoint2.X) <= 0
|| (pointRef.Y - linePoint1.Y)
* (pointRef.Y - linePoint2.Y) <= 0){
return true;
}else{
return false;
}
},
/**
* 计算两个点距离
* @point1 第一个点对象
* @point2 第二个点对象
* @return 返回两个点直接的距离
* @author chy
*/
twoPointDistance : function(point1, point2){
return Math.sqrt(Math.pow(point1.X - point2.X, 2)
+ Math.pow(point1.Y - point2.Y, 2));
},
/**
* 计算线的中心点坐标
* @x1 线起点经度
* @y1 线起点维度
* @x2 线终点经度
* @y2 线终点维度
* @return 返回线中心的坐标
* @author chy
*/
lineCenterPoint : function(x1, y1, x2, y2){
var x = (x2 - x1) / 2 + x1;
var y = (y2 - y1) / 2 + y1;
return {
x: x,
y: y
};
},
/**
* 显示infoWindow框,根据point、attr、infoWindowTemplate
* @returns
*/
showInfoWindow : function(point,titleField,attr,infoWindowTemplate){
gis.gisMap.infoWindow.setTitle(attr[titleField]);
var content = esri.substitute(attr,infoWindowTemplate);
gis.gisMap.infoWindow.setContent(content);
map.infoWindow.show(pt);
},
/**
* 点选查询
*
* @param url
* 服务地址
* @param geometry
* 点
* @param map
* 地图对象
* @param layerOption
* 查询范围，全部图层、最上层可见图层、可见图层
* @param callback
*/
identifyTask : function(url, geometry, map, layerOption, callback,errback){
if (errback == undefined || errback == null) {
errback = function(event) {
alert("查询出错");
}
}
var identifyParams = new esri.tasks.IdentifyParameters();
identifyParams.geometry = geometry;
identifyParams.height = map.height;
identifyParams.width = map.width;
identifyParams.mapExtent = map.extent;
identifyParams.layerOption = layerOption;
identifyParams.returnGeometry = true;
identifyParams.tolerance = 3;
var identify = new esri.tasks.IdentifyTask(url);
identify.execute(identifyParams, callback, errback);
},
/**
* 返回红色圆圈点
*/
getSymbolPoint : function(){
return new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([255,0,0,1]));
},
/**
* 返回红色线
*/
getSymbolPolyline : function(){
return new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1);
},
/**
* 返回红色面
*/
getSymbolPolygon : function(){
return new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([255,0,0,1]), 3
),
new dojo.Color([0,0,0,0.25])
);
},
/**
* 返回图片对象
* @sysmbolUrl 图标的url地址
* @w 图标的宽度
* @h 图标的长度
* @author chy
*/
getSymbolPicture : function(sysmbolUrl,w,h){
return new esri.symbol.PictureMarkerSymbol(sysmbolUrl, w, h);
},
/**
* 在地图上根据经纬度显示点位（无弹窗）
* @x 经度坐标
* @y 纬度坐标
* @symbolObject 图标对象
* @layerId graphicsLayerId
* @author chy
*/
showSymbolByXY : function(x,y,symbolObject,layerId){
var pt = new esri.geometry.Point(parseFloat(x),parseFloat(y));
var point = new esri.Graphic(pt,symbolObject,'','');
gis.layer.getGraphicsLayer(layerId).add(point);
},
/**
* 在地图上根据几何对象（point、polyline、polygon）绘图
*/
showSymbolByGeometry : function(geometry,symbolObject,layerId){
var point = new esri.Graphic(geometry,symbolObject,'','');
gis.layer.getGraphicsLayer(layerId).add(point);
},
/**
* 清除图标
*/
clearSymbol : function(layerId){
gis.layer.getGraphicsLayer(layerId).clear();
}
},
event :{
//地图加载完成后执行事件
mapLoad : function(callback){
return gis.gisMap.on("load",callback);
},
//鼠标移动事件
mouseMove : function(callback){
return gis.gisMap.on("mouse-move",callback);
},
//鼠标滚动放大缩小事件
zoomEnd : function(callback){
return gis.gisMap.on("zoom-end",callback);
},
//地图点位点击事件
graphicsClick : function(callback){
return gis.gisMap.graphics.on("click",callback);
},
//鼠标滑动到点位时触发事件
graphicsMouseOver : function(callback){
return gis.gisMap.graphics.on("onMouseOver",callback);
},
//根据事件标识解除事件
unEvent : function(e){
e.remove();
},
//绑定个性化事件
defineEvent : function(eventObject,operation,callback){
return eventObject.on(operation,callback);
}
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
