<!DOCTYPE html>
< html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> < linkrel = " stylesheet" href = " http://js.arcgis.com/3.9/js/esri/css/esri.css" > < style>
html, body, #map {
height : 100%;
margin : 0;
padding : 0;
}
.base-map-ano {
position : absolute;
right : 0pt;
top : 18pt;
background : #e6edf1;
border : #96aed1 1px solid;
padding : 4px 5px;
padding-left : 0px;
padding-top : 0px;
display : none;
font-weight : normal;
}
.base-map {
position : absolute;
right : 15pt;
top : 15pt;
background : #f0f0f0;
border : #96aed1 1px solid;
width : auto;
height : auto;
z-index : 99;
font : normal 11px "宋体" ,Arial;
color : #868686;
}
.base-map-switch {
padding : 4px 8px;
float : left;
}
.base-map-switch-active {
background : #e6edf1;
font-weight : bold;
color : #4d4d4d;
}
.base-map-switch:hover {
cursor : pointer;
}
.base-map-switch-center {
border : 1px #96aed1 solid;
border-top : none;
border-bottom : none;
}
</ style> < scripttype = " text/javascript" >
dojoConfig = {
parseOnLoad: true ,
packages: [ {
name: 'layer' ,
location: this . location. pathname. replace ( /\/[^/]+$/ , "" ) + "/js/layer"
} ]
} ;
</ script> < scriptsrc = " http://js.arcgis.com/3.9/" > </ script> < script>
var map;
require ( [
"esri/map" ,
"layer/BDVecLayer" ,
"esri/layers/FeatureLayer" ,
"esri/geometry/Point" ,
"esri/SpatialReference" ,
"dojo/domReady!"
] , function (
Map,
BDVecLayer,
FeatureLayer,
Point,
SpatialReference
) {
map = new Map ( "map" , {
logo: false
} ) ;
var vecMap = new BDVecLayer ( ) ;
map. addLayer ( vecMap) ;
var pt = new Point ( 7038512.810510807 , 2629489.7975553474 , new SpatialReference ( { wkid: 102100 } ) ) ;
map. centerAndZoom ( pt, 5 ) ;
} ) ;
</ script> </ head> < body> < divid = " map" > </ div> </ body> </ html> <!DOCTYPE html>
< html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> < linkrel = " stylesheet" href = " http://js.arcgis.com/3.9/js/esri/css/esri.css" > < style>
html, body, #map {
height : 100%;
margin : 0;
padding : 0;
}
.base-map-ano {
position : absolute;
right : 0pt;
top : 18pt;
background : #e6edf1;
border : #96aed1 1px solid;
padding : 4px 5px;
padding-left : 0px;
padding-top : 0px;
display : none;
font-weight : normal;
}
.base-map {
position : absolute;
right : 15pt;
top : 15pt;
background : #f0f0f0;
border : #96aed1 1px solid;
width : auto;
height : auto;
z-index : 99;
font : normal 11px "宋体" ,Arial;
color : #868686;
}
.base-map-switch {
padding : 4px 8px;
float : left;
}
.base-map-switch-active {
background : #e6edf1;
font-weight : bold;
color : #4d4d4d;
}
.base-map-switch:hover {
cursor : pointer;
}
.base-map-switch-center {
border : 1px #96aed1 solid;
border-top : none;
border-bottom : none;
}
</ style> < scripttype = " text/javascript" >
dojoConfig = {
parseOnLoad: true ,
packages: [ {
name: 'layer' ,
location: this . location. pathname. replace ( /\/[^/]+$/ , "" ) + "/js/layer"
} ]
} ;
</ script> < scriptsrc = " http://js.arcgis.com/3.9/" > </ script> < script>
var map；
require ( [
"esri/map" ,
"layer/BDimgLayer" ,
"esri/layers/FeatureLayer" ,
"esri/geometry/Point" ,
"esri/SpatialReference" ,
"dojo/domReady!"
] , function (
Map,
BDimgLayer,
FeatureLayer,
Point,
SpatialReference
) {
map = new Map ( "map" , {
logo: false
} ) ;
var vecMap = new BDimgLayer ( ) ;
map. addLayer ( vecMap) ;
var pt = new Point ( 7038512.810510807 , 2629489.7975553474 , new SpatialReference ( { wkid: 102100 } ) ) ;
map. centerAndZoom ( pt, 5 ) ;
} ) ;
</ script> </ head> < body> < divid = " map" > </ div> </ body> </ html> <!DOCTYPE html>
< htmlxmlns = " http://www.w3.org/1999/xhtml" > < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> < linkrel = " stylesheet" href = " http://js.arcgis.com/3.9/js/dojo/dijit/themes/soria/soria.css" /> < linkrel = " stylesheet" href = " http://js.arcgis.com/3.9/js/esri/css/esri.css" /> < linkrel = " stylesheet" type = " text/css" href = " http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css" > < linkrel = " stylesheet" type = " text/css" href = " http://www.jeasyui.net/Public/js/easyui/themes/icon.css" > < scripttype = " text/javascript" src = " http://code.jquery.com/jquery-1.6.1.min.js" > </ script> < scriptsrc = " http://js.arcgis.com/3.9/" > </ script> < scripttype = " text/javascript" src = " http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js" > </ script> < scripttype = " text/javascript" >
$ ( function ( ) {
var map;
var layer, visible = [ ] ;
require ( [
"dojo/parser" ,
"dojo/_base/window" ,
"dojo/dom-style" ,
"dojo/topic" ,
"dijit/registry" ,
"esri/map" ,
"esri/layers/ArcGISTiledMapServiceLayer" ,
"esri/layers/ArcGISDynamicMapServiceLayer" ,
"dojo/domReady!"
] , function (
parser,
win,
domStyle,
topic,
registry,
Map,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer
) {
parser. parse ( ) ;
map = new Map ( "mapDiv" ) ;
layer = new esri. layers. ArcGISDynamicMapServiceLayer ( "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer" )
map. addLayer ( layer) ;
if ( layer. loaded) {
buildLayerList ( layer) ;
} else {
dojo. connect ( layer, "onLoad" , buildLayerList) ;
}
} ) ;
function getChildrenNodes ( parentnodes, node) {
for ( var i = parentnodes. length - 1 ; i >= 0 ; i-- ) {
var pnode = parentnodes[ i] ;
if ( pnode. id == node. pid) {
pnode. state = "closed" ;
pnode. children. push ( node) ;
return ;
} else {
parentnodes. pop ( ) ;
}
}
}
function buildLayerList ( layer) {
var layerinfos = layer. layerInfos;
var treeList = [ ] ;
var parentnodes = [ ] ;
var root = { "id" : "rootnode" , "text" : "所有图层" , "children" : [ ] } ;
var node = { } ;
if ( layerinfos != null && layerinfos. length > 0 ) {
for ( var i = 0 , j = layerinfos. length; i < j; i++ ) {
var info = layerinfos[ i] ;
if ( info. defaultVisibility) {
visible. push ( info. id) ;
}
node = {
"id" : info. id,
"text" : info. name,
"pid" : info. parentLayerId,
"checked" : info. defaultVisibility ? true : false ,
"children" : [ ]
} ;
if ( info. parentLayerId == - 1 ) {
parentnodes. push ( node) ;
root. children. push ( node) ;
} else {
getChildrenNodes ( parentnodes, node) ;
parentnodes. push ( node) ;
}
}
}
treeList. push ( root) ;
$ ( "#tt" ) . tree ( {
data: treeList,
checkbox: true ,
onCheck: function ( node, checked) {
var visible = [ ] ;
var nodes = $ ( '#tt' ) . tree ( "getChecked" ) ;
dojo. forEach ( nodes, function ( node) {
visible. push ( node. id) ;
} ) ;
if ( visible. length === 0 ) {
visible. push ( - 1 ) ;
}
layer. setVisibleLayers ( visible) ;
}
} ) ;
}
} ) ;
</ script> </ head> < bodyclass = " soria" > < div> < ulid = " tt" style =" margin-top : 0; width : 250px" > </ ul> < divid = " mapDiv" > </ div> </ div> </ body> </ html> <!DOCTYPE html>
< html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> </ head> < body> < svgxmlns = " http://www.w3.org/2000/svg" version = " 1.1" height = " 190" > < polygonpoints = " 100,10 40,180 190,60 10,60 160,180"
style =" fill : lime; stroke : purple; stroke-width : 5; fill-rule : evenodd; " > </ svg> </ body> </ html> <!DOCTYPE html>
< htmlxmlns = " http://www.w3.org/1999/xhtml" > < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> </ head> < body> < inputlist = " browsers" > < datalistid = " browsers" > < optionvalue = " Internet Explorer" > < optionvalue = " Firefox" > < optionvalue = " Chrome" > < optionvalue = " Opera" > < optionvalue = " Safari" > </ datalist> </ body> </ html> <!DOCTYPE html>
< htmlxmlns = " http://www.w3.org/1999/xhtml" > < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> </ head> < body> < formaction = " Default.aspx" method = " get" > < inputtype = " text" name = " usr_name" > < keygenname = " security" > < inputtype = " submit" > </ form> </ body> </ html> <!DOCTYPE html>
< htmlxmlns = " http://www.w3.org/1999/xhtml" > < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> </ head> < body> < formoninput = " x.value=parseInt(a.value)+parseInt(b.value)" > < inputtype = " range" id = " a" value = " 50" > < inputtype = " number" id = " b" value = " 50" > < outputname = " x" for = " a b" > </ output> </ form> </ body> </ html> <!DOCTYPE html>
< html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> </ head> < body> < form> < inputtype = " week" name = " year_week" > </ form> </ body> </ html> <!DOCTYPE html>
< htmlxmlns = " http://www.w3.org/1999/xhtml" > < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> </ head> < body> < canvasid = " myCanvas" width = " 600" height = " 300" style =" border : 1px solid #000000; " > </ canvas> < script>
var c = document. getElementById ( "myCanvas" ) ;
var ctx = c. getContext ( "2d" ) ;
ctx. fillStyle = "#FF0000" ;
ctx. fillRect ( 0 , 0 , 150 , 75 ) ;
</ script> </ body> </ html> <!DOCTYPE html>
< html> < body> < pid = " demo" > </ p> < buttononclick = " getLocation()" > </ button> < script>
var x = document. getElementById ( "demo" ) ;
function getLocation ( ) {
if ( navigator. geolocation) {
navigator. geolocation. watchPosition ( showPosition) ;
}
else { x. innerHTML = "该浏览器不支持获取地理位置。" ; }
}
function showPosition ( position) {
x. innerHTML = "纬度: " + position. coords. latitude +
"<br>经度: " + position. coords. longitude;
}
</ script> </ body> </ html> <!DOCTYPE html>
< html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" > < metaname = " viewport" content = " initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" > < metaname = " apple-mobile-web-app-capable" content = " yes" > < metaname = " apple-mobile-web-app-status-bar-style" content = " translucent-black" > < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" > < title> </ title> < linkrel = " stylesheet" href = " https://js.arcgis.com/3.16/esri/css/esri.css" > < style>
html, body {
height : 100%;
margin : 0px;
padding : 0px;
width : 100%;
}
@-webkit-keyframes pulse{
0% {
opacity : 1.0;
}
45% {
opacity : .20;
}
100% {
opacity : 1.0;
}
}
@-moz-keyframes pulse{
0% {
opacity : 1.0;
}
45% {
opacity : .20;
}
100% {
opacity : 1.0;
}
}
#map_graphics_layer {
-webkit-animation-duration : 3s;
-webkit-animation-iteration-count : infinite;
-webkit-animation-name : pulse;
-moz-animation-duration : 3s;
-moz-animation-iteration-count : infinite;
-moz-animation-name : pulse;
}
</ style> < scriptsrc = " https://js.arcgis.com/3.16compact/" > </ script> < script>
var map;
var graphic;
var currLocation;
var watchId;
require ( [
"esri/map" ,
"esri/geometry/Point" ,
"esri/symbols/SimpleMarkerSymbol" ,
"esri/symbols/SimpleLineSymbol" ,
"esri/graphic" ,
"esri/Color" ,
"dojo/domReady!"
] , function (
Map,
Point,
SimpleMarkerSymbol,
SimpleLineSymbol,
Graphic,
Color
) {
map = new Map ( "map" , {
basemap: "oceans" ,
center: [ - 85.957 , 17.140 ] ,
zoom: 2
} ) ;
map. on ( "load" , initFunc) ;
function orientationChanged ( ) {
if ( map) {
map. reposition ( ) ;
map. resize ( ) ;
}
}
function initFunc ( map) {
if ( navigator. geolocation) {
navigator. geolocation. getCurrentPosition ( zoomToLocation, locationError) ;
watchId = navigator. geolocation. watchPosition ( showLocation, locationError) ;
} else {
alert ( "Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API." ) ;
}
}
function locationError ( error) {
if ( navigator. geolocation) {
navigator. geolocation. clearWatch ( watchId) ;
}
switch ( error. code) {
case error. PERMISSION_DENIED :
alert ( "Location not provided" ) ;
break ;
case error. POSITION_UNAVAILABLE :
alert ( "Current location not available" ) ;
break ;
case error. TIMEOUT :
alert ( "Timeout" ) ;
break ;
default :
alert ( "unknown error" ) ;
break ;
}
}
function zoomToLocation ( location) {
var pt = new Point ( location. coords. longitude, location. coords. latitude) ;
addGraphic ( pt) ;
map. centerAndZoom ( pt, 12 ) ;
}
function showLocation ( location) {
var pt = new Point ( location. coords. longitude, location. coords. latitude) ;
if ( ! graphic) {
addGraphic ( pt) ;
} else {
graphic. setGeometry ( pt) ;
}
map. centerAt ( pt) ;
}
function addGraphic ( pt) {
var symbol = new SimpleMarkerSymbol (
SimpleMarkerSymbol. STYLE_CIRCLE ,
12 ,
new SimpleLineSymbol (
SimpleLineSymbol. STYLE_SOLID ,
new Color ( [ 210 , 105 , 30 , 0.5 ] ) ,
8
) ,
new Color ( [ 210 , 105 , 30 , 0.9 ] )
) ;
graphic = new Graphic ( pt, symbol) ;
map. graphics. add ( graphic) ;
}
} ) ;
</ script> </ head> < bodyonorientationchange = " orientationChanged();" > < divid = " map" style =" width : 100%; height : 100%; " > </ div> </ body> </ html> 绘制底图 获取热点数据 FeatureLayer，FeatureServer HeatmapRenderer 地图中添加热点数据 <!DOCTYPE html>
< html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" > < metaname = " viewport" content = " initial-scale=1, maximum-scale=1, user-scalable=no" > < title> </ title> < linkrel = " stylesheet" href = " https://js.arcgis.com/3.16/dijit/themes/claro/claro.css" > < linkrel = " stylesheet" href = " https://js.arcgis.com/3.16/esri/css/esri.css" > < style>
html, body, #map {
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
</ style> < scriptsrc = " https://js.arcgis.com/3.16/" > </ script> < script>
var map;
require ( [
"esri/InfoTemplate" ,
"esri/layers/FeatureLayer" ,
"esri/map" ,
"esri/renderers/HeatmapRenderer" ,
"dojo/domReady!"
] , function (
InfoTemplate,
FeatureLayer,
Map,
HeatmapRenderer
) {
formatFatalities = function ( value, key, data) {
var result = value > 1 ? value + " people " : value + " person " ;
return result;
}
formatGender = function ( value, key, data) {
var lookup = { 1 : "male" , 2 : "female" , 8 : "unknown" , 9 : "unknown" } ;
return lookup[ value] ;
}
formatConditions = function ( value, key, data) {
var lookup = { 0 : "No Additional Atmospheric Conditions" , 1 : "Clear" , 2 : "Rain" , 3 : "Sleet, Hail (Freezing Rain or Drizzle)" , 4 : "Snow" , 5 : "Fog, Smog, Smoke" , 6 : "Severe Crosswinds" , 7 : "Blowing Sand, Soil, Dirt" , 8 : "Other" , 10 : "Cloudy" , 11 : "Blowing Snow" , 98 : "Not Reported" , 99 : "Unknown" } ;
if ( value !== 1 ) {
return "Road conditions: " + lookup[ value] + "<br>" ;
}
}
formatWorkZone = function ( value, key, data) {
var lookup = { 0 : "None" , 1 : "Construction" , 2 : "Maintenance" , 3 : "Utility" , 4 : "Work Zone, Type Unknown" } ;
if ( value !== 0 ) {
return "Work Zone: " + lookup[ value] + "<br>" ;
}
}
formatAlcoholTestResults = function ( value, key, data) {
var isMatch = value. match ( /\b(?!9[5-9])[0-9][0-9]\b|\b[8-9]{1}\b/m ) ;
if ( isMatch) {
return "Driver was over the legal limit for alcohol" ;
}
}
map = new Map ( "map" , {
basemap: "gray" ,
center: [ - 119.11 , 36.65 ] ,
zoom: 7 ,
minZoom: 7 ,
maxZoom: 9
} ) ;
var infoContentDesc = "<p>${numfatal:formatFatalities} died when a ${age} year old ${sex:formatGender} was involved in a fatal speeding accident.</p>" ;
var infoContentDetails = "${atmcond:formatConditions}${conszone:formatWorkZone}${alcres:formatAlcoholTestResults}" ;
var infoContent = infoContentDesc + infoContentDetails;
var infoTemplate = new InfoTemplate ( "Accident details" , infoContent) ;
var serviceURL = "//services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/2012_CA_NHTSA/FeatureServer/0" ;
var heatmapFeatureLayerOptions = {
mode: FeatureLayer. MODE_SNAPSHOT ,
infoTemplate: infoTemplate,
outFields: [
"atmcond" ,
"numfatal" ,
"conszone" ,
"age" ,
"alcres" ,
"sex"
]
} ;
var heatmapFeatureLayer = new FeatureLayer ( serviceURL, heatmapFeatureLayerOptions) ;
var heatmapRenderer = new HeatmapRenderer ( ) ;
heatmapFeatureLayer. setRenderer ( heatmapRenderer) ;
map. addLayer ( heatmapFeatureLayer) ;
} ) ;
</ script> </ head> < body> < divid = " map" > </ div> </ body> </ html> <!DOCTYPE html>
< html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " initial-scale=1, maximum-scale=1,user-scalable=no" > < title> </ title> < linkrel = " stylesheet" href = " https://js.arcgis.com/3.16/dijit/themes/nihilo/nihilo.css" > < linkrel = " stylesheet" href = " https://js.arcgis.com/3.16/esri/css/esri.css" > < style>
html, body {
height : 100%; width : 100%;
margin : 0; padding : 0;
}
body {
background-color : #fff; overflow : hidden;
font-family : sans-serif;
}
label {
display : inline-block;
padding : 5px 5px 0 5px;
font-weight : 400;
font-size : 12pt;
}
.button {
width : 100%;
margin : 3px auto;
text-align : center;
}
#header {
padding-top : 4px;
padding-right : 15px;
color : #444;
font-size : 16pt; text-align : right; font-weight : bold;
height : 55px;
background : #fff;
border-bottom : 1px solid #444;
}
#subheader {
font-size : small;
color : #444;
text-align : right;
padding-right : 20px;
}
#rightPane {
margin : 0;
padding : 10px;
background-color : #fff;
color : #421b14;
width : 180px;
}
.ds { background : #000; overflow : hidden; position : absolute; z-index : 2; }
#ds-h div { width : 100%; }
#ds-l div, #ds-r div { height : 100%; }
#ds-r div { right : 0; }
#ds .o1 { filter : alpha ( opacity=10) ; opacity : .1; }
#ds .o2 { filter : alpha ( opacity=8) ; opacity : .08; }
#ds .o3 { filter : alpha ( opacity=6) ; opacity : .06; }
#ds .o4 { filter : alpha ( opacity=4) ; opacity : .04; }
#ds .o5 { filter : alpha ( opacity=2) ; opacity : .02; }
#ds .h1 { height : 1px; }
#ds .h2 { height : 2px; }
#ds .h3 { height : 3px; }
#ds .h4 { height : 4px; }
#ds .h5 { height : 5px; }
#ds .v1 { width : 1px; }
#ds .v2 { width : 2px; }
#ds .v3 { width : 3px; }
#ds .v4 { width : 4px; }
#ds .v5 { width : 5px; }
.dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
width : 160px;
}
.esriPrint {
padding : 0;
}
</ style> < scriptsrc = " https://js.arcgis.com/3.16/" > </ script> < script>
var app = { } ;
app. map = null ; app. toolbar = null ; app. tool = null ; app. symbols = null ; app. printer = null ;
require ( [
"esri/map" ,
"esri/toolbars/draw" ,
"esri/dijit/Print" ,
"esri/layers/ArcGISTiledMapServiceLayer" ,
"esri/layers/ArcGISDynamicMapServiceLayer" ,
"esri/layers/LayerDrawingOptions" ,
"esri/symbols/SimpleMarkerSymbol" ,
"esri/symbols/SimpleLineSymbol" ,
"esri/symbols/SimpleFillSymbol" ,
"esri/graphic" ,
"esri/renderers/ClassBreaksRenderer" ,
"esri/config" ,
"dojo/_base/array" ,
"esri/Color" ,
"dojo/parser" ,
"dojo/query" ,
"dojo/dom" ,
"dojo/dom-construct" ,
"dijit/form/CheckBox" ,
"dijit/form/Button" ,
"dijit/layout/BorderContainer" ,
"dijit/layout/ContentPane" ,
"dojo/domReady!"
] , function (
Map,
Draw,
Print,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer,
LayerDrawingOptions,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Graphic,
ClassBreaksRenderer,
esriConfig,
arrayUtils,
Color,
parser,
query,
dom,
domConstruct,
CheckBox,
Button
) {
parser. parse ( ) ;
esriConfig. defaults. io. proxyUrl = "/proxy/" ;
app. map = new Map ( "map" , {
center: [ - 90.733 , 30.541 ] ,
zoom: 8
} ) ;
app. map. on ( "load" , function ( ) {
app. toolbar = new Draw ( app. map) ;
app. toolbar. on ( "draw-end" , addToMap) ;
} ) ;
app. printer = new Print ( {
map: app. map,
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
} , dom. byId ( "printButton" ) ) ;
app. printer. startup ( ) ;
var url = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer" ;
var tiledLayer = new ArcGISTiledMapServiceLayer ( url, { "id" : "Ocean" } ) ;
app. map. addLayer ( tiledLayer) ;
var layer = new ArcGISDynamicMapServiceLayer ( "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer" , {
id: "County Population" ,
opacity: 0.5
} ) ;
layer. setVisibleLayers ( [ 3 ] ) ;
var layerDefs = [ ] ;
layerDefs[ 3 ] = "state_name = 'Louisiana'" ;
layer. setLayerDefinitions ( layerDefs) ;
var renderer = new ClassBreaksRenderer ( null , "pop2000" ) ;
var outline = new SimpleLineSymbol ( "solid" , new Color ( [ 0 , 0 , 0 , 0.5 ] ) , 1 ) ;
var colors = [
new Color ( [ 255 , 255 , 178 , 0.5 ] ) ,
new Color ( [ 254 , 204 , 92 , 0.5 ] ) ,
new Color ( [ 253 , 141 , 60 , 0.5 ] ) ,
new Color ( [ 240 , 59 , 32 , 0.5 ] ) ,
new Color ( [ 189 , 0 , 38 , 0.5 ] )
] ;
renderer. addBreak ( 0 , 20000 , new SimpleFillSymbol ( "solid" , outline, colors[ 0 ] ) ) ;
renderer. addBreak ( 20000 , 50000 , new SimpleFillSymbol ( "solid" , outline, colors[ 1 ] ) ) ;
renderer. addBreak ( 50000 , 100000 , new SimpleFillSymbol ( "solid" , outline, colors[ 2 ] ) ) ;
renderer. addBreak ( 10000 , 1000000 , new SimpleFillSymbol ( "solid" , outline, colors[ 3 ] ) ) ;
renderer. addBreak ( 1000000 , 10000000 , new SimpleFillSymbol ( "solid" , outline, colors[ 4 ] ) ) ;
var drawingOptions = new LayerDrawingOptions ( ) ;
drawingOptions. renderer = renderer;
var optionsArray = [ ] ;
optionsArray[ 3 ] = drawingOptions;
layer. setLayerDrawingOptions ( optionsArray) ;
app. map. addLayer ( layer) ;
arrayUtils. forEach ( [ "County Population" , "Ocean" ] , function ( id) {
new CheckBox ( {
id: "cb_" + id,
name: "cb_" + id,
checked: true ,
onChange: function ( bool) {
bool ?
app. map. getLayer ( this . id. split ( "_" ) [ 1 ] ) . show ( ) :
app. map. getLayer ( this . id. split ( "_" ) [ 1 ] ) . hide ( ) ;
}
} , domConstruct. create ( "input" , {
id: "lyr_" + id
} ) ) . placeAt ( dom. byId ( "layerToggle" ) ) ;
var label = domConstruct. create ( 'label' , {
"for" : "cb_" + id,
"innerHTML" : id
} ) ;
domConstruct. place ( label, dom. byId ( "layerToggle" ) ) ;
domConstruct. place ( domConstruct. create ( "br" ) , dom. byId ( "layerToggle" ) ) ;
} ) ;
app. symbols = { } ;
app. symbols. point = new SimpleMarkerSymbol ( "square" , 10 , new SimpleLineSymbol ( ) , new Color ( [ 0 , 255 , 0 , 0.75 ] ) ) ;
app. symbols. polyline = new SimpleLineSymbol ( "solid" , new Color ( [ 255 , 128 , 0 ] ) , 2 ) ;
app. symbols. polygon = new SimpleFillSymbol ( ) . setColor ( new Color ( [ 255 , 255 , 0 , 0.25 ] ) ) ;
app. symbols. circle = new SimpleFillSymbol ( ) . setColor ( new Color ( [ 0 , 0 , 180 , 0.25 ] ) ) ;
query ( ".drawing" ) . forEach ( function ( btn) {
var button = new Button ( {
label: btn. innerHTML,
onClick: function ( ) {
activateTool ( this . id) ;
}
} , btn) ;
} ) ;
function activateTool ( type) {
app. tool = type. replace ( "freehand" , "" ) ;
app. toolbar. activate ( type) ;
app. map. hideZoomSlider ( ) ;
}
function addToMap ( evt) {
app. toolbar. deactivate ( ) ;
app. map. showZoomSlider ( ) ;
var graphic = new Graphic ( evt. geometry, app. symbols[ app. tool] ) ;
app. map. graphics. add ( graphic) ;
}
} ) ;
</ script> </ head> < bodyclass = " nihilo" > < divid = " mainWindow" data-dojo-type = " dijit/layout/BorderContainer" data-dojo-props = " design:' headline' ,gutters:false"
style =" width : 100%; height : 100%; margin : 0; " > < divid = " header" data-dojo-type = " dijit/layout/ContentPane" data-dojo-props = " region:' top' " > < divid = " subheader" > </ div> </ div> < divid = " map" class = " shadow" data-dojo-type = " dijit/layout/ContentPane" data-dojo-props = " region:' center' " > < divid = " ds" > < divid = " ds-h" > < divclass = " ds h1 o1" > </ div> < divclass = " ds h2 o2" > </ div> < divclass = " ds h3 o3" > </ div> < divclass = " ds h4 o4" > </ div> < divclass = " ds h5 o5" > </ div> </ div> < divid = " ds-r" > < divclass = " ds v1 o1" > </ div> < divclass = " ds v2 o2" > </ div> < divclass = " ds v3 o3" > </ div> < divclass = " ds v4 o4" > </ div> < divclass = " ds v5 o5" > </ div> </ div> </ div> </ div> < divid = " rightPane" data-dojo-type = " dijit/layout/ContentPane" data-dojo-props = " region:' right' " > < divid = " printButton" > </ div> < hr/> < divid = " drawingWrapper" > < divid = " point" class = " drawing" > </ div> < divid = " freehandpolyline" class = " drawing" > </ div> < divid = " freehandpolygon" class = " drawing" > </ div> < divid = " circle" class = " drawing" > </ div> </ div> < hr/> < divid = " layerToggle" > < br/> </ div> </ div> </ div> </ body> </ html> 配置环境，就是我们 JavaScript 加载包的环境 定义我们的天地图加载组件 在UI界面调用我们的组件 <!DOCTYPE html>
< htmlxmlns = " http://www.w3.org/1999/xhtml" > < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" /> < title> </ title> < linkrel = " stylesheet" href = " http://localhost:13103/js/esri/css/esri.css" > < scripttype = " text/javascript" >
dojoConfig = {
parseOnLoad: true ,
packages: [ { name: 'tdlib' , location: this . location. pathname. replace ( /\/[^/]+$/ , "" ) + "/js/tdlib" } ]
} ;
</ script> < scriptsrc = " http://localhost:13103/js/init.js" > </ script> < script>
var map;
require ( [
"esri/map" ,
"tdlib/TDTLayer" ,
"tdlib/TDTAnnoLayer" ,
"esri/layers/FeatureLayer" ,
"esri/geometry/Point" ,
"esri/symbols/SimpleFillSymbol" ,
"esri/symbols/SimpleLineSymbol" ,
"dojo/_base/Color" ,
"dojo/domReady!"
] , function (
Map,
TDTLayer,
TDTAnnoLayer,
FeatureLayer,
Point,
SimpleFillSymbol,
SimpleLineSymbol,
Color
) {
map = new Map ( "map" , { logo: false } ) ;
var basemap = new TDTLayer ( ) ;
map. addLayer ( basemap) ;
var annolayer = new TDTAnnoLayer ( ) ;
map. addLayer ( annolayer) ;
var pt = new Point ( 103.847 , 36.0473 ) ;
map. centerAndZoom ( pt, 3 ) ;
} ) ;
</ script> </ head> < body> < divid = " map" > </ div> </ body> </ html> 获取坐标点 使用时间组件 <!DOCTYPE html>
< html> < head> < metahttp-equiv = " Content-Type" content = " text/html; charset=utf-8" > < metaname = " viewport" content = " initial-scale=1, maximum-scale=1,user-scalable=no" > < title> </ title> < linkrel = " stylesheet" href = " http://localhost:13103/js/dijit/themes/claro/claro.css" > < linkrel = " stylesheet" href = " http://localhost:13103/js/esri/css/esri.css" > < style>
body, html, #main {
margin : 0;
padding : 0;
height : 100%;
width : 100%;
}
</ style> < scriptsrc = " http://localhost:13103/js/init.js" > </ script> < script>
var map, serviceAreaTask, params, clickpoint;
require ( [
"esri/map" ,
"esri/config" ,
"esri/tasks/ServiceAreaTask" ,
"esri/tasks/ServiceAreaParameters" ,
"esri/tasks/FeatureSet" ,
"esri/symbols/SimpleMarkerSymbol" ,
"esri/symbols/SimpleLineSymbol" ,
"esri/symbols/SimpleFillSymbol" ,
"esri/geometry/Point" ,
"esri/graphic" ,
"dojo/parser" ,
"dojo/dom" ,
"dijit/registry" ,
"esri/Color" ,
"dojo/_base/array" ,
"dijit/layout/BorderContainer" ,
"dijit/layout/ContentPane" ,
"dijit/form/HorizontalRule" ,
"dijit/form/HorizontalRuleLabels" ,
"dijit/form/HorizontalSlider" ,
"dojo/domReady!"
] , function (
Map,
esriConfig,
ServiceAreaTask,
ServiceAreaParameters,
FeatureSet,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Point,
Graphic,
parser,
dom,
registry,
Color,
arrayUtils
) {
parser. parse ( ) ;
esriConfig. defaults. io. proxyUrl = "/proxy/" ;
map = new Map ( "map" , {
basemap: "streets" ,
center: [ - 122.447 , 37.781 ] ,
zoom: 15
} ) ;
map. on ( "click" , mapClickHandler) ;
params = new ServiceAreaParameters ( ) ;
params. defaultBreaks= [ 1 ] ;
params. outSpatialReference = map. spatialReference;
serviceAreaTask = new ServiceAreaTask ( "https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area" ) ;
registry. byId ( "hslider" ) . on ( "change" , updateHorizontalLabel) ;
updateHorizontalLabel ( ) ;
function updateHorizontalLabel ( ) {
var hSlider = registry. byId ( "hslider" ) ;
var label = dom. byId ( "decValue" ) ;
label. innerHTML = hSlider. get ( "value" ) ;
params. defaultBreaks = [ hSlider. value / 60 ] ;
if ( clickpoint) {
mapClickHandler ( clickpoint) ;
}
}
function mapClickHandler ( evt) {
clickpoint = evt;
map. graphics. clear ( ) ;
var pointSymbol = new SimpleMarkerSymbol (
"diamond" ,
20 ,
new SimpleLineSymbol (
"solid" ,
new Color ( [ 88 , 116 , 152 ] ) , 2
) ,
new Color ( [ 88 , 116 , 152 , 0.45 ] )
) ;
var inPoint = new Point ( evt. mapPoint. x, evt. mapPoint. y, map. spatialReference) ;
var location = new Graphic ( inPoint, pointSymbol) ;
map. graphics. add ( location) ;
var features = [ ] ;
features. push ( location) ;
var facilities = new FeatureSet ( ) ;
facilities. features = features;
params. facilities = facilities;
serviceAreaTask. solve ( params, function ( solveResult) {
var polygonSymbol = new SimpleFillSymbol (
"solid" ,
new SimpleLineSymbol ( "solid" , new Color ( [ 232 , 104 , 80 ] ) , 2 ) ,
new Color ( [ 232 , 104 , 80 , 0.25 ] )
) ;
arrayUtils. forEach ( solveResult. serviceAreaPolygons, function ( serviceArea) {
serviceArea. setSymbol ( polygonSymbol) ;
map. graphics. add ( serviceArea) ;
} ) ;
} , function ( err) {
console. log ( err. message) ;
} ) ;
}
} ) ;
</ script> </ head> < bodyclass = " claro" > < divdata-dojo-type = " dijit/layout/BorderContainer" data-dojo-props = " design:' headline' , gutters:false" style =" width : 100%; height : 100%; margin : 0px; " > < divdata-dojo-type = " dijit/layout/ContentPane" data-dojo-props = " region:' top' " > < b> </ b> < div style =" width : 400px; margin : 10px" > < oldata-dojo-type = " dijit/form/HorizontalRuleLabels" data-dojo-props = "
container: ' topDecoration' ,
style: ' height: 1.2em; font-weight: bold; margin: 0 12px;' " > < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ol> < divdata-dojo-type = " dijit/form/HorizontalRule" data-dojo-props = "
container: ' topDecoration' ,
count: 7,
style: ' height: 5px; margin: 0 12px;' " > </ div> < inputid = " hslider" value = " 60" type = " range" data-dojo-type = " dijit/form/HorizontalSlider" data-dojo-props = "
minimum: 0,
maximum: 120,
showButtons: false,
discreteValues: 25" > < div style =" padding-top : 10px; text-align : center; " > < strongid = " decValue" > </ strong> </ div> </ div> </ div> < divid = " map" dojotype = " dijit/layout/ContentPane" data-dojo-props = " region:' center' " > </ div> </ div> </ body> </ html> <!DOCTYPE html>
< html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " initial-scale=1,maximum-scale=1,user-scalable=no" > < title> </ title> < style>
html, body, #viewDiv {
padding : 0;
margin : 0;
height : 100%;
width : 100%;
}
#paneDiv {
position : absolute;
top : 10px;
left : 62px;
padding : 0 12px 0 12px;
background-color : rgba ( 0, 0, 0, 0.5) ;
color : white;
}
</ style> < linkrel = " stylesheet" href = " https://js.arcgis.com/4.0/esri/css/main.css" > < scriptsrc = " https://js.arcgis.com/4.0/" > </ script> < script>
require ( [
"esri/Map" ,
"esri/views/MapView" ,
"esri/Graphic" ,
"esri/layers/GraphicsLayer" ,
"esri/tasks/RouteTask" ,
"esri/tasks/support/RouteParameters" ,
"esri/tasks/support/FeatureSet" ,
"esri/symbols/SimpleMarkerSymbol" ,
"esri/symbols/SimpleLineSymbol" ,
"esri/Color" ,
"esri/core/urlUtils" ,
"dojo/on" ,
"dojo/domReady!"
] , function (
Map,
MapView,
Graphic,
GraphicsLayer,
RouteTask,
RouteParameters,
FeatureSet,
SimpleMarkerSymbol,
SimpleLineSymbol,
Color,
urlUtils,
on
) {
urlUtils. addProxyRule ( {
urlPrefix: "route.arcgis.com" ,
proxyUrl: "/sproxy/"
} ) ;
var routeTask = new RouteTask ( {
url: "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"
} ) ;
var routeLyr = new GraphicsLayer ( ) ;
var routeParams = new RouteParameters ( {
stops: new FeatureSet ( ) ,
outSpatialReference: {
wkid: 3857
}
} ) ;
var stopSymbol = new SimpleMarkerSymbol ( {
style: "cross" ,
size: 15 ,
outline: {
width: 4
}
} ) ;
var routeSymbol = new SimpleLineSymbol ( {
color: [ 0 , 0 , 255 , 0.5 ] ,
width: 5
} ) ;
var map = new Map ( {
basemap: "streets" ,
layers: [ routeLyr]
} ) ;
var view = new MapView ( {
container: "viewDiv" ,
map: map,
center: [ - 117.195 , 34.057 ] ,
zoom: 14
} ) ;
on ( view, "click" , addStop) ;
function addStop ( evt) {
var stop = new Graphic ( {
geometry: evt. mapPoint,
symbol: stopSymbol
} ) ;
routeLyr. add ( stop) ;
routeParams. stops. features. push ( stop) ;
if ( routeParams. stops. features. length >= 2 ) {
routeTask. solve ( routeParams) . then ( showRoute) ;
}
}
function showRoute ( data) {
var routeResult = data. routeResults[ 0 ] . route;
routeResult. symbol = routeSymbol;
routeLyr. add ( routeResult) ;
}
} ) ;
</ script> </ head> < body> < divid = " viewDiv" > </ div> < divid = " paneDiv" > < div> </ div> </ div> </ body> </ html> 定义ServiceAreaTask，ServiceAreaParameters，发布/NAServer/Service Area 获取参考点 根据我们的参数，设置时间（ServiceAreaParameters 时间数字） 开始分析 展现在地图中 <!DOCTYPE html>
< html> < head> < metahttp-equiv = " Content-Type" content = " text/html;charset=utf-8" /> < title> </ title> < linkrel = " stylesheet" type = " text/css" href = " http://localhost:13103/js/dijit/themes/tundra/tundra.css" /> < linkrel = " stylesheet" type = " text/css" href = " http://localhost:13103/js//esri/css/esri.css" /> < scripttype = " text/javascript" src = " http://localhost:13103/js/init.js" > </ script> < scripttype = " text/javascript" >
dojo. require ( "esri.map" ) ;
dojo. require ( "esri.toolbars.draw" ) ;
dojo. require ( "esri.graphic" ) ;
dojo. require ( "esri.layers.graphics" ) ;
dojo. require ( "esri.geometry" ) ;
var ptcount = "2768854.912601498,-1111489.0981985647/4079902.8217484932,-1091921.2189575648/6750918.338144982,-945162.1246500653/" ;
var list;
var defaultSymbol;
var myMap;
var icount;
var i = 0 ;
function ptcounntSplit ( ) {
list = ptcount. split ( "/" ) ;
icount= list. length;
}
function pPosition ( ) {
var point = new esri. geometry. Point ( 2671015.5163964974 , - 1708309.4150490611 , new esri. SpatialReference ( { wkid: 102100 } ) ) ;
var infoTemplate = new esri. InfoTemplate ( "<a href='javascript:showDetail()'>查看详情</a>" ) ;
var symbol = new esri. symbol. SimpleMarkerSymbol ( ) ;
var graphic = new esri. Graphic ( point, symbol, null , infoTemplate) ;
myMap. graphics. add ( graphic) ;
myMap. centerAt ( point) ;
}
function gocount ( ) {
var pointSymbol = new esri. symbol. SimpleMarkerSymbol ( ) ;
pointSymbol. setOutline= new esri. symbol. SimpleLineSymbol ( esri. symbol. SimpleLineSymbol. STYLE_SOLID , new dojo. Color ( [ 255 , 123 , 222 ] ) , 10 ) ;
pointSymbol. setSize ( 20 ) ;
pointSymbol. setColor ( new dojo. Color ( [ 0 , 255 , 0 , 0.25 ] ) ) ;
var geometry = new esri. geometry. Point ( list[ i] . substring ( 0 , list[ i] . indexOf ( ',' ) ) , list[ i] . substring ( list[ i] . indexOf ( ',' ) + 1 , list[ i] . length) , new esri. SpatialReference ( { wkid: 102100 } ) ) ;
var graphic = new esri. Graphic ( geometry, pointSymbol) ;
myMap. graphics. add ( graphic) ;
var extent = myMap. extent;
if ( ! extent. contains ( graphic. geometry) ) {
myMap. centerAt ( geometry) ;
}
i++ ;
}
function gos ( ) {
gocount ( ) ;
if ( i < icount- 1 ) {
setTimeout ( "gos()" , "2000" ) ;
}
else {
clearTimeout ( "gos()" ) ;
}
}
function init ( ) {
myMap = new esri. Map ( "mapDiv" ) ;
var myTiledMapServiceLayer = new esri. layers. ArcGISTiledMapServiceLayer ( "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer" ) ;
myMap. addLayer ( myTiledMapServiceLayer) ;
myMap. setZoom ( 4 ) ;
}
dojo. addOnLoad ( init) ;
</ script> </ head> < bodyclass = " tundra" > < table> < tr> < td> < divid = " mapDiv" style =" width : 1500px; height : 800px; border : 1px solid #000; " > </ div> </ td> < td> < inputid = " Button1" type = " button" value = " 定位" onclick = ' pPosition()' /> < inputid = " Button2" type = " button" value = " 回放" onclick = ' ptcounntSplit(); gos()' /> </ td> </ tr> </ table> < divid = " div1" > </ div> < divid = " div2" >
</ div> </ body> </ html> <!DOCTYPE html>
< html> < head> < metacharset = " utf-8" > < title> </ title> < linkrel = " stylesheet" href = " http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css" /> < linkrel = " stylesheet" href = " http://js.arcgis.com/3.9/js/esri/css/esri.css" > < linkhref = " ChartInfoWindow.css" rel = " stylesheet" /> < style>
html, body, #map {
height : 100%;
margin : 0;
padding : 0;
}
</ style> < script>
var dojoConfig = {
packages: [ {
name: "CustomModules" ,
location: location. pathname. replace ( /\/[^/]+$/ , "" ) + "/js/CustomModules"
} ]
} ;
</ script> < scriptsrc = " http://js.arcgis.com/3.9/" > </ script> < script>
require ( [
"esri/map" ,
"esri/layers/FeatureLayer" ,
"esri/layers/ArcGISTiledMapServiceLayer" ,
"esri/symbols/SimpleLineSymbol" ,
"esri/symbols/SimpleFillSymbol" ,
"esri/renderers/SimpleRenderer" ,
"esri/Color" ,
"CustomModules/ChartInfoWindow" ,
"CustomModules/CustomTheme" ,
"CustomModules/geometryUtils" ,
"dojo/_base/array" ,
"dojo/dom-construct" ,
"dojo/_base/window" ,
"dojox/charting/Chart" ,
"dojox/charting/action2d/Highlight" ,
"dojox/charting/action2d/Tooltip" ,
"dojox/charting/plot2d/Pie" ,
"dojo/domReady!"
] , function (
Map,
FeatureLayer,
ArcGISTiledMapServiceLayer,
SimpleLineSymbol,
SimpleFillSymbol,
SimpleRenderer,
Color,
ChartInfoWindow,
CustomTheme,
geometryUtils,
array,
domConstruct,
win,
Chart,
Highlight,
Tooltip
) {
var map = new Map ( "map" , {
center: [ - 95.625 , 39.243 ] ,
zoom: 4 ,
slider: false
} ) ;
var agoServiceURL = "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" ;
var agoLayer = new ArcGISTiledMapServiceLayer ( agoServiceURL) ;
map. addLayer ( agoLayer) ;
var featureLayer = new FeatureLayer ( "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1" , {
mode: FeatureLayer. MODE_SNAPSHOT ,
outFields: [ "STATE_NAME" , "WHITE" , "BLACK" , "AMERI_ES" , "ASIAN_PI" , "OTHER" ]
} ) ;
var defaultSymbol = new SimpleFillSymbol ( ) . setStyle ( SimpleFillSymbol. STYLE_NULL ) ;
var renderer = new SimpleRenderer ( defaultSymbol) ;
featureLayer. setRenderer ( renderer) ;
featureLayer. on ( "update-end" , function ( evt) {
var showFields = [ "WHITE" , "BLACK" , "AMERI_ES" , "ASIAN_PI" , "OTHER" ] ;
createChartInfoWindow ( featureLayer, showFields) ;
} ) ;
map. addLayer ( featureLayer) ;
function createChartInfoWindow ( layer, showFields) {
var layerId = layer. id;
var featureSums = [ ] ;
array. forEach ( layer. graphics, function ( graphic) {
var sum = 0 ;
for ( var i = 0 , j = showFields. length; i < j; i++ ) {
sum += graphic. attributes[ showFields[ i] ] ;
}
featureSums. push ( sum) ;
} ) ;
var sumMax = - 10000 ;
array. forEach ( featureSums, function ( featureSum) {
if ( sumMax < featureSum) sumMax = featureSum;
} ) ;
array. forEach ( layer. graphics, function ( graphic, index) {
var infoWindow = new ChartInfoWindow ( {
domNode: domConstruct. create ( 'div' , null , document. getElementById ( 'map' ) )
} ) ;
infoWindow. setMap ( map) ;
var curSum = 0 ;
for ( var i = 0 , j = showFields. length; i < j; i++ ) {
curSum += layer. graphics[ index] . attributes[ showFields[ i] ] ;
}
var radius = 80 * curSum / sumMax;
var styleStr = "width:" + radius + "px;height:" + radius + "px" ;
var nodeChart = domConstruct. create ( "div" , { id: 'nodeTest' + index, style: styleStr } , win. body ( ) ) ;
var chart = makePieChart ( nodeChart, layer. graphics[ index] . attributes, showFields) ;
infoWindow. resize ( radius + 2 , radius + 2 ) ;
infoWindow. align = "Center" ;
var labelPt = geometryUtils. getPolygonCenterPoint ( graphic. geometry) ;
infoWindow. setContent ( nodeChart) ;
infoWindow. __mcoords = labelPt;
infoWindow. show ( map. toScreen ( labelPt) ) ;
} ) ;
}
function makePieChart ( node, attributes, showFields) {
var chart = new Chart ( node, { margins: { l: 0 , r: 0 , t: 0 , b: 0 } } ) .
setTheme ( CustomTheme) .
addPlot ( "default" , { type: "Pie" } ) ;
var serieValues = [ ] ;
var regionName = attributes[ "STATE_NAME" ] ;
var length = showFields. length;
for ( var i = 0 ; i < length; i++ ) {
serieValues. push ( { y: attributes[ showFields[ i] ] , legend: showFields[ i] , region: regionName } ) ;
}
chart. addSeries ( showFields[ i] , serieValues, { stroke: { color: "black" } } ) ;
var anim1 = new Highlight ( chart, "default" , {
highlight: function ( e) {
return "lightskyblue" ;
}
} ) ;
var anim2 = new Tooltip ( chart, "default" , {
text: function ( o) {
var fieldName = o. chart. series[ 0 ] . data[ o. x] . legend;
return ( o. chart. series[ 0 ] . data[ o. x] . region + " " + fieldName + "：" + o. y) ;
}
} ) ;
chart. render ( ) ;
return chart;
}
} ) ;
</ script> </ head> < bodyclass = " claro" > < divid = " map" > </ div> </ body> </ html> ## ChartInfoWindow. js
define ( [
"dojo/_base/declare" ,
"esri/InfoWindowBase" ,
"esri/domUtils" ,
"esri/geometry/Point" ,
"dojo/_base/lang" ,
"dojo/dom-class" ,
"dojo/dom-construct" ,
"dojo/dom-style" ,
"dojo/_base/array"
] , function (
declare,
InfoWindowBase,
domUtils,
Point,
lang,
domClass,
domConstruct,
domStyle,
array
) {
return declare (
InfoWindowBase, {
coords: null ,
align: "Middle_Top" ,
constructor: function ( parameters) {
lang. mixin ( this , parameters) ;
isContentShowing = false ;
domClass. add ( this . domNode, "myInfoWindow" ) ;
this . _content = domConstruct. create ( "div" , { "class" : "content" } , this . domNode) ;
this . _eventConnections = [ ] ;
domUtils. hide ( this . domNode) ;
this . isShowing = false ;
} ,
setMap: function ( map) {
this . inherited ( arguments) ;
this . _eventConnections. push ( map. on ( "pan" , lang. hitch ( this , this . __onMapPan) ) ) ;
this . _eventConnections. push ( map. on ( "extent-change" , lang. hitch ( this , this . __onMapExtChg) ) ) ;
this . _eventConnections. push ( map. on ( "zoom-start" , lang. hitch ( this , this . __onMapZmStart) ) ) ;
this . _eventConnections. push ( map. on ( "zoom" , lang. hitch ( this , this . onMapZm) ) ) ;
} ,
setContent: function ( content) {
this . place ( content, this . _content) ;
} ,
move: function ( point, isDelta) {
if ( isDelta) {
point = this . coords. offset ( point. x, point. y) ;
}
else {
this . coords = point;
if ( this . mapCoords) {
this . mapCoords = this . map. toMap ( point) ;
}
}
this . _adjustPosition ( point) ;
} ,
__onMapPan: function ( evt) {
this . move ( evt. delta, true ) ;
} ,
onMapZm: function ( evt) {
var extent = evt. extent, zoomFactor = evt. zoomFactor, anchor = evt. anchor;
var x = ( this . coords. x - anchor. x) * zoomFactor + anchor. x;
var y = ( this . coords. y - anchor. y) * zoomFactor + anchor. y;
var newPostion = new Point ( x - this . coords. x, y - this . coords. y) ;
this . move ( newPostion, true ) ;
} ,
__onMapZmStart: function ( ) { } ,
__onMapExtChg: function ( evt) {
var extent = evt. extent, delta = evt. delta, levelChange = evt. levelChange;
var map = this . map, mapPoint = this . mapCoords;
if ( mapPoint) {
if ( this . isShowing == true ) {
this . show ( mapPoint) ;
}
}
else {
var screenPoint;
if ( levelChange) {
screenPoint = map. toScreen ( this . __mcoords) ;
}
else {
screenPoint = this . coords. offset (
( delta && delta. x) || 0 ,
( delta && delta. y) || 0
) ;
}
if ( this . isShowing == true ) {
this . show ( screenPoint) ;
}
}
} ,
show: function ( location) {
if ( location. spatialReference) {
this . mapCoords = location;
location = this . map. toScreen ( location) ;
}
else {
this . mapCoords = null ;
this . coords = location;
if ( typeof ( this . __mcoords) === "undefined" ) {
}
}
this . _adjustPosition ( location) ;
domUtils. show ( this . domNode) ;
this . isShowing = true ;
this . onShow ( ) ;
} ,
hide: function ( ) {
domUtils. hide ( this . domNode) ;
this . isShowing = false ;
this . onHide ( ) ;
} ,
resize: function ( width, height) {
domStyle. set ( this . _content, {
width: width + "px" ,
height: height + "px"
} ) ;
if ( this . coords) {
this . _adjustPosition ( this . coords) ;
}
} ,
_adjustPosition: function ( location) {
var width = domStyle. get ( this . _content, "width" ) ;
var height = domStyle. get ( this . _content, "height" ) ;
var left = "" , top = "" ;
if ( this . align == "Center" ) {
left = ( location. x - width / 2 ) + "px" ;
top = ( location. y - height / 2 ) + "px" ;
}
else {
left = ( location. x - width / 2 ) + "px" ;
top = ( location. y - height) + "px" ;
}
domStyle. set ( this . domNode, {
left: left,
top: top
} ) ;
} ,
destroy: function ( ) {
array. forEach ( this . _eventConnections, function ( handle) {
handle. remove ( ) ;
} ) ;
domConstruct. destroy ( this . domNode) ;
this . _closeButton = this . _title = this . _content = this . _eventConnections = null ;
}
}
) ;
} ) ;
## CustomTheme. js
define ( [ "dojox/charting/Theme" , "dojo/_base/Color" ] , function ( Theme, Color) {
var CustomTheme = new Theme ( {
chart: {
stroke: null ,
fill: "inherit"
} ,
plotarea: {
stroke: null ,
fill: "transparent"
} ,
axis: {
stroke: null ,
majorTick: {
color: "black" ,
width: 1 ,
length: 0
} ,
minorTick: {
color: "#666" ,
width: 1 ,
length: 0
} ,
font: "normal normal normal 0pt Tahoma" ,
fontColor: "#999" ,
fill: "transparent"
} ,
series: {
outline: { width: 10 , color: "black" } ,
stroke: { width: 1 , color: "red" } ,
fill: new Color ( [ 0x3b , 0x44 , 0x4b , 0.85 ] ) ,
font: "normal normal normal 7pt Tahoma" ,
fontColor: "#717171"
} ,
marker: {
stroke: { width: 1 , color: "black" } ,
fill: "#333" ,
font: "normal normal normal 7pt Tahoma" ,
fontColor: "black"
} ,
colors: [
Color. fromRgb ( "rgb(152,141,194)" ) ,
Color. fromRgb ( "rgb(126,182,204)" ) ,
Color. fromRgb ( "rgb(108,217,150)" ) ,
Color. fromRgb ( "rgb(164,230,90)" ) ,
Color. fromRgb ( "rgb(242,166,65)" )
]
} ) ;
return CustomTheme;
} ) ;
## geometryUtils. js
define ( [ "esri/geometry/Point" , "esri/geometry/Extent" ] , function ( Point, Extent) {
var geometryUtils = { } ;
geometryUtils. getPolygonCenterPoint = function ( polygon) {
var momentX = 0 ;
var momentY = 0 ;
var weight = 0 ;
var ext = polygon. getExtent ( ) ;
var p0 = new Point ( [ ext. xmin, ext. ymin] ) ;
for ( var i = 0 ; i < polygon. rings. length; i++ ) {
var pts = polygon. rings[ i] ;
for ( var j = 0 ; j < pts. length - 1 ; j++ ) {
var p1 = polygon. getPoint ( i, j) ;
var p2;
if ( j == pts. length - 1 ) {
p2 = polygon. getPoint ( i, 0 ) ;
}
else {
p2 = polygon. getPoint ( i, j + 1 ) ;
}
var dWeight = ( p1. x - p0. x) * ( p2. y - p1. y) - ( p1. x - p0. x) * ( p0. y - p1. y) / 2 - ( p2. x - p0. x) * ( p2. y - p0. y) / 2 - ( p1. x - p2. x) * ( p2. y - p1. y) / 2 ;
weight = weight + dWeight;
var pTmp = new Point ( [ ( p1. x + p2. x) / 2 , ( p1. y + p2. y) / 2 ] ) ;
var gravityX = p0. x + ( pTmp. x - p0. x) * 2 / 3 ;
var gravityY = p0. y + ( pTmp. y - p0. y) * 2 / 3 ;
momentX = momentX + gravityX * dWeight;
momentY = momentY + gravityY * dWeight;
}
}
return new Point ( momentX / weight, momentY / weight, polygon. spatialReference) ;
} ;
return geometryUtils;
} ) ;
3169