- 普通引用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Simple Map</title>
<link rel="stylesheet" type="text/css" href="http://localhost:7777/medvar/arcgis_js_api/3.17/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:7777/medvar/arcgis_js_api/3.17/esri/css/esri.css" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript" src="http://localhost:7777/medvar/arcgis_js_api/3.17/init.js"></script>
<script type="text/javascript">
var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
map = new Map("map", {
basemap: "topo",
center: [116.39, 39.90], //中心点经纬度
zoom: 7 //数字越小地图显示面积越大
});
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
- 引用arcgis Online上已编辑好的地图
<!DOCTYPE html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html,body,#mapDiv,.map.container{
padding:0;
margin:0;
height:100%;
}
#legendDiv{
background-color: #fff;
position: absolute !important;
z-index: 99;
top:10px;
right:20px;
}
</style>
<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="https://js.arcgis.com/3.26compact/"></script>
<script>
var map;
require([
"esri/map",
"esri/arcgis/utils",
"esri/dijit/Legend",
"dojo/domReady!"
], function(Map, arcgisUtils, Legend){
arcgisUtils.createMap("<MapId>", "mapDiv").then(function (response) {
map = response.map;
var legend = new Legend({
map: map,
layerInfos:(arcgisUtils.getLegendLayers(response))
}, "legendDiv");
legend.startup();
});
});
</script>
</head>
<body>
<div id="mapDiv"></div>
<div id="legendDiv"></div>
</body>
</html>
注： 其中MapId为用户已编辑好的在线地图的id
- 访问路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html,body,#mapDiv,.map.container{
padding:0;
margin:0;
height:100%;
}
#legendDiv{
background-color: #fff;
position: absolute !important;
z-index: 99;
top:10px;
right:20px;
}
</style>
<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="https://js.arcgis.com/3.26compact/"></script>
<script>
require([
"esri/map",
"esri/dijit/Directions",
"dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function (Map, Directions, parser) {
map = new Map("map", {
basemap: "topo",
center: [116.39, 39.90],
zoom: 7
});
var directions = new Directions({
map: map,
routeTaskUrl: "http://www.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer",
}, "dir");
directions.startup();
});
</script>
</head>
<body>
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'"
style="width:250px;">
<div id="dir"></div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
注：routeTaskUrl为网络分析服务路径，不写则使用默认的世界路由服务。
- 搜索插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style>
html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
#search { display: block; position: absolute; z-index: 3; top: 20px; left: 75px; }
/* 聚光灯效果 */
.spotlight {z-index:-1; position:absolute; left:50%; top:50%; border-radius:50%; opacity:0;box-shadow:inset rgba(0,0,0,0.25) 0px 0px 20px 20px,rgba(0,0,0,0.25) 0px 0px 0px 1000px; transition:all 1000ms; -moz-transition:all 1000ms; -webkit-transition:all 1000ms;}
.spotlight-active { z-index:2; opacity:1;}
</style>
<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="https://js.arcgis.com/3.26compact/"></script>
<script>
require([
"esri/map",
"esri/dijit/Search",
"esri/geometry/Extent",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/geometry/screenUtils",
"dojo/dom",
"dojo/dom-construct",
"dojo/query",
"dojo/_base/Color",
"dojo/domReady!"
], function (Map, Search, Extent, Graphic, SimpleMarkerSymbol, screenUtils, dom, domConstruct, query, Color) {
var map = new Map("map", {
basemap: "topo",
center: [-117.19, 34.055],
zoom: 15
});
//普通搜索
/*var search = new Search({
map: map,
}, dom.byId("search"));
search.startup();*/
//限制范围
var search = new Search({
map: map
}, "search");
//创建限制搜索的范围
var extent = new Extent({
"spatialReference": { "wkid": 102100},
"xmin": -13063280,
"xmax": -13033928,
"ymin": 4028345,
"ymax": 4042715
});
//将范围设置为上面指定的范围
search.sources[0].searchExtent = extent;
//启动小部件
search.startup();
map.on("load", enableSpotlight);
search.on("select-result", showLocation);
search.on("clear-search", removeSpotlight);
function enableSpotlight() {
var html = "<div id='spotlight' class='spotlight'></div>";
domConstruct.place(html, dom.byId("map_container"), "first");
}
function showLocation(e) {
map.graphics.clear();
var point = e.result.feature.geometry;
var symbol = new SimpleMarkerSymbol().setStyle(
SimpleMarkerSymbol.STYLE_SQUARE).setColor(
new Color([255,0,0,0.5])
);
var graphic = new Graphic(point, symbol);
map.graphics.add(graphic);
map.infoWindow.setTitle("Search Result");
map.infoWindow.setContent(e.result.name);
map.infoWindow.show(e.result.feature.geometry);
var spotlight = map.on("extent-change", function(extentChange) {
var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, e.result.extent);
var width = geom.xmax - geom.xmin;
var height = geom.ymin - geom.ymax;
var max = height;
if ( width > height ) {
max = width;
}
var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px'; query(".spotlight").addClass("spotlight-active"). style({
width: max + "px",
height: max + "px",
margin: margin
});
spotlight.remove();
});
}
//移除效果
function removeSpotlight() {
query(".spotlight").removeClass("spotlight-active");
map.infoWindow.hide();
map.graphics.clear();
}
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</body>
</html>
1218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
