2013年7月14日-地图展示

简介: 1、在newjavascript中编写如下代码: /* * To change this template, choose Tools | Templates * and open the template in the editor. */dojo.require("esri.map");dojo.require("esri.tasks.query");//dojo.

1、在newjavascript中编写如下代码:

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
dojo.require("esri.map");
dojo.require("esri.tasks.query");
//dojo.require("dojo.parser");
//dojo.require("dijit.layout.BorderContainer");
//dojo.require("dijit.layout.ContentPane");
//dojo.require("esri.dijit.Scalebar");
//dojo.require("esri.dijit.OverviewMap");

var queryTask, query;
var symbol, infoTemplate;

function init(){
    //esri.config.defaults.io.proxyUrl = "Support/proxy.jsp";
    
    map = new esri.Map("map");
    var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Education_landusage/MapServer");
    map.addLayer(layer);
    dojo.connect(map, "onClick", executeQueryTask);
    
    queryTask = new esri.tasks.QueryTask("http://localhost:6080/arcgis/rest/services/Education_landusage/MapServer/10");  
    query = new esri.tasks.Query();
    query.returnGeometry = true;
    query.outFields = ["*"];
    
    infoTemplate = new esri.InfoTemplate("${LAYER}","${*}");
    symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SASHDOT, 
    new dojo.Color([255,0,0]),2), new dojo.Color([255,255,0],0.5));
    
    
    }
    function executeQueryTask(evt){
        query.geometry = evt.mapPoint;
        queryTask.execute(query,showResults);
    }
    
    function showResults(featureSet){
        map.graphics.clear();
        dojo.forEach(featureSet.features, function(feature){
            var graphic = feature;
            graphic.setSymbol(symbol);
            graphic.setInfoTemplate(infoTemplate);
            map.graphics.add(graphic);
        });
}
dojo.ready(init);


2、在newhtml.html中编写如下代码:

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Map</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css" />
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/Nihilo/Nihilo.css" />
        <link rel="stylesheet" href="newcss.css" />
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
        <script type="text/javascript" src="newjavascript.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

3、设置样式

html,body,#map{
    padding: 0;
    width: 100%;
    height: 100%;
}


目录
相关文章
|
JavaScript 前端开发 定位技术
|
3月前
|
数据可视化 定位技术 Python
Folium在地图上展示数据
【10月更文挑战第17天】本文介绍了如何使用Python中的Folium库进行地理可视化。Folium是一个基于Leaflet.js的库,可以轻松创建交互式地图。文章从安装Folium开始,逐步讲解了如何创建地图、添加标记点、展示热力图、自定义图层样式、绘制形状、添加图例和文本标签等内容。通过这些示例,读者可以学会如何利用Folium进行地理数据的可视化,从而更好地理解和展示数据的空间分布。
186 4
|
定位技术
通过配置实现多种需求下的地图展示
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。 1.背景 对于一般性的地图显示需求,我们只需要知道地图的一个固定URL,然后知道要显示的范围和要显示的级别以及每个级别的scale等即可。
930 0
|
定位技术
百度地图使用 ->展示地图一
百度地图使用 ->展示地图一
120 0
|
9月前
|
定位技术
使用Echarts实现地图展示
使用Echarts实现地图展示
169 0
|
9月前
|
数据可视化 定位技术 数据格式
Tableau可视化设计案例-07 多边形地图和背景图地图
Tableau可视化设计案例-07 多边形地图和背景图地图
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
328 0
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
250 1
|
数据可视化 定位技术
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
134 0
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
625 0

热门文章

最新文章