HTML－－如何实现通过鼠标事件拖动页面图像(代码)

最新推荐文章于 2023-06-21 09:26:15 发布
最新推荐文章于 2023-06-21 09:26:15 发布
阅读量3.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Java 文章标签： html function variables reference xhtml object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sap_jack/article/details/1733805

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>onMouseMove Event Handler</title>
<style type="text/css">
    #camap {position:absolute; left:20; top:120}
    #ormap {position:absolute; left:80; top:120}
    #wamap {position:absolute; left:140; top:120}
</style>
</head>

<script  type="text/javascript">
// global variables used while dragging
var offsetX = 0
var offsetY = 0
var selectedObj
var frontObj
// set document-level event handlers
document.onmousedown = engage
document.onmouseup = release
// positioning an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
    obj.style.pixelLeft = x
    obj.style.pixelTop = y
}
// setting the z-order of an object
function bringToFront(obj) {
    if (frontObj) {
        frontObj.style.zIndex = 0
    }
    frontObj = obj
    frontObj.style.zIndex = 1
}
// set global var to a reference to dragged element
function setSelectedObj() {
    var imgObj = window.event.srcElement
    if (imgObj.id.indexOf("map") == 2) {
        selectedObj = imgObj
        bringToFront(selectedObj)
        return
    }
    selectedObj = null
    return
}
// do the dragging (called repeatedly by onMouseMove)
function dragIt() {
    if (selectedObj) {
        shiftTo(selectedObj, (event.clientX - offsetX), (event.clientY - offsetY))
        return false
    }
}
// set global vars and turn on mousemove trapping (called by onMouseDown)
function engage() {
    setSelectedObj()
    if (selectedObj) {
        document.onmousemove = dragIt
        offsetX = window.event.offsetX - document.body.scrollLeft
        offsetY = window.event.offsetY - document.body.scrollTop
    }
}
// restore everything as before (called by onMouseUp)
function release() {
    if (selectedObj) {
        document.onmousemove = null
        selectedObj = null
    }
}
</script>

<body>
<h1>onMouseMove Event Handler</h1>
<img id="camap" src="d:/bw/n001387.jpg" style="left: 31px; top: 1px"  />
<br />
<img id="ormap" src="d:/bw/n001387.jpg" style="left: 31px; top: 297px" />
<br />
<img id="wamap" src="d:/bw/n001387.jpg" style="left: 31px; top: 184px" />
<br />
</body>
</html> 

