面向 Windows 8 应用商店开发专题

一、Metro风格地图应用程序开发简介


SuperMap iClient 8C(2017) for JavaScript 是一款在服务式 GIS 架构体系中，面向 HTML5 的应用开发，支持多终端，跨浏览器的客户端开发平台。 通过 SuperMap iClient 8C(2017) for JavaScript，无需任何插件，便可以在浏览器上实现美观的地图展现，内容丰富的地图应用。

随着Surface 平板电脑的兴起，借助SuperMap iClient for JavaScript开发平台，我们可以快捷地开发Windows 8下Metro风格的地图应用程序，订制期望的地图应用功能等。

二、Metro风格地图应用程序开发入门

该文档介绍了基于SuperMap iClient for JavaScript 平台如何开发Windows 8下Metro风格的地图应用程序，该地图包含基本的地图浏览、缩放、量算和定位功能。 二次开发人员或用户可以在此基础上增加自己的业务需求，丰富地图应用。同时我们会在开发范例中提供Metro风格的地图应用的源码和打包后的应用程序， 用户可自行下载安装包试用。

  1. 配置开发环境
    • 下载并解压 SuperMap iClient 8C(2017) for JavaScript
    • 安装Windows 8 系统
    • 安装Visual Studio 2012
    • 注册微软开发者账号(提示：打开Visual Studio 2012即提示注册账号(如果已有账号直接登录即可))
  2. Metro风格工程创建
    • 打开Visual Studio 2012，单击文件，选择新建项目快捷键，弹出如下新建项目对话框：

      在新建项目对话框中左侧在已安装的模板中找到JavaScript Windows应用商店，同时在右侧选择导航布局应用程序（当然您也可以选择空白应用程序）。 在下方名称一栏中输入应用程序名称（JavaScript for WinRT），在位置一栏中选择应用程序保存的位置（E:\WinRT\）。单击确定按钮即创建了导航布局应用程序。 创建好的解决方案目录结构如下：

    • 将SuperMap iClient for JavaScript产品包下的libs文件夹和theme文件夹同时拷贝至JavaScript for WinRT的解决方案下，最终目录图示如下：
    • 由于我们要使用定位功能，而在Metro风格应用中，定位功能默认情况下是禁用的，我们需要开启它。双击打开package.appxmanifest文件，选择功能选项卡， 勾选位置前面的复选框，保存该文件，这样既可启用定位功能，图示如下：
  3. 代码说明
    • 打开pages/home/home.html页面，引入SuperMap.Include.js文件，修改后html页面, 请查看源码。
    • 打开pages/home/home.css样式文件，修改后的样式文件如下： 
      .homepage section[role=main] {
    margin-left: 120px;
}

.funcDiv {
    z-index: 9999;
    position: absolute;
    top: 0;
    right: 10px;
}

ul {
    list-style-type: none;
}

    ul li {
        display: inline-block;
    }

#map {
    width: 100%;
    height: 100%;
}

@media screen and (-ms-view-state: snapped) {
    .homepage section[role=main] {
        margin-left: 20px;
    }
}

@media screen and (-ms-view-state: portrait) {
    .homepage section[role=main] {
        margin-left: 100px;
    }
}
    • 打开pages/home/home.js文件，修改后的代码如下： 
      (function () {
    "use strict";

    var map, layer, positionLayer, lenCtrl, areaCtrl;

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) {
            // 初始化地图
            map = new SuperMap.Map("map", {
                controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.MousePosition(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })], units: "m"
            });
            positionLayer = new SuperMap.Layer.Markers();
            layer = new SuperMap.Layer.CloudLayer();
            map.addLayers([layer, positionLayer]);
            map.setCenter(new SuperMap.LonLat(12956286, 4855615), 12);

            //测量控件加入map对象中
            lenCtrl = new SuperMap.Control.Measure(SuperMap.Handler.Path, { persist: true });
            areaCtrl = new SuperMap.Control.Measure(SuperMap.Handler.Polygon, { persist: true });
            lenCtrl.events.on({
                "measure": handleMeasure
            });
            areaCtrl.events.on({
                "measure": handleMeasure
            });
            map.addControls([lenCtrl, areaCtrl]);
            //功能键单击事件
            element.querySelector("#measureLength").addEventListener("click", function (event) {
                lenCtrl.activate();
            }, false);
            element.querySelector("#measureArea").addEventListener("click", function (event) {
                areaCtrl.activate();
            }, false);
            element.querySelector("#myPosition").addEventListener("click", function (event) {
                //实现定位功能
                var geolocator = Windows.Devices.Geolocation.Geolocator();
                geolocator.getGeopositionAsync().done(function (position) {
                    var lon = position.coordinate.longitude,
                    x = lon * 20037508.342789 / 180,
                    lat = position.coordinate.latitude,
                    tempy = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180),
                    y = tempy * 20037508.34789 / 180,
                    lonLat = new SuperMap.LonLat(x, y),
                    size = new SuperMap.Size(44, 33),
                    offset = new SuperMap.Pixel(-(size.w / 2), -size.h),
                    icon = new SuperMap.Icon("/theme/image/marker.png", size, offset);
                    positionLayer.clearMarkers();
                    positionLayer.addMarker(new SuperMap.Marker(lonLat, icon));
                    map.setCenter(lonLat);
                });
            }, false);
            element.querySelector("#clear").addEventListener("click", function (event) {
                positionLayer.clearMarkers();
            }, false);
        }
    });

    //量测结果函数
    function handleMeasure(event) {
        lenCtrl.deactivate();
        areaCtrl.deactivate();
        var messageDialog = new Windows.UI.Popups.MessageDialog("");
        if (event.order === 1) {
            messageDialog.content = "长度测量结果: "+event.measure+" 公里";
            messageDialog.showAsync();
        } else if (event.order === 2) {
            messageDialog.content = "面积测量结果: " + event.measure + " 平方公里";
            messageDialog.showAsync();
        }
    }
})();
  4. Metro风格示例效果图展示

    通过上面的示例，我们就可以基于SuperMap iClient for JavaScript产品快速的构建Metro风格的地图应用。实现基本的地图浏览、缩放、量算、定位等功能。 你也可以订制化的实现自己期望的地图应用。

    将上面的示例打包后，通过windows 8 提供的命令安装应用程序后，在开始界面上出现如下磁贴：

    此刻通过单击或者是触摸该磁贴，弹出如下地图应用程序：

三、Metro风格地图应用程序REST交互

我们知道，在SuperMap iClient for JavaScript客户端与REST服交互过程中，涉及到同域与跨域和REST服务交互的问题，这两种情况下需要分别处理。 而在Metro风格下与REST服务的交互已不再区分，统一走同域处理。我们可以通过Windows 运行时下提供的API直接调用即可。不过这些我们无需关心， 在SuperMap iClient for JavaScript产品中我们已做了封装。将SuperMap iClient for JavaScript产品的API引入到新建的Metro风格项目中后， 可以像在浏览器下一样调用API。

Metro风格下与REST服务交互的代码如下： 

WinJS.xhr({
　　url:”url”,
　　type:”GET”,
　　headers:object
}).then(function(responseResult){
　　
},function(errorResult){
　　
});

版权所有 © 2000-2016  JWL