F1V2.x-图形-离线地图使用

最新推荐文章于 2023-09-21 10:03:57 发布

ZHBR_F1

最新推荐文章于 2023-09-21 10:03:57 发布

阅读量983

点赞数

分类专栏：图形文章标签：图形地图

本文链接：https://blog.csdn.net/ZHBR_F1/article/details/74948565

版权

图形专栏收录该内容

17 篇文章 2 订阅

订阅专栏

地图瓦片下载请参考：F1V3.0-图形-如何下载及使用离线的瓦片地图

依赖bundle包

com.jb.f1.gis.ol2_2.13.1.jar
com.jb.f1.gis.web_2.0.0.jar
com.jb.f1.gis_2.0.0.jar

静态化页面

在自己的工程中新建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]);
});