zoukankan      html  css  js  c++  java
  • arcgis api 4.x for js 自定义叠加图片图层实现地图叠加图片展示(附源码下载)

    前言

    关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 4.x 的好素材。

    内容概览

    arcgis api 4.x for js 实现地图叠加图片效果
    源代码 demo 下载

    实现效果图:

    实现思路

    通过 arcgis api 4.x 提供自定义图层的接口 BaseDynamicLayer.createSubclass({}),创建叠加图片图层,实现地图叠加图片

    • 创建叠加图片图层调用代码
    var ImageOverlayLayer = new CustomImageOverlayLayer({
    picUrl:"0.png",
    extent:{xmin:113.3596,ymin:23.1239,xmax:113.3748,ymax:23.1354}
    });
    map.add(ImageOverlayLayer);

    picUrl: 图片路径
    extent: 图片范围叠加地图显示

    • 叠加图片图层完整代码
    //自定义叠加图片图层
    var CustomImageOverlayLayer = BaseDynamicLayer.createSubclass({
    properties: {
    picUrl: null,
    extent:null,
    image:null,
    canvas:null,
    },
     
    // Override the getImageUrl() method to generate URL
    // to an image for a given extent, width, and height.
    getImageUrl: function(extent, width, height) {
    //新Image对象,可以理解为DOM
    if(!this.image){
    this.image = new Image();
    }
    this.image.src = this.picUrl;
    ……

    更多的详情见GIS之家小专栏

    文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

  • 相关阅读:
    2. Add Two Numbers
    1. Two Sum
    leetcode 213. 打家劫舍 II JAVA
    leetcode 48. 旋转图像 java
    leetcode 45. 跳跃游戏 II JAVA
    leetcode 42. 接雨水 JAVA
    40. 组合总和 II leetcode JAVA
    24. 两两交换链表中的节点 leetcode
    1002. 查找常用字符 leecode
    leetcode 23. 合并K个排序链表 JAVA
  • 原文地址:https://www.cnblogs.com/giserhome/p/11228594.html
Copyright © 2011-2022 走看看