澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-06-29 19:59 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

威尼斯娱乐场lzugis——Arcgis Server for JavaS

POI(Point Of Interest),感兴趣点,其实呢,严苛意义上说应该不是POI,可是单位就那样叫了,笔者也就这么叫了,其落到实处的意义大约是如此的:用过百度地图的仇敌们都知道您在百度地图时,当鼠标经过某些点时会展现这些目的的称呼,点击该目的,会弹出该指标的详细音讯。如下图所示:

一、简介

SuperMap iClient for JavaScript 提供了UTFGrid图层(属性图),用于客户端属性消息的高速交互。 UTFGrid图层从UTFGrid切成丝数据源读取数据,其本质是依靠JSON的ASCII 码’字符画’与属性数据的三结合。 UTFGrid图层无法被可视化渲染,在地形图中采取这些图层, 必须同期加上 SuperMap.Control.UTFGrid 控件类来决定触发事件类型。

  • 原理:通过央求瓦片数据(非图片),将品质消息保存到客服端UTFGrid图层中,提高客户端属性新闻的互动速度。
  • 性情:依照显示屏像素地点在客户端火速拿到图层的天性音讯。
  • 行使场景: UTFGrid图层常用来客户端必要火速响应属性新闻的现象。 当要求实时查询地图上一点地物属性并且地物数量异常的大时,选取与服务器交互获取属性消息的主意索要反复的倡导呼吁, 时间消耗十分大, 而通过UTFGrid图层,能够一点也不慢的获得地物属性消息,相当的大的滋长用户体验。 譬喻:达成鼠标悬停或鼠标单击某一地物时,火速获得该地物有个别质量新闻。

一、引言

时下在客户端绘制POI(Point of Interest,兴趣点)的秘技入眼是div(马克尔的样式)、svg、canvas、VML(前面二种即是Vector Layer)三种格局,那二种方式中唯有canvas的频率是参天的,不过canvas唯有一对新型的浏览器才支撑。尽管div、svg、VML跨浏览器要好有的,可是这两种的功效比比较矮,最四只好绘制几千个POI。

为了突显出大数据量的POI,大家也足以设想将POI数据集通过iServer揭橥为临时图层,然后在客户端接纳动态图层展现出来,那样化解了数据量大和跨浏览器的标题,不过这一个POI无法响应鼠标事件。

于是麻点图应时而生。

威尼斯娱乐场 1

二、使用

上边展示属性图使用格局:

二、简介

SuperMap iClient for JavaScript 提供了麻点图效用,这是一种很神速的web端大数据量渲染化解方案。该功效支撑大数据量、跨浏览器、事件响应,并且成效高。 在大好多主流浏览器下都能相当的慢渲染,且轻巧漫游地图。

威尼斯娱乐场 2

该意义实在是先调用SuperMap.REST.GetLayersInfoService获取到服务端图层消息,然后修改图层音讯,使用SuperMap.REST.SetLayersInfoService设置图层消息创立有的时候图层,再使用SuperMap.Layer.TiledDynamicRESTLayer将该不经常图层在客户端渲染出来。到这一步,大数据量的点就经过瓦片图片的法子在客户端渲染出来了。

然后大家再次创下设SuperMap.Layer.UTFGrid对象,来让那一个POI有鼠标事件响应。然后在最上层叠合八个SuperMap.Layer.马克尔s,当鼠标移动到有个别POI上时,就能够在相应地方增多三个马克尔,高亮该点。

贯彻后的功效啊正是那样子的,上面呢作者的话说在Arcgis Server for JavaScript API下,小编实现该功效的思路与主见。

1、创建UTFGrid图层

 

首先制造三个属性图对象。由于属性图从UTFGrid切成块数据源读取数据, 所以在创造属性图对象时方可依据供给钦赐utfTileSize 、pixcell、utfgridResolution等图层属性。

 

        var utfgrid = new SuperMap.Layer.UTFGrid("UTFGridLayer", url,
                {
                    layerName: "China_Province_R@China400",
                    utfTileSize: 256,
                    pixcell: 8,
                    isUseCache: true
                },
                {
                    utfgridResolution: 8
                }
        );

 

