31:[] 2f:{"title":"OpenLayers v6 blend mode and filters","cells":[{"id":0,"value":"md`# OpenLayers v6 blend mode and filters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`OpenLayers v6 で地図の合成とフィルタを設定する方法のデモ`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`mix-blend-mode: **${blend}**
filter: **${filter}**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof blend = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof filter = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof map = {\n const target = html`

`;\n yield target; // Give the container dimensions.\n \n //cjstd.setProperties('className', blend);\n \n const map = target.value = new ol.Map({\n layers: [relief, cjstd],\n target,\n view: new ol.View({\n center: ol.proj.fromLonLat([140.46, 36.4]),\n zoom: 10\n })\n });\n invalidation.then(() => map.dispose());\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"relief = new ol.layer.Tile({\n source: new ol.source.XYZ({\n url: 'https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',\n attributions: '国土地理院',\n }),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"cjstd = new ol.layer.Tile({\n className: `${blend} ${filter}`,\n source: new ol.source.XYZ({\n url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',\n attributions: '国土地理院',\n }),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm. :(\n const ol = await require(\"https://openlayers.org/en/v6.5.0/build/ol.js\").catch(() => window.ol);\n ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}