arcgis_api_js | 易学教程

　1arcmap和arcatalog将离线地图发布并切片

2将api放到tomcat里启动并修改init 和 dojo 【hostname】相关文件

3在前端代码中调出发布的地图服务相关代码simple的用于html 目前还没有进行jsp的测试

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="http://192.168.2.135:8080/MyMapTest/arcgis_js_api/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://192.168.2.135:8080/MyMapTest/arcgis_js_api/3.9/js/esri/css/esri.css" />
<script type="text/javascript" src="http://192.168.2.135:8080//MyMapTest/arcgis_js_api/3.9/init.js"></script>
<script type="text/javascript">
dojo.require("esri.map");
function init() {
var myMap = new esri.Map("mapDiv");
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://192.168.2.135:6080/arcgis/rest/services/huananqiepian/huaian/MapServer");
myMap.addLayer(myTiledMapServiceLayer);

}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;float: right;
"></div>
</body>

</html>

4在此地图上自定义图标（该图标可以点击并显示图框，点击图标后该图标可以任意移动）目前可以显示图标但是，显示了图标就没有办法显示地图了原因未知，正在研究；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://192.168.2.135:8081/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://192.168.2.135:8081/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
<script type="text/javascript" src="http://192.168.2.135:8081/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script type="text/javascript" src="dojo/jsapi_vsdoc10_v38.js"></script>
<script type="text/javascript">
dojo.require("esri.map");
function ready() {
var MyMap = new esri.Map("MyMapDiv");
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://192.168.2.135:6080/arcgis/rest/services/huananqiepian/huaian/MapServer");
var point = new esri.geometry.Point(118.0605760000, 36.8424320000, MyMap.spatialReference);
//地图首次加载显示的位置和放大级别
MyMap.centerAndZoom(point, 8);
MyMap.addLayer(myTiledMapServiceLayer);

//创建图层
var graphicLayer = new esri.layers.GraphicsLayer();
//把图层添加到地图上
MyMap.addLayer(graphicLayer);

//设置标注的经纬度
//方法一
var pt = new esri.geometry.Point(118.0605760000, 36.8424320000, MyMap.spatialReference);
//方法二
// var pt = new esri.geometry.geographicToWebMercator(new esri.geometry.Point({
// "x": 118.0605760000,
// "y": 36.8424320000,
// "spatialReference": { "wkid": 102113 }
// }));

//设置标注显示的图标
//var symbol = new esri.symbol.SimpleMarkerSymbol();
var symbol = new esri.symbol.PictureMarkerSymbol("images/red.png", 25, 25);

//要在模版中显示的参数
var attr = { "address": "山东省淄博市张店区" };

//创建模版
var infoTemplate = new esri.InfoTemplate("标题", "地址:${address}");
//创建图像
var graphic = new esri.Graphic(pt, symbol, attr, infoTemplate);//1设置标志经纬度2标志实体（图片，像素）3模板4弹框名和内容
//把图像添加到刚才创建的图层上
graphicLayer.add(graphic);

//注册事件，注意事件名大小写敏感
//鼠标在地图上移动地图坐标的事件
dojo.connect(MyMap, "onMouseMove", showCoordinates);
//鼠标按下后，拖动地图显示坐标的事件
dojo.connect(MyMap, "onMouseDrag", showCoordinates);
}
dojo.addOnLoad(ready);

//显示地图坐标
function showCoordinates(evt)
{
var mp = evt.mapPoint;
dojo.byId("info").innerHTML = "坐标：" + mp.x + " , " + mp.y;
}
</script>
</head>
<body>
<div id="MyMapDiv" style="width:900px; height:600px; border:1px solid #000;float: right;
"></div>
</body>
</html>

来源：https://www.cnblogs.com/select1990/p/5853800.html

标签

js代码

var

dojo

esri