表明:pixcell与utfgridResolution多个属性有对应提到,在使用的时候要留意使用场景:

   1.之中pixcell为发送给服务端诉求utfgrid瓦片的精度,数值越小,精度越高,相应的瓦片大小也就越大;

   2.utfgridResolution为客户端解析瓦片使用的精度,应该与pixcell的值十一分,不然会产生地点与品质对应不上的标题;

   3.一般假诺UTFGrid图层为面图层,对应的数据量会十分的大,为了不影响页面包车型地铁健康浏览,能够将那多少个属性设的大一部分;

   4.isUseCache设置是不是利用缓存,使用缓存能够升高质量。

三、性能

威尼斯娱乐场 3

如上报告为服务端存在一时图层缓存的景况下,渲染POI点所用的时间,当初次使用麻点图功效时渲染会异常的慢(大数据量下服务端动态切图是三个相比耗费时间的操作),初次使用以后(服务端已经存在缓存)渲染POI就要快多数了。

首先,得有贰个图层用于显示那些点指标,那个图层能够是切条,也能够是WMS,也得以是featurelayer,反正只倘若能将那些东西在地形图上出示出来就Ok了。

2、增加到地图

 

接下来将此图层增添到map里面。

 

        //向map中添加图层
        map.addLayers([utfgrid]);

 

四、使用验证

 

下边大家来详细介绍一下怎么运用麻点图。

 

map = new Map("map",{  logo:false,  center: [106.6854, 35.8364],  slider: true });

var tiledLayer = new Tiled(tiledUrl); map.addLayer(tiledLayer); 

3、创建UTFGrid控件

 

创设UTFGrid控件,通过layers属性与从前开立的习性图utfgrid关联,钦点触发事件类型为move。

 

         control = new SuperMap.Control.UTFGrid({
             layers: [utfgrid],
             callback: callback,
             handlerMode: "move"
         });

 

第一创设贰个麻点图对象。

 

var url = "http://localhost:8090/iserver/services/map-china400/rest/maps/China";
var myGOIs = new SuperMap.GOIs({
    "url":url,
    "datasetName":"China_Town_P@China400",
    "style":new SuperMap.REST.ServerStyle({
        "markerSymbolID":907941,
        "markerSize":8
    }),
    "pixcell": 16
});

 

如上代码片段中开创麻点图必要传入一些参数:url为所选取的地形图服务的url(常常和TiledDynamicRESTLayer使用的url一样),datasetName为多少对应的子图层名称, style为要素的体制风格,这里须要传入SuperMap.REST.ServerStyle类型的靶子。

 

接过来说说这么些点终归是怎么回事,其实呢,这么些点呢正是二个JSON格式的数码,里面包车型客车每贰个对象涵盖了该对象的性质新闻,再次来到的JSON格式的大致如下:

4、增多控件到地图

 

将此控件加多到map里面。

 

        //向map中添加控件
        map.addControl(control);

 

下一场给麻点图对象绑定 initialized 事件,麻点图开首化完成后会触发该事件。

myGOIs.events.on({
    "initialized":GOIsInitialized
});

function GOIsInitialized(){
    //获取麻点图内部创建的图层对象,并添加到map上
    var layers = myGOIs.getLayers();
    map.addLayers(layers);
    //创建麻点图事件控件,该控件用于实现麻点图的事件响应。
    control = new SuperMap.Control.GOIs(layers,{
        onClick:function(evt){  //定义click事件
            //code
        },
        highlightIcon:new SuperMap.Icon('images/circle.png',  new SuperMap.Size(16,16), new SuperMap.Pixel(-8, -8)),//高亮状态下的点样式
        isHighlight:true
    });
    map.addControl(control);    //将控件添加到map上
}

 

{  total:3,  layerpoi:[   {poiCode:'0',poiTitle:'wlmq',poix:9748157.53561782,poiy:5429353.112666599 },   {poiCode:'1',poiTitle:'hhht',poix:12453416.840686005,poiy:4997253.113785474 },   {poiCode:'2',poiTitle:'lz',poix:11528834.54654876,poiy:4319715.295065851 }  ] }

5、处总管件

 

