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 ...
随机推荐
- 计算pi的精度+进度条显示
步骤1:安装tqdm 首先,要打开cmd,输入指令,不断找到python文件的路径,知道找到Scripts,然后分别打入pip install pygame和pip install tqdm 如下图 ...
- js group by
var arr = ['Car', 'Car', 'Truck', 'Boat', 'Truck'];var hist = {};hist = arr.reduce((prev, item) => ...
- flink 读取kafka 数据，partition分配
每个并发有个编号,只会读取kafka partition % 总并发数 == 编号 的分区 如: 6 分区, 4个并发 分区: p0 p1 p2 p3 p4 p5 并发: 0 1 2 3 ...
- 如何下载官网上下载历史Java版本（老版本Java）
首先先打开Oracle的官网 -->Oracle 然后选择Trials and Downloads 然后往下翻,选择java(JDK) 然后看到了这个,再往下翻 点他,然后就是选择你想下载 ...
- ajax提交数组至后台，无法获取值得问题
$(".delAll_btn").click(function(){ var checkStatus = table.checkStatus('userList'), data = ...
- springboot的拦截器Interceptor的性质
Interceptor在springboot2.x版本的快速入门 实现HandlerInterceptor的接口,并重载它的三个方法:preHandle.postHandle.afterComplet ...
- iOS 数据归档----温故而知新
#import "StudyViewController.h" #import "person.h" @interface StudyViewControlle ...
- 关于Android 8.0java.lang.SecurityException: Permission Denial错误的解决方法
背景 当我在Android 7.0及以下手机运行启动页,进行Activity跳转的时候,完美跳转到对应的目标Activity. 但当在Android 8.0及以上手机进行Activity跳转时,会爆如 ...
- Spring+Redis集成+关系型数据库持久化
本篇文章主要介绍了"Spring+Redis集成+关系型数据库持久化",主要涉及到Spring+Redis集成+关系型数据库持久化方面的内容,对于Spring+Redis集成+关系 ...
- 从 0 开始手写一个 Mybatis 框架，三步搞定！
阅读本文大概需要 3 分钟. MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码. 本文完成的Mybatis功能比较简单,代码还有许 ...