var map
require(["esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/symbols/PictureMarkerSymbol",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/InfoTemplate",
"js/geojsonlayer","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/Color","esri/renderers/SimpleRenderer",
"dojo/dom-class", "dojo/dom-construct", "dojo/on",
"dojo/domReady!"
],
function(Map, ArcGISTiledMapServiceLayer, Point, SpatialReference,PictureMarkerSymbol,Graphic,GraphicsLayer,TextSymbol,Font,Popup,PopupTemplate,InfoTemplate,GeoJsonLayer,SimpleFillSymbol,SimpleLineSymbol, Color,SimpleRenderer, domClass, domConstruct, on,) {
//点击标签
var popup = new Popup({
offsetX: 10,
offsetY: 10,
zoomFactor: 2
}, domConstruct.create("div"));
domClass.add(popup);
//非84坐标，必须设置空间参考
map = new Map("map", {
//basemap:"streets",
center: new Point(119.742281,31.77234, new SpatialReference({ wkid: 4490 })),
zoom:18,
infoWindow: popup
});
//ArcGISTiledMapServiceLayer加载天地图效果最好
var Dynamiclayer0 = new ArcGISTiledMapServiceLayer("http://58.216.48.11:6080/arcgis/rest/services/CZ_Vector/MapServer");
map.addLayer(Dynamiclayer0);
//arcgis一般以服务形式加载矢量，不可直接加载geojson，这里需要geojsonlayer.js，需要在html中设置js文件夹，然后require调用，通过geojsonlayer函数渲染，
//GeoJsonLayer和GraphicsLayer类似，可以设置symbol,可以进行渲染
//设置线要素1形状和颜色、宽度
var sls0 = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASH,
new Color([255,0,0]),
1
);
//SimpleRenderer方式渲染线要素1
var renderer0 = new SimpleRenderer(sls0);
var sls1 = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASH,
new Color([65,105,225]),
1
);
var renderer1 = new SimpleRenderer(sls1);
var sls2 = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new Color([65,105,225]),
);
var renderer2 = new SimpleRenderer(sls2);
//添加矢量线要素
var yc = new GeoJsonLayer({
url: "yc.geojson"
});
//设置其渲染器
yc.setRenderer(renderer0)
//添加到图层
map.addLayer(yc);
var school = new GeoJsonLayer({
url:'xuexiao.geojson'
})
school.setRenderer(renderer1)
map.addLayer(school);
$("#map0").click(function(){
$("#map").show();
$("#cesiumContainer").hide();
$(".map1").show();
$(".map2").hide();
$(".sat2").show();
$(".sat1").hide();
$(".3dmap1").hide();
$(".3dmap2").show();
Dynamiclayer0.show();
Dynamiclayer2.hide();
})
$("#sat").click(function(){
$("#map").show();
$("#cesiumContainer").hide();
$(".map1").hide();
$(".map2").show();
$(".sat2").hide();
$(".sat1").show();
$(".3dmap1").hide();
$(".3dmap2").show();
Dynamiclayer0.hide();
Dynamiclayer2.show();
})
//h5定位
$("#pos").click(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
latitude = position.coords.latitude; //获取纬度
longitude = position.coords.longitude; //获取经度
var point = new Point(longitude,latitude, new SpatialReference({ wkid: 4490 }))
map.centerAt(point)
var pictureMarkerSymbol = new PictureMarkerSymbol('./image1/career.png', 51, 51);
var gl = new GraphicsLayer({ id: "circ" });
var icon = new Graphic(points,pictureMarkerSymbol)
gl.add(icon)
map.addLayer(gl);
});
} else {
alert("不支持定位功能");
}
})
var sr = new SpatialReference({ wkid: 4490 })
var font = new Font("15pt");
font.setFamily("sans-serif")
//设置图片标签格式
var pictureMarkerSymbol = new PictureMarkerSymbol('./image1/career.png', 51, 51);
var gl = new GraphicsLayer({ id: "circles" });
gl.hide()
function ziyuan(x,y,name,info){ //此函数用于设置点击标签，以及点击弹出的窗体内容
var points = new Point(x,y,sr)
var textSym = new TextSymbol(name).setOffset(3,25);
textSym.setFont(font)
var infoTemplate = new InfoTemplate(name,info);
var icon = new Graphic(points,pictureMarkerSymbol);
icon.setInfoTemplate(infoTemplate);
var text = new Graphic(points,textSym);
gl.add(icon)
gl.add(text)
map.addLayer(gl);
}
var z0=ziyuan(119.73955856951238,31.77328947914064,"常州交通技师学院","<p align='left'>地址：常州钟楼区殷村路5号(殷村职教园内)</p>" +
"<p align='left'>学院是一所融技师、高级工、中级工等技能教育和本科、大专等高等学历教育于一体的全日制公办职业学校。学院是“国家级重点技工学校”和“交通部规范化学校”，先后荣获“全国汽车职教示范基地”、“江苏省文明单位”、“江苏省高技能人才摇篮奖”等荣誉。</p>")
$("#big").click(function () {
map.setZoom(map.getZoom()+1) //zoom+1
});
$("#small").click(function () {
map.setZoom(map.getZoom()-1)
})
$("#edu").click(function(){
if(gl.visible){
gl.hide()
}else{
gl.show();
var point = new Point(119.74024,31.77461, new SpatialReference({ wkid: 4490 }))
map.centerAt(point)//二维中设置视野移动
}
})
})
转载自原文链接, 如需删除请联系管理员。
原文链接：arcgis3天地图，转载请注明来源！