当鼠标事件触发的职位正幸亏UTFGrid图层上有对应数据的时候调用回调函数callback。

回调函数callback的参数 infoLookup 是三个再次回到对象,该对象由叁个或八个键值对构成, 个中键值为图层索引,值为鼠标地方对相应图层的多少(属性音讯),数据格式为JSON类型。 通过 infoLookup 对象,无需与服务器交互就能够火速取得鼠标地方对应地物的性质新闻。

 

         var callback = function (infoLookup, loc, pixel) {
               closeInfoWin();
               if (infoLookup) {
                   var info;
                   for (var idx in infoLookup) {
                       info = infoLookup[idx];
                       if (info && info.data) {
                            //弹出框内容,info.data.NAME 就是当前鼠标位置对应要素的NAME属性字段值
                           var dom = "<div style='font-size: 12px; color: #000000;border: 0.5px solid #000000'>"
                                  info.data.NAME   "< /div >";
                           //设置x与y的像素偏移量,不影响地图浏览;
                           var xOff = (1 / map.getScale()) * 0.001;
                           var yOff = -(1 / map.getScale()) * 0.005;
                           var pos = new SuperMap.LonLat(loc.lon xOff, loc.lat yOff);
                           //新建一个弹出框对象
                           infowin = new SuperMap.Popup("chicken",
                                   pos,
                                   new SuperMap.Size(100, 20),
                                   dom,
                                   true, null);
                           infowin.autoSize=true;
                           map.addPopup(infowin);
                       }
                   }
               }
         };

         //关闭弹出窗
         function closeInfoWin() {
             if (infowin) {
                 try {
                     map.removePopup(infowin)
                 }
                 catch (e) {
                 }
             }
         }

 

如此大家就能够拿走以下下效果:

当鼠标移动到中夏族民共和国的某些省份上时,弹出框显示本省份的名称。

威尼斯娱乐场 4

一体化圭臬请见 

此地给麻点图绑定开首化达成事件,开端化完毕后须要实现如下步骤:
  • 获取麻点图内部创建的图层对象,并增添到map上,这里您会获取四个图层对象, 它们分别是:临时图层(TiledDynamicRESTLayer)、utfgrid图层、marker图层(用于落到实处高亮效果)。
  • 创办麻点图事件控件,该控件用于落到实处麻点图的平地风波响应,将该控件增加到map上。

注意,每贰个对象必须得有八个id,name,x,y,前面那多少个是必须的,别的的无所谓,至于说怎么再次来到,那几个业务你本人着想,怎么方便怎么来,asp.net能够用*.ashx,java能够考虑servlet大概别的,反正能回去这么些JSON就Ok。那么,小编何时乞请让他回去吗,有七个时间:1、地图起首化加载的时候;2、地图的extent产生变化的时候。大家得以用ajax来贯彻:

6、示例:UTFGrid国旗版

产品演示程序中提供了另壹天质量专项论题图模范:UTFGrid国旗版。 该示例展示通过UTFGrid图层飞速的响应用户的鼠标移动事件,展现出近来鼠标对应国家的国旗和称号。

总体模范请见 

用户须求团结制作一张要素高亮风格的图纸,并将该图形设置到控件的highlightIcon属性中
       highlightIcon:new SuperMap.Icon('images/circle.png',  new SuperMap.Size(16,16), new SuperMap.Pixel(-8, -8)),//高亮状态下的点样式
function excuteData(dataUrl){  $.ajax({   type: "post",   dataType: "JSON",   url: dataUrl,   data: {level: mapLevel, bbox: bbox},   success: function(json){               var data = json.layerpoi;    total=json.total;     if(total!=0){     for(var i in data){      var xmin,ymin,xmax,ymax;      xmin=data[i].poix-offset;      ymin=data[i].poiy-offset;      xmax=data[i].poix offset;      ymax=data[i].poiy offset;      var poiExtent = new esri.geometry.Extent(xmin,ymin,xmax,ymax,map.spatialReference);      poiArray[i] = new POI(data[i].poiType,data[i].poiTitle,data[i].poix,data[i].poiy,poiExtent);                   }    }   }  }); }
用户能够因而SuperMap.Control.GOIs给麻点图加多鼠标事件

