arcgis 加载png图片实现图片跟随地图缩放和图片的动态播放

最新推荐文章于 2024-06-27 01:24:19 发布

weixin_34297704

最新推荐文章于 2024-06-27 01:24:19 发布

阅读量2.8k

点赞数 1

文章标签：移动开发 json

效果图：

主要原理：

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;//当前图片编号（索引号）
        // 图片数组

最低0.47元/天解锁文章

weixin_34297704

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
arcgis 加载png图片实现图片跟随地图缩放和图片的动态播放

效果图：主要原理：png加载到地图上是不可能的，图像本身是没有地理信息的。这里采用一种办法，在地图上创建一个图形图层，图形图层放一个矩形，给这个矩形用一个图片填充符号填充。关键技术点：填充符号的大小调整：获取那个矩形，左上角和右上角的横行长度来调整图形填充符号的长度，左下角和左上角间的纵向长度来调整图形填充符号的宽度。填充符号的偏移量：调整符号的偏移，防...
复制链接

扫一扫