arcgis 加载png图片实现图片跟随地图缩放 和图片的动态播放
效果图：
主要原理：
png加载到地图上是不可能的， 图像本身是没有地理信息的。 这里采用一种办法， 在地图上创建一个图形图层， 图形图层放一个矩形，给这个矩形用一个图片填充符号填充。
关键技术点：
- 填充符号的大小调整： 获取那个矩形， 左上角和右上角的横行长度来调整图形填充符号的长度， 左下角和左上角间的纵向长度来调整图形填充符号的宽度。
- 填充符号的偏移量：调整符号的偏移， 防止图片的填充出现不在区域正中央。
主要代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<!--<link href="http://localhost:36008/scripts/arcgisjs/dijit/themes/claro/claro.css" rel="stylesheet" />
<link href="http://localhost:36008/scripts/arcgisjs/dijit/themes/tundra/tundra.css" rel="stylesheet" />
<link rel="stylesheet" href="http://localhost:36008/scripts/arcgisjs/esri/css/esri.css">
<script src="http://localhost:36008/scripts/arcgisjs/dojo/dojo.js"></script>--> <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<script src="https://js.arcgis.com/3.16/"></script> <!--<script src="../scripts/arcgisjs/jsapi_vsdoc12_v38.js"></script>--> <style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
} #mapDiv {
position: relative;
}
</style>
<script>
var map;//地图
var graphic;//图形对象
var fillSymbol;//图片填充符号
var graphicLayer;//图形图层
var leftTopPoint;//左上角地图点
var leftTopScreenPoint;//左上角屏幕点
var globalInterval;//全局计时器
var currentPictureIndex = 0;//当前图片编号（索引号）
// 图片数组
var pictureArr = [
"http://localhost:36008/Content/images/dynamicImage/camx_CO_0_0.png",
"http://localhost:36008/Content/images/dynamicImage/2.jpg",
"http://localhost:36008/Content/images/dynamicImage/3.jpg",
"http://localhost:36008/Content/images/dynamicImage/4.jpg",
"http://localhost:36008/Content/images/dynamicImage/5.jpg",
"http://localhost:36008/Content/images/dynamicImage/6.jpg",
"http://localhost:36008/Content/images/dynamicImage/7.jpg",
"http://localhost:36008/Content/images/dynamicImage/8.jpg",
"http://localhost:36008/Content/images/dynamicImage/9.jpg",
]; var isPlayStatus = false;//判定是不是播放状态 require([
"esri/map",
"dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/TimeExtent",
"esri/dijit/TimeSlider",
"dojo/_base/array",
"dojo/dom",
"esri/graphic",
"esri/geometry/Geometry",
"esri/layers/FeatureLayer",
"esri/geometry/Polygon",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/renderers/SimpleRenderer",
"esri/SpatialReference",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/Color",
"dojo/domReady!"
], function(
Map, on
) {
map = new esri.Map("mapDiv", {
// basemap: "streets",
// extent: new esri.geometry.Extent(113.71, 25.89, 124, 48.63) ,
center: [-101.15, 37.604],
spatialReference : { wkid: 4326 }
});
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://59.108.92.220:8080/ArcGIS/rest/services/horseMap/chinaMap_terrain/MapServer");
map.addLayer(tiledMapServiceLayer, 0);
init(on);
// createGraphicLayer();
map.centerAndZoom(new esri.geometry.Point(113, 35, new esri.SpatialReference({ wkid: 4326 }, 4)));
map.setLevel(1);//设置level
}); function init(on) {
//给地图绑定事件
on(map, "zoom-end", function (evt) {
if (graphicLayer)
{
dynamicChangePicturePosition();
} });
//给按钮绑定事件
on(dojo.byId("btnStartOrStop"), "click", function () {
if (dojo.byId("btnStartOrStop").innerHTML == "播放"){
globalInterval = setInterval("switchPicture()", 2000);//2s播放一次
dojo.byId("btnStartOrStop").innerHTML = "暂停";
}
else {
clearInterval(globalInterval);
dojo.byId("btnStartOrStop").innerHTML = "播放";
} });
on(dojo.byId("btnPrev"), "click", function () {
currentPictureIndex -= 1;
if (currentPictureIndex < 0) {
currentPictureIndex = 0;
}
switchPicture();//切换图片
});
on(dojo.byId("btnNext"), "click", function () {
currentPictureIndex += 1;
if(currentPictureIndex >pictureArr.length-1)
{
currentPictureIndex = pictureArr.length - 1;
}
switchPicture();//切换图片
}); }
function switchPicture() {
if (!graphicLayer) {
createGraphicLayer();//创建图形图层并添加到map上去
}
if (currentPictureIndex > pictureArr.length - 1)
{
clearInterval(globalInterval);//删除计时器
currentPictureIndex = 0;//清零
dojo.byId("btnStartOrStop").innerHTML = "播放"; }
fillSymbol.setUrl(pictureArr[currentPictureIndex]);//从数组中取到图片的地址 graphic.setSymbol(fillSymbol);//设置符号
currentPictureIndex++;
}
function dynamicChangePicturePosition() {
var geometryExtent = graphic.geometry.getExtent();//获取图层的四至范围
leftTopPoint = geometryExtent.getCenter().offset(-geometryExtent.getWidth() / 2, -geometryExtent.getHeight() / 2);//左上角点
width = map.toScreen(geometryExtent.getCenter()).x * 2 - map.toScreen(leftTopPoint).x * 2; //计算屏幕长度
height = map.toScreen(leftTopPoint).y * 2 - map.toScreen(geometryExtent.getCenter()).y * 2;//计算屏幕宽度
fillSymbol.setHeight(height);//设置宽高
fillSymbol.setWidth(width);
leftTopScreenPoint = map.toScreen(leftTopPoint);//左上角的屏幕点坐标
fillSymbol.setOffset(leftTopScreenPoint.x, leftTopScreenPoint.y);//设置偏移 很关键！！！！
graphic.setSymbol(fillSymbol);//设置符号
}
function createGraphicLayer() {
fillSymbol = new esri.symbol.PictureFillSymbol("", new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color('#000'), 1), 42, 42);
var polygonJson = {
"rings":
[
[
[113, 35],
[121, 35],
[121, 39],
[113, 39],
[113, 35],
]
],
"spatialReference": { "wkid": 4326 }
};
var polygon = new esri.geometry.Polygon(polygonJson);//从一个json对象中创建一个多边形
graphicLayer = new esri.layers.GraphicsLayer({ id: "g1" });
graphic = new esri.Graphic({
geometry: polygon,
visible: true
});
graphic.setSymbol(fillSymbol);//给图形设置符号
graphicLayer.add(graphic);//给图层添加图形
map.addLayer(graphicLayer);//给地图添加图层
graphicLayer.setOpacity(0.8);//设置透明度
dynamicChangePicturePosition();//重新计算下图片的位置
map.setLevel(map.getLevel());//设置level
}
</script>
</head>
<body class="claro"> <button id="btnPrev"> 上一张 </button>
<button id="btnStartOrStop">播放</button>
<button id="btnNext"> 下一张 </button>
<div id="mapDiv"> </div>
</body>
</html>
arcgis 加载png图片实现图片跟随地图缩放 和图片的动态播放的更多相关文章
- 【ArcGis for javascript从零开始】之一 ArcGis加载天地图
最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...
- arcgis 加载高德地图 es6的方式
目前很多arcgis 加载高德地图是dojo的方式 外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...
- delphi 中 image 控件加载bmp、JPG、GIF、PNG等图片的办法
procedure TForm1.Button1Click(Sender: TObject);var jpg: TJPEGImage; // 要use Jpeg单元begin // 显示jpg大图 ...
- [转]Delphi 中 image 控件加载bmp、JPG、GIF、PNG等图片的办法
procedure TForm1.Button1Click(Sender: TObject); var jpg: TJPEGImage; // 要use Jpeg单元 begin // 显示jpg大图 ...
- Android加载SD卡目录，文件夹遍历，图片设置，设置文件对应打开方式等
此案例主要说的是Android使用GridView加载SD卡下所有目录,文件夹多层遍历,文件图标修改,设置文件对应打开方式等功能. 如图: 代码: public class GridViewFile ...
- ArcGIS加载高德、OSM和谷歌等地图
1. 引言 网络地图对于我们来说已经不是什么新鲜事了,上面有各大互联网公司收集的海量的地理空间数据.一般网络地图的地图是以切片形式存在的,因此,本文重点讲述如何将这些网络切片地图加载并显示再ArcGI ...
- ArcGIS加载数据中常用的File文件方法总结
在介绍ArcGIS中各种数据的打开方法时,我们用到了许多对于File文件的操作,在此做一个常用用法的总结.例如, 介绍ArcGIS中各种数据的打开方法——mxd(地图文档) 以方法一为例:运用Load ...
- [UE4]一个好用的虚幻4插件，根据资源名称动态加载资源,GetCurrentLeveName（获得当前地图名称）
下载地址 一.下载与UE4相对应的版本 二.在工程根目录新建Plugins目录,解压插件. 三.如果工程已经打开,则需要重新打开 四.重新打开工程后,右下角会有提示有新插件可用. 五.这个插件提供 ...
- ImageView加载长图（适用不需要缩放的情况）
此案例适用于加载网络长图且图片的宽和高已知的情况.由于ImageView加载图片有一个4096*4096的限制,所以对于巨长图的加载比较麻烦,需要我们自己去手动处理. 有两种解决方案:第一种就是比较l ...
随机推荐
- # 2019-2020-4 《Java 程序设计》结对项目总结
2019-2020-4 <Java 程序设计>结对项目阶段总结---<四则运算--整数> 一.需求分析 实现一个命令行程序 要求: 自动生成小学四则运算题目(加,减,乘,除): ...
- ubuntu18.04时区设置
1.运行命令 sudo tzselect 2.选择大区 选择亚洲Asia,继续选择中国China,最后选择北京Beijing 3.建立软链 ln -sf /usr/share/zoneinfo/Asi ...
- linux (ubuntu) 命令学习笔记
1, md5sum 输出字符串的MD5值 echo -n 123456 | md5sum //-n表示不打印回车符 2, ubuntu设置dock任务栏鼠标点击效果 16.04: 调整位置:gsett ...
- sf-1 算法
算法基础 算法 算法(Algorithm):一个计算过程,解决问题的方法 DNiklaus Wirth:“程序=数据结构+算法” 时间复杂度 时间复杂度:用来评估算法运行效率的一个式子 时间复杂度-小 ...
- IDEA的Find菜单使用
想要显示Find菜单在底部,如图: 选中一个类,如Cloneable,然后按键Ctrl+Alt+B(相当于eclipse中的ctrl+T) 显示如图,选择最右上角的固定标签 就会把它固定在控制台菜单中 ...
- php实现最简单的MVC框架实例教程
本文以一个实例的形式讲述了PHP实现MVC框架的过程,比较浅显易懂.现分享给大家供大家参考之用.具体分析如下: 首先,在学习一个框架之前,基本上我们都需要知道什么是mvc,即model-view-co ...
- Oracle 12c client with .NET legacy Oracle driver
如果使用Oracle 12c Client和.NET的Oracle driver,你很可能会碰到跟下面一样的问题: https://www.codeproject.com/Questions/8767 ...
- js获取复选框值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- html基础知识梳理
1.浏览器内核 补充:blink为Google与Opera共同开发. 2.web标准 web标准为w3c和其他标准化组织制定的一系列标准的集合.(标签闭合.小写.不乱嵌套,使用外链css/js;结构行 ...
- SQL 经典应用
SQL Server日常维护常用的一些脚本整理. 1.sql server开启clr权限: exec sp_configure 'clr enabled', 1 GO RECONFIGURE GO A ...