<html>
<head>
<meta charset=utf-8>
<title>WebGIS系统学习框架-0211</title>
<link rel="stylesheet" href="js/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" href="js/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/easyUi.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<!-- <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script> -->
<link rel="stylesheet" href="https://js.arcgis.com/3.36/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.36/esri/css/esri.css">
<style>
#info {
top: 20px;
color: #444;
height: auto;
font-family: arial;
left: 0px;
margin: 5px;
margin-top: 40px;
padding: 10px;
position: absolute;
width: 100px;
z-index: 40;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
#messages {
margin-top: 10px;
background-color: #fff;
box-shadow: 0 0 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 10px;
top: 20px;
z-index: 40;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map1, tb;
require([
"esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, ArcGISTiledMapServiceLayer, Draw,
SimpleMarkerSymbol, SimpleLineSymbol,
PictureFillSymbol, CartographicLineSymbol,
Graphic,
Color, dom, on
) {
var counties;
map1 = new Map("mapDiv", {
//basemap: "topo-vector",
center: [106, 37],
zoom: 4,
logo: false
});
var tiledlayer = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer")
map1.addLayer(tiledlayer);
map1.on("load", initToolbar);
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 3,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5
);
var fillSymbol = new PictureFillSymbol(
"img/画点.png",
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),
1
),
42,
42
);
function initToolbar() {
tb = new Draw(map1);
tb.on("draw-end", addGraphic);
on(dom.byId("info"), "click", function(evt) {
if (evt.target.id === "info") {
return;
}
var tool = evt.target.id.toLowerCase();
map1.disableMapNavigation();
tb.activate(tool);
});
}
function addGraphic(evt) {
tb.deactivate();
map1.enableMapNavigation();
var symbol;
if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = markerSymbol;
} else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;
} else {
symbol = fillSymbol;
}
map1.graphics.add(new Graphic(evt.geometry, symbol));
}
});
var map2;
require([
"esri/map", "esri/layers/FeatureLayer",
"esri/tasks/query", "esri/geometry/Circle",
"esri/graphic", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
], function(
Map, FeatureLayer,
Query, Circle,
Graphic, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
esriConfig, Color, dom
) {
// Use a proxy page if a URL generated by this page is greater than 2000 characters
//
// This should not be needed as nearly all query & select functions are performed on the client
esriConfig.defaults.io.proxyUrl = "/proxy/";
map2 = new Map("mapdiv", {
basemap: "streets",
center: [-95.249, 38.954],
zoom: 14,
slider: false,
logo: false
});
// Add the census block points in on demand mode. An outfield is specified since it is used when calculating the total population falling within the one mile radius.
var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
outFields: ["POP2000"]
});
// Selection symbol used to draw the selected census block points within the buffer polygon
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([247, 34, 101, 0.9]),
1
),
new Color([207, 34, 171, 0.5])
);
featureLayer.setSelectionSymbol(symbol);
// Make unselected features invisible
var nullSymbol = new SimpleMarkerSymbol().setSize(0);
featureLayer.setRenderer(new SimpleRenderer(nullSymbol));
map2.addLayer(featureLayer);
var circleSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([105, 105, 105]),
2
), new Color([255, 255, 0, 0.25])
);
var circle;
// When the map is clicked create a buffer around the click point of the specified distance
map2.on("click", function(evt) {
circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 1,
radiusUnit: "esriMiles"
});
map2.graphics.clear();
var graphic = new Graphic(circle, circleSymb);
map2.graphics.add(graphic);
var query = new Query();
query.geometry = circle.getExtent();
// Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map.
featureLayer.queryFeatures(query, selectInBuffer);
});
function selectInBuffer(response) {
var feature;
var features = response.features;
var inBuffer = [];
// Filter out features that are not actually in buffer, since we got all points in the buffer's bounding box
for (var i = 0; i < features.length; i++) {
feature = features[i];
if (circle.contains(feature.geometry)) {
inBuffer.push(feature.attributes[featureLayer.objectIdField]);
}
}
var query = new Query();
query.objectIds = inBuffer;
// Use an objectIds selection query (should not need to go to the server)
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results) {
var totalPopulation = sumPopulation(results);
var r = "";
r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>";
dom.byId("messages").innerHTML = r;
});
}
function sumPopulation(features) {
var popTotal = 0;
for (var x = 0; x < features.length; x++) {
popTotal = popTotal + features[x].attributes["POP2000"];
}
return popTotal;
}
});
</script>
<script src="https://js.arcgis.com/3.36/"></script>
<script>
dojo.require("esri.tasks.find");
var find, params;
function init() {
find = new esri.tasks.FindTask("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/");
params = new esri.tasks.FindParameters();
params.layerIds = [2];
params.searchFields = ["STATE_NAME", "STATE_FIPS"];
}
function doFind() {
params.searchText = dojo.byId("searchText").value;
find.execute(params, showResults);
}
function showResults(results) {
var result, attribs;
var s = ["<table border=\"1\"><thead><tr style=\"background-color:#ccc;\"><td>State Name</td><td>FIPS</td><td>Population (1990)</td><td>Population (1999)</td></tr></thead><tbody id=\"states\">"];
dojo.forEach(results, function(result) {
attribs = result.feature.attributes;
s.push("<tr><td>" + attribs.STATE_NAME + "</td><td>" + attribs.STATE_FIPS + "</td><td>" + attribs.POP1990 + "</td><td>" + attribs.POP1999 + "</td></tr>");
});
s.push("</tbody></table>");
dojo.byId("tbl").innerHTML = s.join("");
}
dojo.ready(init);
</script>
<script src="https://js.arcgis.com/3.36/"></script>
<script>
var map;
require([
"esri/map",
"esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/dijit/Popup",
"dojo/_base/array",
"esri/Color",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
SimpleLineSymbol, IdentifyTask, IdentifyParameters, Popup,
arrayUtils, Color, domConstruct
) {
var identifyTask, identifyParams;
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, domConstruct.create("div"));
map = new Map("map", {
basemap: "satellite",
center: [-83.275, 42.573],
zoom: 18,
infoWindow: popup,
logo: false
});
map.on("load", mapReady);
var parcelsURL = "https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer";
map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, {
opacity: 0.55
}));
function mapReady() {
map.on("click", executeIdentifyTask);
//create identify tasks and setup parameters
identifyTask = new IdentifyTask(parcelsURL);
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 3;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [0, 2];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = map.width;
identifyParams.height = map.height;
}
function executeIdentifyTask(event) {
identifyParams.geometry = event.mapPoint;
identifyParams.mapExtent = map.extent;
var deferred = identifyTask
.execute(identifyParams)
.addCallback(function(response) {
// response is an array of identify result objects
// Let's return an array of features.
return arrayUtils.map(response, function(result) {
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
if (layerName === 'Tax Parcels') {
var taxParcelTemplate = new InfoTemplate("",
"${Postal Address} <br/> Owner of record: ${First Owner Name}");
feature.setInfoTemplate(taxParcelTemplate);
} else if (layerName === 'Building Footprints') {
console.log(feature.attributes.PARCELID);
var buildingFootprintTemplate = new InfoTemplate("",
"Parcel ID: ${PARCELID}");
feature.setInfoTemplate(buildingFootprintTemplate);
}
return feature;
});
});
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(event.mapPoint);
}
});
</script>
</head>
<body class="easyui-layout">
<div id="top" data-options="region:'north',border:false" style="height:60px;background-image: url('img/4.jpg');">
<div id="top_button">
<button>放大</button>
<button>缩小</button>
<button>全图</button>
<button>前一视图</button>
<button>后一视图</button>
</div>
</div>
<div id="centerMenu" data-options="region:'west',split:true,title:'导航菜单'" style="height: 120px;width: 20%;padding: 3px;">
<div id="test" class="easyui-accordion" style="height: 300px;width: 98%;">
<div id="info" title="绘制几何图形" data-options="iconCls:'icon-add',selected:true" style="overflow: auto;height: 200px;">
<h3 style="color: #0099FF;margin-bottom: 23px;">请选择绘制按钮</h3>
<button id="Point" href="#" class="info" style="width: 70px; background: url('img/画点.png') no-repeat 3px 3px;background-size: 18px,18px;margin-bottom: 20px;">画点</button>
<button id="Multipoint" href="#" class="info" style="width: 90px;background: url('img/画点.png') no-repeat 3px 3px;background-size: 18px,18px;margin-bottom: 20px;">多个点</button>
<button id="Line" href="#" class="info" style="width: 90px;background: url('img/画线.png') no-repeat 3px 3px;background-size: 18px,18px;margin-bottom: 20px;">画直线</button>
<button id="Polyline" href="#" class="info" style="width: 90px;background: url('img/画线.png') no-repeat 3px 3px;background-size: 18px,18px;margin-bottom: 20px;">画折线</button>
<button id="FreehandPolyline" href="#" class="info" style="width: 120px;background: url('img/画线.png') no-repeat 3px 3px;background-size: 18px,18px;margin-bottom: 20px;">徒手画线</button>
<button id="Polygon" href="#" class="info" style="width: 70px;background: url('img/画面.png') no-repeat 3px 3px;background-size: 18px,18px;width: 100px;">画面</button>
<button id="FreehandPolygon" href="#" class="info" style="width: 120px;background: url('img/画面.png') no-repeat 3px 3px;background-size: 18px,18px;width: 100px;">徒手画面</button>
</div>
<div title="QueryTask查询" data-options="iconCls:'icon-ok'" style="height: 100px;">
<a href="QueryTask.html" style="margin-top: 50px;">
<button id="QueryTask" href="#" class="info" style="width: 160px;background: url('') no-repeat 3px 3px;background-size: 18px,18px;margin-bottom: 20px;top:20px;">QueryTask查询</button>
</a>
</div>
<div title="FindTask查询" data-options="iconCls:'icon-ok'" style="height: 100px;">
<a href="FindTask.html" style="margin-top: 50px;">
<button id="FindTask" href="#" class="info" style="width: 160px;background: url('') no-repeat 3px 3px;background-size: 18px,18px;margin-bottom: 20px;top:20px;">FindTask查询</button>
</a>
</div>
<div title="IdentifyTask查询" data-options="iconCls:'icon-ok'" style="height: 100px;">
<a href="Identify.html" style="margin-top: 50px;">
<button id="IdentifyTask" href="#" class="info" style="width: 160px;background: url('') no-repeat 3px 3px;background-size: 18px,18px;margin-bottom: 20px;top:20px;">IdentifyTask查询</button>
</a>
</div>
</div>
</div>
<div id="centerMain" data-options="region:'center',split:true" style="width: 78%;">
<div id="main-center" class="easyui-tabs" fit="true" border="false">
<div title="地图" id="mapDiv">
<div id="overview" style="height: 160px;width: 180px;position: absolute;right: 0px;bottom: 0px;"></div>
<div id="Scalerbar" style="height: 20px;width: 120px;position: absolute;left: 20px;bottom: 0px;"></div>
<div id="Bookmarks" style="position: absolute;right: 5px;top: 30px;"></div>
<div id="Basegallery" style="height: 160px;width: 180px;position: absolute;right: 30px;top: 20px;"></div>
</div>
<div title="Query" id="mapdiv">
<span id="messages">Click on the map to select census block points within 1 mile.</span>
</div>
<div title="FindTask"> Find by State Name or State FIPS: <input type="text" id="searchText" size="40" value="Kansas" />
<input type="button" value="Find" onclick="doFind()" />
<div id="tbl"></div>
</div>
<div title="IdentifyTask" id="map">
<div id="overview" style="height: 160px;width: 180px;position: absolute;right: 0px;bottom: 0px;"></div>
</div>
</div>
</div>
</body>
</html>
4925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
