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之家小专栏

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

  • 相关阅读:
    Netcat for Windows
    绕过图片格式限制上传木马获取WebShell
    Firefox Security Toolkit 安装
    centos安装异常解决方法
    docker --help
    centos更新163源并升级内核
    CentOS系统内核升级
    CentOS7安装Docker时的异常报错与解决方法
    EPEL库安装
    CentOS7 64位 自动分配IP地址设置
  • 原文地址:https://www.cnblogs.com/giserhome/p/11228594.html
Copyright © 2011-2022 走看看