iframe-proxy | Sunbelt Computer Software

199 lines (181 loc) · 7.02 KB
<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Supermap OSM BUildings Draw Data</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        #map{
            position: relative;
            height: 520px;
            border:1px solid #3473b7;
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script src="js/OSMBuildings-SuperMap.js"></script>
    <script type="text/javascript">
        var map, layer,osm,dataurl,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-china400/rest/maps/China";
        dataurl = host + "/iserver/services/data-jingjin/rest/data";
        function init(){
            //检测浏览器是啥支持canves Buildings 需要Canvas绘制
            if(!document.createElement('canvas').getContext){
                alert("您的浏览器不支持Canvas,请先升级！");
                return;
            //初始化地图
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.MousePosition(),
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.Zoom()
            ]});
            //初始化图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
            //监听图层信息加载完成事件
            layer.events.on({"layerInitialized":addLayer});
        //异步加载图层
        function addLayer() {
            map.addLayers([layer]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(12957186.36784,4852711.53595), 8);
            // SQL 查询方式从服务器端获取数据
            getFeatureBySQL();
        function getFeatureBySQL(){
            //vectorlayer.removeAllFeatures();
            var getFeatureParam, getFeatureBySQLService,getFeatureBySQLParam;
            //查询参数设置
            getFeatureParam = new SuperMap.REST.FilterParameter({
                name: "Capital",
                atrributeFilter: "SMID<15"
            getFeatureBySQLParam = new SuperMap.REST.GetFeaturesBySQLParameters({
                queryParameter: getFeatureParam,
                datasetNames: ["Jingjin:BaseMap_R"]
            //实例化Service 并且设置监听函数
            getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(dataurl,{
                eventListeners: {"processCompleted": processCompleted,
                                 "processFailed": processFailed}
            //向服务发送操作参数
            getFeatureBySQLService.processAsync(getFeatureBySQLParam);
        //查询成功后的处理方法
        function processCompleted(getFeatureEventArgs){
            var i, len, features, result = getFeatureEventArgs.result;
            if(result && result.features){
                features = result.features;
                for(i=0, len=features.length; i<len;i++){
                    //var feature = features[i];
                    FeatureToOSMBuildingsGeojson(features[i]);
                //构建OSMBuildings
                OSMBuildingsInit();
        //查询失败
        function processFailed(e){
            alert(e.error.errorMsg);
        var Draw_geoJSON = {
            "type": "FeatureCollection",
            "features": []
        var featureID=0;
        //处理服务器端返回的feature数据
        function FeatureToOSMBuildingsGeojson(e){
            featureID++;
            var feature={
                "type": "Feature",
                "id": 0,
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                "properties": {
                    "wallColor": "rgb(111,168,220)",
                    "roofColor": "rgb(207,226,243)",
                    "height": 0,
                    "minHeight": 0
            feature.id=featureID;
            feature.properties.height= e.attributes.POP_DENSITY99*800;
            feature.properties.wallColor=getWallColorByPoP(e.attributes.POP_DENSITY99);
            feature.properties.roofColor=getRootColorByPoP(e.attributes.POP_DENSITY99);
            var components1=e.geometry.components;
            var geometry_coordinates=[];
            for(var i=0;i<components1.length;i++){
                var components2=components1[i];
                for(var j=0;j<components2.components.length;j++){
                    var components3 = components2.components[j];
                    for(var k = 0;k<components3.components.length;k++){
                        var component=components3.components[k];
                        var lonlat=new SuperMap.LonLat(component.x,component.y);
                        geometry_coordinates.push([lonlat.lon,lonlat.lat]);
                    //起点终点相同 闭合
                    geometry_coordinates.push(geometry_coordinates[0]);
                    feature.geometry.coordinates=[geometry_coordinates];
                    Draw_geoJSON.features.push(feature);
        function getWallColorByPoP(pop){
            var color="#00eeee"
            if(pop>=0&&pop<0.02){
                color="#FDE2CA"
            }else if(pop>=0.02&&pop<0.04){
                color="#FACE9C";
            }else if(pop>=0.04&&pop<0.06){
                color="#F09C42";
            }else if(pop>=0.06&&pop<0.1){
                color="#D0770B";
            }else if(pop>=0.1&&pop<0.2){
                color="#945305";
            return color;
        function getRootColorByPoP(pop){
            var color="#00eeee"
            if(pop>=0&&pop<0.02){
                color="#F5E0CD"
            }else if(pop>=0.02&&pop<0.04){
                color="#F7D1A6";
            }else if(pop>=0.04&&pop<0.06){
                color="#F3A755";
            }else if(pop>=0.06&&pop<0.1){
                color="#DA861F";
            }else if(pop>=0.1&&pop<0.2){
                color="#A96411";
            return color;
        //OSMBuildings 构建
        function OSMBuildingsInit(){
            osm=new OSMBuildings(map);
            osm.load();
            osm.date(new Date()); //设置当前时间 计算OSMBuildings 阴影
            osm.set(Draw_geoJSON);
            osm.click(function (e) {
                // 返回当前点击的feature ID 和 当前的经纬度
                alert("FeatureID:"+ e.feature);
    </script>
<body onLoad = "init()">
<div id = "map"></div>
Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

SM_OSMBuildings_RestData.html

Latest commit

History

SM_OSMBuildings_RestData.html

File metadata and controls
