相关学习文档官网
//HTML: http://www.w3schools.com/html/DEFAULT.asp
//JS:http://www.w3schools.com/js/DEFAULT.asp
//OpenLayers:http://www.openlayers.org
//OpenLayers中文官网：http://www.openlayers.cn/protal.php
一、Web地图API的选择
（一）FOSS(Free and Open Source Software)类型的Web地图API
- OpenLayers：一种Javascript API，使用较多但复杂
- Leftlet：更适用于移动设备，强调使用切片，可绘制GeoJSON，缺少代码实例
- D3：常用于绘制图表，可将数据绑定到页面的DOM（文档对象模型）上，对将图表和地图结合有优势
//D3地球仪实例：http://mbostock.github.io/d3/talk/20111018/azimuthal.html
（二）商业Web地图API
- 谷歌地图API：可将数据叠加到谷歌切片上，叠加数据多为KML文件
- 必应地图API：不注重KML使用，但源代码较多
- ArcGIS的API：最常用的为ArcGIS API for Javascript
二、使用Web地图API的基本步骤
1.在HTML的<head>引用Javascript和样式表css文件
2.在<body>设置地图div与对象
3.在<script>设置相关layer对象
4.进行图层样式化
5.为了进行交互，设置事件与交互元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引用内容分发网站CDN站点Javascript与样式表css文件 -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css">
<script>
var mymap=new OpenLayers.Map('map');//在API的Map类通过构造函数链接div的id，并实例化负值给变量mymap
var toProjection=new OpenLayers.Projection("EPSG:900913");//通过投影类的EPSG属性，实例化赋值给变量toProjection
var map=new OpenLayers.Map("map",{projection:toProjection});//再次用Map类，链接div并赋予div投影信息，赋值给新变量map
layer=new OpenLayers.Layer.WMS("WMS","https://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=980*700&markers=mid,,A:116.461485,39.840464&key=你的key",
{LAYERS:'',transparent:true},{singleTile:true,isBaseLayer:false});
var osm=new OpenLayers.Layer.OSM("Simple OSM Map");
map.addLayer([layer,osm]);
var fromProjection=new OpenLayers.Projection('EPSG:4326');
var groceryLayer=new OpenLayers.Layer.Vector('Grocery',{
projection:fromProjection,
strategies:[new OpenLayers.Strategy.Fiexd()],
protocol:new OpenLayers.Protocol.HTTP({
url:"https://restapi.amap.com/v3/bus/stopid?key=你的key&id=BV10006672&output=json",
format:new OpenLayers.Format.GeoJSON()
}),
style:{
externalGraphic:'./Learn/6Web的API访问地图服务/green-pin.png',
praghicWidth:25,
graphicHeight:25,
graphicYOffset:0
}
});
map.addLayer(groceryLayer);
//事件与交互元素（图层显隐）
function toggleLayerViz(layername){
var layerToToggle=map.getLayersByName(layername)[0];
if(layerToToggle.visibility){
layerToToggle.setVisibility(false);
}
else{
layerToToggle.setVisibility(true);
}
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
标签：
前端
本文转载自: https://blog.csdn.net/m0_73992303/article/details/136920099
版权归原作者 Geocken 所有， 如有侵权，请联系我们删除。
版权归原作者 Geocken 所有， 如有侵权，请联系我们删除。