Arcgis加载shp文件
Arcgis地图加载shp文件,效果如图（当前shp文件包含雨量等值面数据）：
1、思路：使用js-shapefile-to-geojson把shp和dbf文件转为geojson格式数据，然后通过Arcgis的Api加载geojson数据并给图层配色。
2、准备：需要引入的js：stream.js、shapefile.js、dbf.js
（ js-shapefile-to-geojson：https://github.com/wavded/js-shapefile-to-geojson）
需要的文件：.shp和.dbf文件。
.shp：存储空间信息的。
.dbf：存储属性信息的。
3、文件目录：
4、xxjk.js---->Js方法：
function addJiangShuiLDJSON(url){
shapefile = new Shapefile({
shp: "../../file/shp/rain.shp",
dbf: "../../file/shp/rain.dbf"
}, function(data){
//返回geojson数据
require([
"map/QXLayer" //引入map目录下的QXLayer.js
], function (QXLayer) {
var layerTool = new QXLayer({
map: map});
var glayer = layerTool.fromJson(data); //QXLayer.js中的fromJson方法
map.addLayer(glayer);
});
})
}
5、QXLayer.js---->Js方法：
define(
"map/QXLayer",
"require dojo/dom-style dojo/dom-class dojo/_base/declare dojo/_base/lang dojo/query dojo/on dojo/dom esri/layers/GraphicsLayer esri/map esri/symbols/SimpleFillSymbol esri/symbols/SimpleLineSymbol esri/symbols/Font esri/symbols/TextSymbol esri/graphic esri/symbols/CartographicLineSymbol esri/Color esri/symbols/PictureMarkerSymbol esri/geometry/Point esri/geometry/Polygon"
.split(" "),
function(l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, B, C, D, E) {
return o(
[],
{
map : null,
layers : [],
constructor : function(a) {
this.map = a.map
},
init : function() {
},
//1、雨量
fromJson : function(a) {
if (typeof (a) == "string") {
a = eval("(" + a + ")")
}
var b = new t();
if (a.geojson != undefined) {
if (a.geojson != undefined) {
for (var j = 0; j < a.geojson.features.length; j++) {
var c = a.geojson.features[j];
//配色方案的标志字段
var d = c.properties.GRIDCODE;
//配色方案
var rgb = "166,242,142";
switch(d){
case "0"://rgb="255,255,255";break;//#A6F28E
a.geojson.features.splice(j,1);
continue;break;
case "1":rgb="166,242,142";break;//#A6F28E
case "2":rgb="0,125,0";break;//007D00
case "3":rgb="62,188,250";break;//#3EBCFA
case "4":rgb="0,0,250";break;//#0000FA
case "5":rgb="250,62,250";break;//#FA3EFA
case "6":rgb="125,0,0";break;//#7D0000
case "7":rgb="250,0,0";break;//#FA0000
}
var f = rgb;
var g = B.fromString("rgb(" + f
+ ")");
var h = this.addPolygon(c, g);
b.add(h)
}
}
}
b.setOpacity(0.7);
this.layers.push(b);
return b
},
//2、旬月距平
fromJsonJP : function(a) {
if (typeof (a) == "string") {
a = eval("(" + a + ")")
}
var b = new t();
if (a.geojson != undefined) {
if (a.geojson != undefined) {
for (var j = 0; j < a.geojson.features.length; j++) {
var c = a.geojson.features[j];
var d = c.properties.GRIDCODE;
var rgb = "";
switch(d){
case "0":rgb="255,0,0";break;//#FF0000
/*a.geojson.features.splice(j,1);
continue;break;*/
case "1":rgb="250,0,0";break;//#FA0000
case "2":rgb="250,125,0";break;//#FA7D00
case "3":rgb="250,250,0";break;//#FAFA00
case "4":rgb="0,250,0";break;//#00FA00
case "5":rgb="62,125,62";break;//#3E7D3E
case "6":rgb="0,250,250";break;//#00FAFA
case "7":rgb="0,0,250";break;//#0000FA
}
var f = rgb;
var g = B.fromString("rgb(" + f
+ ")");
var h = this.addPolygon(c, g);
b.add(h)
}
}
}
b.setOpacity(0.7);
this.layers.push(b);
return b
},
addPolygon : function(a, b, c) {
var d = new v(v.STYLE_SOLID, new w(w.STYLE_SOLID,
b, 2), b);
var e = new E(c);
for (var i = 0; i < a.geometry.coordinates.length; i++) {
e.addRing(a.geometry.coordinates[i])
}
var attributesObj = {
};
attributesObj.level=a.properties.GRIDCODE;
var f = new z({
geometry : e,
attributes : attributesObj
});
f.setSymbol(d);
return f
},
addPoint : function(a) {
var b = new D(a.lgtd, a.lttd);
var c = new C("img/marker_blue.png", 15, 15);
var d = new z(b, c, a);
return d
},
removeLayer : function(a) {
this.map.remove(a)
},
clearLayers : function() {
for (var i = 0; i < this.layers.length; i++) {
this.map.remove(this.layers[i])
}
}
})
});