根据项目要求，需要对指定的位置进行标注。

1、初始化地图服务

2、根据地图服务接口信息进行标注

3、根据经纬度信息进行标注

展示接口截图：

以下代码并不能直接粘贴跑起来，因为代码所涉及的文件地址都是内网的地址。需要自行更改对应的IP

如截图所示：

　　1、红色的是todoLabel 方法，根据经纬度值直接标注上去的。

　　2、蓝色车辆图标，是targetLabelFun 调用地图服务接口，添加到图层上去的。

 <!--地图初始化-->

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>地图初始化</title>

     <link rel="stylesheet" type="text/css" href="http://10.101.8.102:80/map/js/3.26/esri/css/esri.css" />

     <script type="text/javascript" src="http://10.101.8.102:80/map/js/3.26/init.js" ></script>

     <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>

     <style>html, body {height: 100%;width: 100%;margin: 0;padding: 0;}</style>

 </head>

 <body> 

 <div id="xinyiMapPID" style="height: 70%;width: 90%;padding-left:50px">

     <div id="xinyiMap"></div>

 </div> 

 <script type="text/javascript">

     $(function () {

         initMap({},'xinyiMap');

     })

     var maplet = null;//地图对象

     var initMap = function(param,DOMID){

         return new Promise(function(resolve) {  // 用于回调操作，预留

             var domMapID;

             var layer_city; // 图层对象

             if (DOMID == undefined || DOMID == "") {domMapID = "xinyiMap";} // 传递不同的id值，用于初始化不同的DOM地图服务

             else {domMapID = DOMID;}

             var list = {// 默认地图初始化参数

                 minZoom: '11',

                 maxZoom: 19,

                 zoom: 16,

                 center: [113.33227, 23.14154],  // 广州

             }

             var options = Object.assign(list, param);    // 参数对象合并,若存在重复，后面的会覆盖前面的

             require(["esri/map",

                     "esri/config",

                     "esri/dijit/OverviewMap",

                     "esri/layers/ArcGISTiledMapServiceLayer"

                 ],

                 function (Map, config, OverviewMap, ArcGISTiledMapServiceLayer) {

                 $("#" + domMapID).width($("#" + domMapID).parent().width());    // 重新定义地图区域的宽高，等于父级的宽高

                 $("#" + domMapID).height($("#" + domMapID).parent().height());

                 maplet = new Map(domMapID, {// 初始化地图

                     center: options.center, //初始化展示中心位置

                     zoom: options.zoom,

                     logo: false, //logo设置图标是否显示,true时地图底部显示powered by ESRI

                     maxZoom: options.maxZoom,   //最大放缩级别

                     minZoom: options.minZoom,   //最小放缩级别

                     navigationMode: 'css-transforms'    //指示在平移和缩放时地图是否使用CSS3变换。

                 })

                 //ArcGISTiledMapServiceLayer，用于加载服务器端的缓存地图服务,displayLevels表示放缩级别约束

                 layer_city = new ArcGISTiledMapServiceLayer('http://10.101.8.103:6080/arcgis/rest/services/gz_google_7_19MapService/MapServer', {displayLevels: [10,11,12, 13, 14, 15, 16, 17,18,19]});

                 maplet.addLayer(layer_city, 0); // 把创建的ArcGISTiledMapServiceLayer地图服务添加到map地图中

                     // 进行标注

                     maplet.on('load',function(){

                         targetLabelFun();//调用地图服务接口，进行标注

                         todoLabel(23.14154,113.33227,1);  //直接根据经纬度值进行标注。纬度（0°——90），经度（0°——180°）

                     })

             })

         })

         resolve(maplet);

     }

     // 地图标注方法,根据地图服务进行标注

     var targetLabelFun = function () {

         var labelObj = null;    // 定义需要标注的对象

         require([

             "esri/map", // 创建地图类

             "esri/layers/ArcGISTiledMapServiceLayer",

             "esri/symbols/PictureMarkerSymbol",

             "esri/renderers/SimpleRenderer",

             "esri/layers/FeatureLayer"

         ],function (Map, ArcGISTiledMapServiceLayer, PictureMarkerSymbol, SimpleRenderer, FeatureLayer, ) {

             var pictureSymbol = new PictureMarkerSymbol('http://10.101.8.102:80/map/img/car.png', 24, 36);    // 标注所需的图标，用于在图层上进行标注

             var simpleRender = new SimpleRenderer(pictureSymbol);                 // 使用Symbol参数创建一个新的SimpleRenderer对象。

             labelObj = new FeatureLayer('http://10.101.8.103:6080/arcgis/rest/services/viasCameraMapService/MapServer/0', {visible: true, id: 'layer_label', outFields: ['*']})

             labelObj.setRenderer(simpleRender);

             maplet.addLayer(labelObj);

         })

     }

     // 根据经纬度进行标注

     var todoLabel = function (lat,lon,index) {//113.33227, 23.14154

         require([

             "esri/map", // 创建地图类

             "esri/geometry/webMercatorUtils",

             "esri/layers/GraphicsLayer",

             "esri/symbols/PictureMarkerSymbol",

             "esri/graphic",

             "esri/geometry/Point"

         ], function (map,webMercatorUtils, GraphicsLayer, PictureMarkerSymbol, Graphic, Point) {

             var pot = new Point(parseFloat(lon), parseFloat(lat), { "wkid": 4326 });

             var webMctor = webMercatorUtils.geographicToWebMercator(pot); // 转换为横轴墨卡托系统坐标

             var pms = new PictureMarkerSymbol("http://10.101.8.102:80/map/img/point_red.png",21,33);

             var graphicObj = new Graphic(webMctor, pms, null, null);

             maplet.graphics.add(graphicObj);

             maplet.centerAt(webMctor);

         })

     }

 </script>

 </body>

 </html>

