创建完成后,在container中引用。
最终,小伙伴们,我们成功利用ArcGIS API for JavaScript 4.6,构建了第一个Web应用程序,效果请戳下面链接 http://jiegiser.win/arcgisAPI/creat2Dmap.html
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script><script type="text/javascript" src="http://api.tianditu.com/js/service.js"></script>
<title>行政区域</title>
<script type="text/javascript">
var zoom = 10
var wmsLayer
var localsearch
var map
var lay
function onLoad() {
var config = { projection: "EPSG:4326"}
//map实例
map = new TMap("mapDiv",config)
//设置显示地图的中心点和级别
map.centerAndZoom(new TLngLat(106.38848,38.995728), zoom)
//允许鼠标滚轮缩放地图
map.enableHandleMouseScroll()
//允许双击地图放大
map.enableDoubleClickZoom()
getWMS()
}
function getWMS(){
if(wmsLayer)
{
map.removeLayer(wmsLayer)
}
var config = {
REQUEST:"GetMap", // *** 作名称
VERSION:"1.1.1", //请求服务的版本
SERVICE:"WMS", //服务类型标识符
LAYERS:"0", //用","分隔的多个图层列表
TRANSPARENT:true, //输出图像背景是否透明
STYLES:"default", //每个请求图层的用","分隔的描述样式
FORMAT:"image/png", //输出图像的类型
SRS:"EPSG:4326", //地图投影类型
WIDTH:256, //输出地图图片的像素宽
HEIGHT:256 //输出地图图片的像素高
}
wmsLayer = new TTileLayerWMS("wms","url",config)
//将WMS图层添加到地图上
map.addLayer(wmsLayer)
}
</script>
注意事项:
1.首先因为调用的是天地图的添加wms图层的方法,所以对于arcgis发布的图层服务,要求必须启用wms服务功能才可以。启用的时候会有一个地址,这个地址就是上面url的地址
2.在初始化地图的时候var config = { projection: "EPSG:4326"} 这个配置是需要的要不然 ,图层会添加失败。
3.对于config配置的项要注意的地方,LAYERS属性是你发布的服务的图层名称
FORMAT :"image/png" 这个属性也要注意,当时我写的是image/jpeg,出现了问题,改为png就正常了
以上 注意了,应该就不会有问题了。
上篇实现了 基础地图加载以及二三维模式切换 ;本篇的内容则是图层管理控制,从两个不同角度来实现,分别是直接绑定arcgis api提供的图层管理widget(LayerList)以及自定义图层管理图标的点击事件来控制图层的隐藏或者显示。不管是LayerList或者自定义图标点击管理图层的实现方式,核心都是根据Layer的属性visible来设置true或者false来控制的。
TileLayer,加载缓存地图服务的瓦片图层,缓存的服务访问缓存中的瓦片,而不是动态地绘制图像。由于缓存机制,所以渲染的速度比MapImageLayers快多了,适合叠加瓦片切图使用,而不是前端动态渲染的。
MapImageLayer,允许显示和分析在一个地图服务定义层数据,输出图像代替特征。地图服务图像是根据请求动态生成的。
ElevationLayer,即为加载地形高程的图层,应用在三维模式下显示。
SceneLayer,即为加载三维场景图层,应用在三维模式下显示。
LayerList,图层列表控制控件,提供了一种方法来显示一个列表的层以及提供控制图层隐藏或者显示。
1.上面描述的几个类型图层有个属性listMode,默认show,即是这些图层叠加在地图上,默认是在LayerList里面了的,要是LayerList创建的话
GIS之家新博客系列发布更新在GIS之家网站,欢迎关注收藏: GIS之家网站
GIS之家作品: GIS之家
GIS之家交流咨询: 咨询模式
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)