地图瓦片下载请参考：F1V3.0-图形-如何下载及使用离线的瓦片地图
在自己的工程中新建html文件offlineMap.html（根据实际任意命名），在header节点内加入以下代码，引入f1平台组件：
<script type="text/javascript"> function getRootPath() { var pathName = window.location.pathname.substring(1); var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/')); return window.location.protocol + '//' + window.location.host + '/'+ webName+'/'; } var basePath = getRootPath(); document.writeln("<base href='"+basePath+"'/>"); </script> <!--能够使用$importd导入资源--> <script type="text/javascript" src="jquery/src/jsloader-mini.js"></script> <!--引入平台组件--> <script type="text/javascript" src="jquery/src/globalvarible.js"></script>引入地图js类库
<script type="text/javascript"> // 是否开发模式 var developMode = false; </script> <script type="text/javascript" src="gis/scripts/src/Loader.js"></script>开始页面布局
<body class="f1-layout"> <div region="center" fit="true" id="mapContainer" style="overflow: hidden;"></div> </body>新建index.js文件，用来初始化地图和写自己的业务代码，并引入自己编写的js文件到页面
<script src="gis/app/psdpt/web/scripts/offlinemap/index.js"></script>最终的offlineMap.html内容如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>离线地图</title> <style type="text/css"> html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; } svg[x][y]{ cursor: pointer; } </style> <script type="text/javascript"> function getRootPath() { var pathName = window.location.pathname.substring(1); var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/')); //return window.location.protocol + '//' + window.location.host + '/'+ webName + '/'; return window.location.protocol + '//' + window.location.host + '/'+ webName+'/'; } var basePath = getRootPath(); document.writeln("<base href='"+basePath+"'/>"); </script> <script type="text/javascript" src="jquery/src/jsloader-mini.js"></script> <script type="text/javascript" src="jquery/src/globalvarible.js"></script> <script type="text/javascript"> var developMode = false; </script> <script type="text/javascript" src="gis/scripts/src/Loader.js"></script> <script src="gis/app/psdpt/web/scripts/offlinemap/index.js"></script> </head> <body class="f1-layout"> <div region="center" fit="true" id="mapContainer" style="overflow: hidden;"></div> </body> </html>在index.js文件中添加如下代码：
//定义地图全局变量 var map, baseLayer, vectorLayer; //页面加载完成后执行 $(function() { //定义坐标投影对象 var source = new OpenLayers.Projection("EPSG:4326"); var dest = new OpenLayers.Projection("EPSG:900913"); //初始化地图 map = new $F1Map.Map("mapContainer", { //最大范围 maxExtent: new OpenLayers.Bounds(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892), //能够缩放的层级数 numZoomLevels: 18, //最大解析率 maxResolution: 156543.033929687, //单位米 units: 'm', //设置地图投影 projection: "EPSG:900913", //图形是否随地图缩放而改变size大小 isGraphicsZoom: false }); //设置基础底图图层，加载离线瓦片 baseLayer = new $F1Map.Layer.GoogleTile( //图层名名称 "google_离线", //离线瓦片的url地址，到根目录位置即可 "static/MapTileDownload/googlemaps/roadmap/" ); //定义矢量图层 vectorLayer = new $F1Map.Layer.Vector("vectorlayer", { //根据此类型码加载所需的图形渲染符号 layerType: "1800102", wfsParameters: { //归档前样式 planningBeforeStyle: "solid", //母线图元符号的id busbarSymbolId:"C667CCD3-DD80-0001-1F16-D710138E1003", //连接线图元Id joinLineSymbolId: "C6DF3CA2-52D0-0001-2D4C-C3D61D001E90" }, //初始化图形边框默认显示的颜色，这里是红色 initStyle: { strokeColor: "red" }, //添加图层事件 eventListeners: { //图形要素单击事件 featureclick: function(e) { //图形单击，执行业务代码，如：弹出信息框，这里用alert代替 alert(e.object.name + " 说: " + e.feature.id + " 被单击."); return false; }, //单击地图没有图形的空白处事件 nofeatureclick: function(e) { //这里可以关闭信息显示对话框，这里用alert代替 alert(e.object.name + " 说: 没有图形要素被单击"); } } }); //将图层添加到地图中 map.addLayers([baseLayer, vectorLayer]); //将一个经纬度坐标(EPSG:4326投影)转换成google地图坐标(EPSG:900913投影) var ntmLonLat = new OpenLayers.LonLat(114.50844, 38.04052).transform(source, dest); //将地图定位到此坐标位置，缩放层级为10级 map.setCenter(ntmLonLat, 10); //添加一个一个配电室的图形到地图中，符号定义参见数据库us_gis.tb_gis_symbol表 //"配电室"的渲染符号id是：C6E3101D-C570-0001-23A5-17D045B014E6 //定义一个地理坐标点，并投影转换（由EPSG:4326投影转换到EPSG:900913投影） var point = new OpenLayers.Geometry.Point(114.50844, 38.04052).transform(source, dest); //定义图形符号显示样式 var style = { //使用配电室符号进行渲染 graphicName: "C6E3101D-C570-0001-23A5-17D045B014E6", //符号半径 pointRadius: 10, //填充透明度 fillOpacity: 0.1, //边框颜色 strokeColor: "blue", //显示标签的文字 label: "管委会大楼配电室", //对齐方式 labelAlign: "lm", //标签文字描边颜色 labelOutlineColor: "white", //标签文字描边宽度 labelOutlineWidth: 3, fontSize: 12, fontColor: "#ff0000", fontWeight: "bold", //标签纬度方向偏移量 labelYOffset: 0.001, //标签经度方向偏移量 labelXOffset: 10 }; //定义一个图形要素对象，此对象包含图形的坐标信息、属性信息、样式 var f1 = new OpenLayers.Feature.Vector(point, {devId: 'd1'}, style); //也可以这样设置属性 //f1.attributes[vectorLayer.symbolField] = "C6E3101D-C570-0001-23A5-17D045B014E6"; //f1.attributes[vectorLayer.styleField] = JSON.stringify(); //添加图形要素到矢量图层 vectorLayer.addFeatures([f1]); });显示效果如下图:
