要件の説明
重畳されている絵は、今のArcGISマップ上の多くの項目のための広範な需要で、オンライン情報へのアクセスは、現在のArcGISのJS APIの公式ウェブサイトは、クラスに対応する画像レイヤを提供していないので、達成するための唯一の4つの方法があることを需要によって発見しましたインスタンス化ピクチャ層を聞かせますが、JSのAPIの公式ウェブサイトはそれが何であるかを時間を知っていない、APIのこのタイプを増加させる、後者を説明しました。現在のところ、このようなAPI層ますので、我々はそれを所有する他の方法を探します、次のように、今述べた4つあります画像がマップ上に重畳されて実現、以下のとおりです。
- ArcGISのは、ほとんど使用して達成することを知っているがシンボルとして、実際には、画像をグラフィックを述べました。
- 同様のArcGISのJS API 3.X MapImageモジュールによって達成されます。
- MapImageLayerを拡張することによって達成されます。
- JS APIはBaseDynamicLayer官オンラインクラスによって実装されます
我々は最終的にはさまざまな方法を見ていきます次に行われ、あるいはどのような効果を作ることができることはできません。前に具体的な手順を紹介し始めた、私たちはあなたを開示あげるこの記事はBaseDynamicLayerでこのクラスを達成するために、すなわち、達成するための第四の方法であるということです、次のように、最終的な結果は以下のとおりです。
各種プログラムや達成するための具体的な手順の分析
まず、フォームグラフィックの実現
このアプローチは、私がオンラインで見つける最初の実装、だけでなく、最も簡単なもの、クラスのArcGIS JS APIのシンボルは絵記号を支えてきたように、その原理は、シンボルのシンボルとして、実際に絵なので、絵であります次のように一つのシンボル、グラフィックレイヤインスタンス構成に追加されるように、最終的な追加は、グラフィック層は、特定のコード、マップ上でインスタンス化されます。
require(["esri/Map",
"esri/views/MapView",
"esri/Graphic"
], function(Map, MapView, Graphic) {
var map = new Map({
basemap: "satellite"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
var polyline = {
type: "polyline",
paths: [
[91.0761406150, 29.5803130630]
]
};
var polylineAtt = {
Name: "Keystone Pipeline",
Owner: "TransCanada"
};
var pictureSymbol = {
type: "picture-marker",
url: "./test.jpg",
width: "240px",
height: "240px",
};
var polylineGraphic = new Graphic({
geometry: polyline,
symbol: pictureSymbol,
attributes: polylineAtt
});
view.graphics.add(polylineGraphic);
});次のように上記のコードによって達成最終的な効果です。
以上の結果から分かるように、これは我々がこの方法で地図上の画像に追加しても、私たちが望む結果ではなく、マップズームとして、画像ではなく、スケールを行い、それはまだ元のサイズを維持します。動的ビューイベントをズームする聞くことによって、画像のサイズを調整することは可能ですがレイヤを表示しますが、このアプローチは少し愚かな感じ、と晩期障害はどのようにできない場合があります。したがって、この方法を検討している、排除されます。
第二に、MapImageで同様のArcGIS JS APIの3.Xモジュールによって達成されます
両方のモジュール内のArcGIS JS API 3.XとArcGIS JS API 4.X MapImageでは、バージョン3.xは、このブロックの画像情報のクラスでインスタンス化することができ、次いでaddImage方法MapImageLayerによってクラスの画像情報MapImageLayer層に追加し、最終的にはマップにMapImageLayerレイヤーを追加し、これは次のようにコードがあり、絵を完了し、オーバーレイマップ：
require(["esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/layers/support/MapImage"
], function(Map, MapView, MapImageLayer, MapImage) {
var map = new Map({
basemap: "satellite"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
//实例化图层
var mapimageLayer = new MapImageLayer({
id: 'imageLayer_xuqw'
});
map.add(mapimageLayer);
var image = new MapImage({
'extent':
{
'xmin': -8864908,
'ymin': 3885443,
'xmax': -8762763,
'ymax': 3976997,
'spatialReference':
{
'wkid': 3857
}
},
'href': './test.jpg'
});
mapimageLayer.addImage(image);
});上記のコードでは、我々は唯一、可能MapImageクラスのインスタンス生成時間情報と、URLアドレス範囲の画像を渡す必要がありますので、完璧であるようだが（偶然、MapImageLayerのArcGISのJS API 4.XバージョンではないaddImageであることを起こります）この方法で、私たちは、このアプローチを放棄することができます。公式サイトも取るわけではないので、単にまだライン上にない発表していない、それはこのカテゴリをMapImage書きます、なぜ何のaddImage（）このメソッドは、存在しないのでしかし与えなかった学生は、依頼する必要があり、問題はジオネットに実際にあります職員がミスするので、それが書かれていたと言って、答えもあります......
第三に、MapImageLayerを拡張することによって達成されます
実際には、ちょうど良い、主に兄徐レイの記事を表示するには、このアイデアは、次のアドレスの記事をインスピレーションを受けました：
https://www.jianshu.com/p/cc744f1ad6bb?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=weixin-timeline&from=timeline興味のある学生は、物品が最終的に非常に詳細に書かれた、githubのアドレスとソースコードを入れて、私はテストの層の種類に応じて、最後の拡張された、この記事の下で学ぶために行くことができる、次のような効果があり、成功しています。
画像がマップ上に重畳されて、上のスクリーンショットは、マップのズームに従い、対応する描画のサイズを変更し、効果はかなり良いですが、現在のプロジェクトだけでこのような小さな膨張層を行う必要が与えられます私はまだ他の方法を模索したいので、操作は、動きの範囲は、いくつかの努力とエネルギーコストに少し大きすぎると入れて、気持ちは価値がない、実際には、それは、ハッハッハ、自分の怠惰され、これは第四を見つけることではありません方法。
第四に、BaseDynamicLayerクラスJS APIの公式ウェブサイトによって達成されます
見つけるための絶え間ない努力で、ついに見つけGIS製品のホーム私たちは地図を達成するために、画像重畳層で、このクラスの簡単な拡張を渡すことができますので、私たちは拡張層をカスタマイズすることができますし、BaseDynamicLayerこのクラスを、画像に重ね。原則の範囲は、レンダリング技術キャンバスで使用された後、実際には、画像へのアクセスは、情報画面座標を座標のその範囲を変換して、インスタンス化キャンバスのハンドルは、絵を描くこと。
次のように拡張したカスタムクラスコードの画像を重畳：
//自定义叠加图片图层
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;
// 创建canvas DOM元素，并设置其宽高和图片一样
if (!this.canvas) {
this.canvas = canvas = document.createElement("canvas");
}
this.canvas.width = 2000;
this.canvas.height = 2000;
//左上角地理坐标转换屏幕坐标,为了获取canvas绘制图片的起点
var mapPoint = {
x: this.extent.xmin,
y: this.extent.ymax,
spatialReference: {
wkid: 4326
}
};
var screenPoint = view.toScreen(mapPoint);
//根据extent范围计算canvas绘制图片的宽度以及高度
//左下角
var leftbottom = {
x: this.extent.xmin,
y: this.extent.ymin,
spatialReference: {
wkid: 4326
}
};
var screen_leftbottom = view.toScreen(leftbottom);
//右上角
var righttop = {
x: this.extent.xmax,
y: this.extent.ymax,
spatialReference: {
wkid: 4326
}
};
var screen_righttop = view.toScreen(righttop);
this.canvas.getContext("2d").drawImage(this.image, screenPoint.x, screenPoint.y, Math.abs(screen_righttop.x - screen_leftbottom.x), Math.abs(screen_righttop.y - screen_leftbottom.y));
return this.canvas.toDataURL("image/png");
}
});次のようにクラスコードをインスタンス化：
var ImageOverlayLayer = new CustomImageOverlayLayer({
picUrl: "1.jpg",
extent: {
xmin: 91.0761406150,
ymin: 29.5803130630,
xmax: 92.0761406150,
ymax: 30.5803130630
}
});
map.add(ImageOverlayLayer);次のように得られた画像のオーバーレイ効果があります。
この方法によって得られる効果は、私たちが必要なものを簡単な操作で、マップで地図上の最終的に重畳された画像はサイズを変更するためにズームしますので、これは最終的にこの方法で達成すること。
添付ファイル：
すべてのソースコードの第四の方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>地图叠加图片</title>
<link rel="stylesheet" href="http://localhost/4.14/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="http://localhost/4.14/init.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/BaseDynamicLayer"
], function (Map, MapView, BaseDynamicLayer) {
//自定义叠加图片图层
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;
// 创建canvas DOM元素，并设置其宽高和图片一样
if (!this.canvas) {
this.canvas = canvas = document.createElement("canvas");
}
this.canvas.width = 2000;
this.canvas.height = 2000;
//左上角地理坐标转换屏幕坐标,为了获取canvas绘制图片的起点
var mapPoint = {
x: this.extent.xmin,
y: this.extent.ymax,
spatialReference: {
wkid: 4326
}
};
var screenPoint = view.toScreen(mapPoint);
//根据extent范围计算canvas绘制图片的宽度以及高度
//左下角
var leftbottom = {
x: this.extent.xmin,
y: this.extent.ymin,
spatialReference: {
wkid: 4326
}
};
var screen_leftbottom = view.toScreen(leftbottom);
//右上角
var righttop = {
x: this.extent.xmax,
y: this.extent.ymax,
spatialReference: {
wkid: 4326
}
};
var screen_righttop = view.toScreen(righttop);
this.canvas.getContext("2d").drawImage(this.image, screenPoint.x, screenPoint.y, Math.abs(screen_righttop.x - screen_leftbottom.x), Math.abs(screen_righttop.y - screen_leftbottom.y));
return this.canvas.toDataURL("image/png");
}
});
var map = new Map({
basemap: 'osm',
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [107.246152,34.414465],
zoom: 7
});
view.when(function () {
var ImageOverlayLayer = new CustomImageOverlayLayer({
picUrl: "1.jpg",
extent: {
xmin: 91.0761406150,
ymin: 29.5803130630,
xmax: 92.0761406150,
ymax: 30.5803130630
}
});
map.add(ImageOverlayLayer);
//地图移动刷新,防止地图初始化时候，图片叠加图层加载刷新不过来
setTimeout(function () {
var center = view.center.clone();
center.x -= 0.001;//底图是经纬度
view.center = center;
view.goTo(view.center,
{
speedFactor: 0.1,
easing: "linear" //linear, in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo
});
}, 500);
}, function (error) {
console.log("图片叠加失败: ", error);
});
});
</script>
</body>
</html>
