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
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
939 0
|
26天前
|
数据可视化 定位技术 Python
Folium在地图上展示数据
【10月更文挑战第17天】本文介绍了如何使用Python中的Folium库进行地理可视化。Folium是一个基于Leaflet.js的库,可以轻松创建交互式地图。文章从安装Folium开始,逐步讲解了如何创建地图、添加标记点、展示热力图、自定义图层样式、绘制形状、添加图例和文本标签等内容。通过这些示例,读者可以学会如何利用Folium进行地理数据的可视化,从而更好地理解和展示数据的空间分布。
42 4
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
290 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
314 0
|
数据可视化 定位技术
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
116 0
|
6月前
|
定位技术
使用Echarts实现地图展示
使用Echarts实现地图展示
134 0
|
6月前
|
Java 数据库连接 数据库
JMETERGUI展示介绍
主要介绍JMETER默认工作区
46 0
|
6月前
|
数据可视化 定位技术 数据格式
Tableau可视化设计案例-07 多边形地图和背景图地图
Tableau可视化设计案例-07 多边形地图和背景图地图
|
定位技术
百度地图使用 ->展示地图一
百度地图使用 ->展示地图一
97 0
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
214 1