acgis地图初始化并根据经纬度进行标注的更多相关文章

  1. 百度地图API-搜索地址、定位、点击获取经纬度并标注

    百度地图api:http://developer.baidu.com/map/jsdemo.htm api申请ak:http://lbsyun.baidu.com/ 一.搜索地址.定位.点击获取经纬度 ...

  2. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  3. 【百度地图API】你看过房产地图吗？你知道房产标注是如何建立的吗？

    原文:[百度地图API]你看过房产地图吗?你知道房产标注是如何建立的吗? 你是不是看过很多房产网站?例如安居客,新浪乐居. 你是不是也想做一个能写文字的标注? 你知道怎么去实现麼? 其实,上图这样的标 ...

  4. 【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注

    原文:[百度地图API]建立全国银行位置查询系统(四)--如何利用百度地图的数据生成自己的标注 摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?&quo ...

  5. ORB-SLAM（三）地图初始化

    单目SLAM地图初始化的目标是构建初始的三维点云.由于不能仅仅从单帧得到深度信息,因此需要从图像序列中选取两帧以上的图像,估计摄像机姿态并重建出初始的三维点云. ORB-SLAM中提到,地图初始化常见 ...

  6. 利用百度地图API，获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  7. [Windows Phone] 地图控制项的经纬度

    原文:[Windows Phone] 地图控制项的经纬度 前言 本文主要示范如何使用地图经纬度以及显示地标和行人街道,并透过卷轴控制地图缩放比例的功能. ? 实作 step1 建立专案. ? step ...

  8. 【百度地图API1.1】修改文本标注的样式

    原文:[百度地图API1.1]修改文本标注的样式 百度地图API1.0中文本标注的样式写法为: label.getDom().style.borderColor = "#808080&quo ...

  9. 百度地图 echarts tooltip属性 经纬度坐标不显示

    中国地图.散点图结合点击后显示当前城市数量 不显示经纬度坐标 echarts.appMap = function (id, opt) { // 实例 var chart = this.init(doc ...

随机推荐

  1. 基于Mybatis的Mysql数据库文档生成工具，支持生成docx（原创）

    今天不写android--也写写数据库相关的东西 -------------------- 今日老夫闲来无事,设计了一款数据库文档生成工具 眼下仅仅支持mysql 主要是生成docx的 下载链接:下载 ...

  2. How to fix yum errors on CentOS, RHEL or Fedora

    Yum is a package management tool for installing, updating and removing rpm packages on RedHat-based ...

  3. 【cl】eclipse配置svn

    查看Eclipse版本号 http://jingyan.baidu.com/article/020278118660e81bcd9ce545.html Window>preferences输入S ...

  4. 【待解决】使用JUnit时报错java.lang

    编写selenium自动化代码,代码逻辑应该都没有错,运行时老是报如下错误 java.lang.NoClassDefFoundError: org/json/JSONException 解决办法:导入 ...

  5. 问题： Unsupported major.minor version 51.0

    Unsupported major.minor version 51.0 问题原因:外部jar包使用jdk1.7(jdk7)编译,而使用此jar包的工程jdk版本为jdk1.6(jdk6),算是版本不 ...

  6. Android软键盘状态的切换及其强制隐藏

    MainActivity例如以下: package cc.c; import android.os.Bundle; import android.view.View; import android.v ...

  7. AES 加密位： 128位，加密模式：CBC， 填充模式：Zeros

    // AES 加密 public byte[] AESEncrypt(string text) { byte[] data = Encoding.Unicode.GetBytes(text); Sym ...

  8. HDU 5218 The E-pang Palace （简单几何—2014广州现场赛）

    题目链接:pid=5128">http://acm.hdu.edu.cn/showproblem.php? pid=5128 题面: The E-pang Palace Time Li ...

  9. ETL （数据仓库技术）

    ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词较常用在数 ...

  10. WINDOWS XP 系统显示乱码的解决方法（修改注册表，使用正常字体）

            一位同事的计算机进入WINDOWS XP系统后,电脑里的所有汉字全部显示乱码,很多办公文档无法打开而影响工作.因为第一次遇到这种问题,当然首先是百度解决了,搜索了相关的信息后找到了答案 ...