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

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. Anton and Letters

    Anton and Letters time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  2. [WPF]c#调用默认浏览器打开网址

    //调用系统默认的浏览器 System.Diagnostics.Process.Start("http://www.zhaokeli.com");

  3. 2016.04.13,英语,《Vocabulary Builder》Unit 13

    cord, from the Latin word for 'heart'. concord, ['kɑːŋkɔːrd] n. 和睦, 公约 con-,'with'. discord, ['dɪskɔ ...

  4. luogu2761 软件补丁问题 状态压缩最短路径

    关键词:状态压缩 最短路径 想不出快速办法,就先考虑考虑暴力.枚举每一种错误分布的情况,然后通过可用的补丁转化为另多种情况,这些情况又转化为更多种情况……我们可以用图来表示这种关系! 状态压缩:每个错 ...

  5. hdoj---Rescue

    Rescue Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  6. postgresql 备份（pg_dump,pg_restore）

    PG提供物理备份和逻辑备份(本篇主要讲逻辑备份)物理备份:WAL热备份逻辑备份:pg_dump,pg_dumpall,恢复时pg_restore 查看帮助命令: pg_dump --help 跟MyS ...

  7. 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

  8. TexturePacker贴图打包工具

    1.该软件是收费的,不过对于这么一款实用的工具来说,物有所值,下载地址 http://www.codeandweb.com/texturepacker 2.openGL载入纹理图片的时候,所用内存是会 ...

  9. BZOJ 4032 trie树+各种乱搞

    思路 : 先对b 的所有后缀建立trie树 第一问 暴力枚举a串的起点 在trie树上跑 找到最短的 第二问 也是暴力枚举a串的起点 a和b顺着暴力匹配就好 第三问 求出来a在第i个位置 加一个字母j ...

  10. LeetCode Weekly Contest 27

    1. 557. Reverse Words in a String III 分割字符串,翻转. class Solution { public: string reverseWords(string ...