SAGA-GIS软件下载
Z_W_H_的博客
03-15 1882
官网： SAGA - System for Automated Geoscientific Analyseshttps://saga-gis.sourceforge.io/en/index.html点击下载按钮 点击后等几秒即可下载 下载时间过长
QGIS004:QGIS软件工具箱介绍
qq_31762031的博客
10-02 2954
摘要：介绍QGIS常用工具集及常用工具的功能。
SAGA GIS安装包
wuwenhuanwu的专栏
07-21 1687
SAGA GIS是一款功能强大的开源GIS软件。因近期用到里面的模块去获取水文指数，所以需要深入的了解一下它。SAGA它支持ws os还有linux系统，而且可以用它的GUI软件，或是使用python api，可谓功能强大。但是，面对处理大数据量时，GUI软件运行的往往不是很问题，所以想起试试api。 在使用过程中，提供了软件安装包，点击saga.exe直接运行即可，相当于installer版本。 另外，还有Binary Packages 和 Compiling from source两种方式选择。Bi
专业的地形分析处理软件SAGA（附安装包下载）
03-31 5284
1.概述 自动化地球科学分析系统（SAGA GIS）是一种地理信息系统（GIS）计算机程序，用于编辑空间数据。 它是免费的开源软件，最初由德国哥廷根大学自然地理系的一个小团队开发，现在由国际开发人员社区进行维护和扩展。 SAGA GIS旨在为科学家提供一个有效但易于学习的平台，以实施地球科学方法，这是通过应用程序编程接口（API）实现的。 SAGA具有快速增长的一组地球科学方法，这些方法捆绑在可交换的模块库中。 2.数据来源 SAGA GIS所需要的DEM数据可以从微图中下载，除了DEM数据..
SAGA GIS英文版进行地形分析，计算常用的地形因子等
qq_35794085的博客
05-09 4642
SAGA GIS中文版是一款专业的自动化地球科学分析系统软件。SAGA GIS最新版界面简洁，操作简便，用户使用时输入要分割的影像，选择要计算特征的影像或者波段，设置越大，得到的斑块越大;反之，则越小，点击Okay，得到分割影像图。SAGA GIS中文版主要通过选择适合你影像的格式，加载影像。 SAGA GIS全称是System for Automated Geoscientific Analyses，是一种用于编辑空间数据的地理信息系统(GIS)计算机程序，它是免费的开源软件，SAGA GIS旨在为科学家
SAGA GIS使用教程
GIS_feifei的博客
11-11 8381
使用SAGA GIS免费软件，提取地形湿度指数（topographic wetness index, TWI）和水流功率指数（stream power index, SPI） 等数据，简单易操作。
SAGA GIS使用———加载以及显示影像
wangzhihao_2015的博客
12-14 4956
SAGA的全称为System forAutomatedGeoscientificAnalyses，它是免费的地理信息系统开源软件，SAGA有多个标准的模块库，详细介绍可参考： https://en.wikipedia.org/wiki/SAGA_GIS https://sagatutorials.wordpress.com/about-saga-gis/ （1）使用SAGAGIS导...
SAGA_User_Guide.pdf
08-14
《SAGA用户指南》是针对SAGA（System for Automated Geo-Scientific ...总之，《SAGA用户指南》是学习和掌握SAGA软件的重要资源，无论你是地理科学的学生还是专业研究人员，都能从中受益，提升你的地理数据分析能力。
topo:地形计算软件-开源
04-28
本文将深入探讨开源地形计算软件的相关知识点，包括其核心功能、优势、常用软件以及如何参与和贡献。 1. 核心功能： - 数据导入：支持多种格式的地形数据，如DEM（数字高程模型）、TIN（不规则三角网）、格网等。 ...
LiDAR点云处理软件
weixin_30640291的博客
02-18 2083
转自https://www.cnblogs.com/l-kong/ 1、主要介绍当前主流的激光雷达数据处理库、开源软件、商业软件等。 英文主页： http://opentopo.sdsc.edu/tools/listTools2、日期 工具名称 工具类型 关键词 评分2017年1月12日 planlauf /地形说明： planlauf / TERRAIN是Windows 7/8/10易于...
SAGA GIS-开源
04-26
SAGA-自动地球科学分析系统-是具有巨大功能的地理信息系统（GIS）软件，用于地理数据处理和分析。 SAGA用面向对象的C ++语言编程，并通过非常有效的应用程序编程接口（API）支持新功能的实现。 功能在独立于框架的模块库中组织为模块，并且可以通过SAGA的图形用户界面（GUI）或各种脚本环境（shell脚本，Python，R等）进行访问。 如果您使用的是SAGA，请在工作中提供以下参考：Conrad，O.，Bechtel，B.，Bock，M.，Dietrich，H.，Fischer.E。，Gerlitz，L.，Wehberg，J.，Wichmann ，V.和Boehner，J.（2015）：自动地球科学分析系统（SAGA）v.1.4.4。 Geosci。 模型开发。，8，1991-2007，doi：10.5194 / gmd-8-1991-2015。 http://www.geosci-model-dev.net/8/1991/2015/gmd-8-1991-2015.html。
shadow-calculator:确定任何给定时间和位置的阴影长度
06-18
阴影计算器 计算你的影子的长度 概括 确定一天中不同时间的阴影长度有很多应用，现有的计算器很难使用和理解。 问题 我读到一天中维生素 D 吸收的最佳时间是当你的影子短于你的长度时（当太阳在天空中更高时）。 没有简单的方法可以找出那些时间。 例如，阴影长度也可用于园艺、摄影和晒黑。 解决方案 阴影计算器会立即告诉您您的阴影现在有多长，全天有多长，以及任何时间、任何一天和任何位置。 如何开始 npm install bower install node server.js 在不到 2 天的时间内使用 Angular 和 D3.js 为我的 Hack Reactor MVP 个人项目构建
光伏阴影计算
05-12
计算光伏阴影方便多了，不需要套公式，真好
收藏 | 14 种免费 GIS 软件
weixin_60784949的博客
06-21 5182
QGIS的用户界面友好，易于使用，因此吸引了大量的用户和开发者。uDig是一款开源的桌面GIS软件，基于Java和Eclipse平台，可以进行shp格式地图文件的编辑和查看，同时也是一个开源空间数据查看器/编辑器，对OpenGIS标准，关于互联网GIS、网络地图服务器和网络功能服务器有特别的加强。如果你想绘制一幅世界地图，会选择什么GIS软件呢，ArcGIS、GlobalMapper这些都是国外比较出名的商业GIS软件，当然在国内很容易找到可用的版本，但是也可以使用免费的GIS软件完成所有操作。
SAGA——Textural Features(纹理特征)提取
wangzhihao_2015的博客
01-26 1638
由于课题需要（其实是条件有限），不得不使用SAGA软件进行特征提取，在经过一个星期的摸索之后，终于得到了一些成果，在此记录一下提取的过程。 在第一篇的文章中已经简单介绍了SAGAGIS的相关概念以及如何使用SAGAGIS加载影像和进行分割。 Textural Features提取过程： （1）将影像的各个波段分别导出为单独影像（这一步是由于我是在服务器上进行，所以需要导出，软件上没有必要...
SAGA GIS Master代码编译
Earl的专栏
03-24 580
SAGA GIS Master代码编译准备工作安装工作 准备工作 SAGA GIS Master代码下载：sagagis代码下载地址 wxwidgets3.1.3代码下载：wxwidgets代码下载 vs2019下载安装 安装工作 vs2019可以自行百度，教程特别多。 WXWIDGETS安装 ，安装过程直接点击exe安装到自定义地方，我的安装到 “E:\框架研究专用文件夹\SAGA” ...
开源遥感软件（未完待续）
zhang22huan的备忘笔记
03-28 1999
1. SAGS：http://www.saga-gis.org/en/index.html SAGA是一个免费的地理信息系统（GIS），与一个特殊的应用程序编程接口（API的）地理数据处理。这个API可以很容易实施的新算法。它的API支持网格数据，矢量数据，并表。 2. GDAL：http://www.gdal.org/ GDAL是一个操作各种栅格地理数据格式的库。包括读取、写入、转换、处理
redux-saga的简单使用——saga的模块化拆分——saga进行网络请求——同步修改状态
阿牛哥的博客
10-10 680
redux-saga的简单使用——saga的模块化拆分——saga进行网络请求——同步修改状态
这12个GIS软件一个比一个好用
GISWorld3D的博客
04-06 6198
在大家的工作学习中，对于GIS软件接触的最多的莫过于arcgis了，不过arcgis的安装和破解有着的步骤，并且其越来越强大的功能对于机器性能的需求也越来越大。对于一些只需要部分操作的需求，其实不需要使用arcgis，使用一些轻量级的免费软件即可实现，本文就为大家介绍12款不错的免费GIS软件，希望对大家有所帮助。 GeoDa GeoDa是一个开源的软件包，它可以进行空间数据分析、地理可视化、空间自相关和空间建模。OpenGeoDa是遗留GeoDa的跨平台、开源版本。虽然遗留的GeoDa只运行在Windo
ArcgisQGIS DEM重分类
最新发布
03-18
<think>好的，用户想在ArcGIS或QGIS中对DEM进行重分类。首先，我需要回忆一下这两个软件中关于重分类的功能和步骤。记得在ArcGIS里，重分类通常是通过Spatial Analyst工具里的Reclassify工具完成的。而在QGIS中，可能使用的是Raster Calculator或者Reclassify by Table之类的插件或处理工具。 用户可能对DEM数据不太熟悉，所以需要先解释什么是重分类。重分类就是将栅格中的数值重新映射到新的类别或范围，比如将高程分成不同的等级，用于分析地形或制作地图。不过，用户已经提到了DEM，所以可能已经了解基本概念，但应用步骤是关键。 接下来，要分步骤说明在两个软件中的操作流程。对于ArcGIS，需要确保Spatial Analyst扩展模块已经启用，然后找到Reclassify工具，选择输入栅格，设置分类规则，比如手动划分间隔或使用分类方法（自然间断点、等间隔等），然后指定输出路径。需要提醒用户注意分类方法的适用场景，比如等间隔适合均匀分布的数据，而自然间断点则根据数据分布自动划分。 对于QGIS，可能步骤稍有不同。QGIS默认可能没有直接的Reclassify工具，但可以通过Raster Calculator使用条件语句来重新分类，或者安装Reclassify插件。比如使用GRASS GIS的r.reclass模块，或者SAGA GIS的重分类工具。需要详细说明每种方法的具体步骤，比如在Processing Toolbox里搜索相关工具，设置旧值到新值的映射表，或者使用表达式进行条件赋值。 另外，用户可能会遇到常见问题，比如分类后数据范围不正确，或者输出结果不显示。这时候需要检查输入数据的值域，确认分类规则是否正确覆盖了所有可能的值，或者检查是否忽略了某些特殊值（如Nodata）。此外，输出格式的选择也可能影响结果，建议使用GeoTIFF等常见格式以确保兼容性。 还要考虑用户的实际应用场景。例如，重分类可能用于洪水模拟，将高程分为淹没区和非淹没区；或者用于土地利用规划，划分不同的坡度等级。不同的应用可能需要不同的分类策略，因此提供一些实例会有帮助。 最后，生成相关问题时，需要围绕DEM处理的其他操作，比如坡度计算、山体阴影生成，或者与其他软件的比较，比如如何选择ArcGIS和QGIS进行这类操作。可能还要涉及数据预处理步骤，比如如何纠正DEM中的错误或填补缺失值。</think>### 如何在 ArcGIS 或 QGIS 中对 DEM 进行重分类？ #### **ArcGIS 操作步骤** 1. **启用 Spatial Analyst 扩展** 打开 ArcMap 或 ArcGIS Pro，依次点击 `Customize > Extensions`，勾选 `Spatial Analyst`[^1]。 2. **打开重分类工具** 在 `Toolbox` 中导航至 `Spatial Analyst Tools > Reclass > Reclassify`。 3. **设置参数** - 输入栅格：选择 DEM 数据。 - 分类方法：支持手动划分区间或自动分类（如自然间断点、等间隔）。 - 输出栅格：指定保存路径。 ```python # 示例：通过代码调用工具 arcpy.Reclassify_3d("dem.tif", "VALUE", "0 500 1;500 1000 2;1000 1500 3", "output_reclass.tif") ``` 4. **验证结果** 检查输出栅格的属性表，确认高程值已按规则映射到新类别。 --- #### **QGIS 操作步骤** 1. **使用 Raster Calculator** - 打开 `Raster Calculator`（Processing Toolbox 中搜索）。 - 输入条件表达式，例如将高程分为三类： ``` (dem@1 <= 500) * 1 + (dem@1 > 500 AND dem@1 <= 1000) * 2 + (dem@1 > 1000) * 3 ``` - 指定输出格式为 GeoTIFF。 2. **通过插件重分类（如 Reclassify by Table）** - 安装 `Reclassify by Table` 插件。 - 定义旧值范围与新值的映射表，例如： | 旧值范围 | 新值 | |----------|------| | 0-500 | 1 | | 500-1000 | 2 | | >1000 | 3 | 3. **GRASS GIS 工具** 在 Processing Toolbox 中搜索 `r.reclass`，上传规则文件（如 `rules.txt`）定义分类规则。 --- #### **常见问题与注意事项** - **数据范围不匹配**：检查 DEM 的元数据，确认高程值范围是否覆盖分类区间。 - **Nodata 处理**：在 QGIS 中可通过 `Raster Calculator` 添加条件 `ELSE 0` 或保留原值。 - **分类方法选择**： - 等间隔：适用于均匀分布的高程数据。 - 自然间断点：适合突出地形突变区域[^2]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值