能够透过开首化该控件时,以传参数的主意定义事件。

    var control = new SuperMap.Control.GOIs(layers,{
        onClick:function(evt){  //定义click事件
            //code
        }
    });

也足以经过事件绑定的措施,给麻点图定义事件。

    control.events.on("mouseover",function(){
        //code
    });

麻点图提供了增进的鼠标事件类型:

  • onMouseover
  • onMouseout
  • onMousemove
  • onMousedown
  • onMouseup
  • onClick
  • onDblclick

剖析上面包车型客车代码,ajax央浼,传递的参数为level(地图的等第),bbox(地图当前的四至),意思正是经过当前地图的等级和四至剖断当前只是范围内所蕴藏的点目的的个数与音信,success后回来JSON,首先,判定total的个数是不是为0,不为0,说明某些对象,这时,根据地图的比例尺总结三个成立的offset,依据x、y、offset给每三个点指标创立贰个extent,你能够建叁个对象类将那么些目的点的新闻存款和储蓄起来:

以下是一体化的轨范代码:

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>麻点图</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 520px;
            border:1px solid #3473b7;
        }
        #toolbar{
            position: relative;
            height: 33px;
            padding-top:5;
        }
    </style>
    <script src='../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var map,datasetName,popup,myGOIs,control,
                host = document.location.toString().match(/file:///)?"http://localhost:8090":'http://'   document.location.host,
                url=host "/iserver/services/map-china400/rest/maps/China";
        function init(){
            map = new SuperMap.Map("map",{controls: [
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })],allOverlays: true,projection: "EPSG:3857"
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("china", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});
        }
        function addLayer() {
            map.addLayers([layer]);
            map.setCenter(new SuperMap.LonLat(11782422.179601, 4717749.8315665), 3);
        }

        function createLayer(){
            datasetName = "China_Town_P@China400";

            //创建一个麻点图对象
            myGOIs = new SuperMap.GOIs({
                "url":url,
                "datasetName":datasetName,
                "style":new SuperMap.REST.ServerStyle({
                    "markerSymbolID":907942,
                    "markerSize":4
                }),
                "pixcell": 16
            });

            myGOIs.events.on({
                "initialized":GOIsInitialized
            });
        }

        function clearLayer(){
            closeInfoWin();

            var layers = myGOIs.getLayers();
            for(var i=0;i<layers.length;i  ){
                map.removeLayer(layers[i]);
            }
            myGOIs.destroy();
            myGOIs = null;

            control.destroy();
            control = null;
        }

        function GOIsInitialized(){
            var layers = myGOIs.getLayers();
            map.addLayers(layers);

            control = new SuperMap.Control.GOIs(layers,{
                onClick:function(evt){
                    var lonlat = evt.loc;
                    var name = evt.data.NAME;

                    openInfoWin(lonlat,name);
                },
                highlightIcon:new SuperMap.Icon('images/circle.png',  new SuperMap.Size(16,16), new SuperMap.Pixel(-8, -8)),
                isHighlight:true
            });
            map.addControl(control);
        }

        function openInfoWin(lonlat,name){
            closeInfoWin();
            var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
            contentHTML  = "<div>" name "</div></div>";

            popup = new SuperMap.Popup.FramedCloud("popwin",new SuperMap.LonLat(lonlat.lon,lonlat.lat),null,contentHTML,null,true,function(){
                closeInfoWin();
                control.removeClickedMarker();
            });
            map.addPopup(popup);
        }

        function closeInfoWin() {
            if (popup) {
                try {
                    map.removePopup(popup);
                }
                catch (e) {
                }
            }
        }
    </script>
</head>
<body onload="init()">
<div id="toolbar">
    <input type="button" value="渲染麻点图" onclick="createLayer()" />
    <input type="button" value="清除" onclick="clearLayer()" />
</div>
<div id="map"></div>
</body>
</html>

 威尼斯娱乐场 5

这么我们就可以使用麻点图功能了,完整表率请见

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:威尼斯娱乐场lzugis&mdash;&mdash;Arcgis Server for JavaS

关键词: 澳门威利斯人 GIS 可视化